CSS Zen Garden Concept

CSS Zen Garden Synopsis

My original concept was to create a design that mimicked a desk of an artist. The interface would be placed through CSS on top of a photograph of a desktop. The desk would have had pictures, papers, and tools scattered around it with text placed on the papers and images placed on the photographs.

Anyway, after the change to the assignment to not require CSS, I thought it would be best to abandon the idea simply because the images would have not been difficult to place, and I had another concept in mind that would challenge my designing more. After studying several preexisting styles of the CSS Zen Garden, I thought I would try one that put the most emphasis on the left side in a rule of thirds. To go for a modern, minimalist approach, I built a gray box lay out that consisted of only three boxes: the heading, body, and links. All three of these gray boxes were adjusted to the left, fitting snugly inside either the left third of the composition or the left half.

After placing my gray boxes, I began to look at the color wheel to see what would compliment my minimal layout. Having used a lot of blue for my previous works, I decided to try a green shade, but a very dark, saturated one. I’ve had a lot of success this semester with saturated colors, so I stuck with it. The color I used ended up being more of a gray than a green to help give that modern feel, but enough green to look colorful.

To further build upon the modern minimalist style, I chose the typeface Eurostile. Eurostile was designed with technicality and functionality in mind, and its linear nature, squarish shapes, and rounded corners that mimic television screens made the typeface perfect for what I wanted.

To finish up the composition with some visual aesthetics, I added a stock picture of a Chinese dragon statue to the background and some brushwork to the blocks throughout the layout. To mimic the personality of the typeface Eurostile, I applied soft, rounded corners to these blocks.

Web Design is Fun

I’ve been getting ahead of myself in my Web Media I class, everything just clicks in my head and I just go with it. Using CSS references from places such as http://w3schools.com/ I can figure out how to do a decent amount of styling.

For Exercise 2.1, we had to apply an internal stylesheet into our markup. This is what I came up with: http://groundgear.comli.com/2_1_exercise.html

For Exercise 2.2, we had to make an external stylesheet and link our markup to it. I took this opportunity to apply a completely different style to the same site, just to see how amazingly flexible it is. This is what I came up with: http://groundgear.comli.com/2_2_exercise/index.html

Now I just need to figure out how to correctly center the entire layout so I can make my background fixed instead of looped.

Web in the Wild

I would like to start off by stating that Web in the Wild is not a very pleasant name to invent a logo out of. But, in a way, I am glad that we had to use such a terrible name. It really stirred the creativity inside me to constantly come up with ideas and experiment until I found a solution I couldn’t be happier with. My initial concept was that since the web was world wide (hence the World Wide Web), I wanted to use a hint of the sphere that represents the globe. As overdone as circles are for logos, I say if it works, it’s fine. For my logo, it didn’t work so well at first. I went through four rough designs before coming to a solution that was somewhat satisfying enough for critique…or so I thought. Changing the type to Gotham to reflect the geometric attitude of the site was a pleasant change, but the logo was too simple. It was still simply a white W inside a black circle. The idea was to play with the negative space and change the color of the separated shapes to green and have the rest of the circle blue to reflect the image of Earth. Unfortunately, it was too simple, and apparently resembled StumbleUpon too much.

Going back to the sketches, I decide to not make it so obvious. I keep the Gotham line, but change it to all caps to form a subtle baseline for my idea. Then, I take the circle and split it into three parts to represent the three events, in a way that subtly resembles a W. Not only do I make it resemble a W, it also represents a flower bulb and even a paw print – both relating to the “wild” nature of the brand. The tag line was originally Like a Breath of Fresh Air but was quickly shut down. Fresh is dead. The new tag line, A World Untouched, was considered after a brief fascination with the word “untouched.” It represented the nature of the web – a rapidly growing environment that is still being explored. It is a world that we are just stepping into. After the tagline was done, the next issue was color choice. After much consideration in color for the resolved logo, I have found that a red-orange logo with a warm purple background looks beautiful and geometric without having to be green. After much help from my classmates, the logo was finished.

So Long, and Thanks for Everything, Medium and Tubatomic

Josian Roe from Medium and Alex Ogle from Tubatomic came to give us one final lecture about designing on the web and its careers. They gave us insight on what it is like to actually have a job in web design, and noted that he is almost always working nonstop. They answered any of the questions that remained from our group, and one such question was what they looked for in a person if they wanted to hire someone. They simply answered that a knowledge of HTML and CSS, a drive to self-teach and self-motivate oneself through problems, having a good quality resume, and being a jerk were appealing ways for them to hire. They’ve continuously emphasized throughout the past week about using Google as a very reliable tool to face any web design issues and still stick to their guns on the subject. They’ve constantly repeated, “If there is a problem, Google it. There is a solution out there.”

After the brief Q&A, the two gave each of us an amazing list of resources that can be used to expand our knowledge of web design. The list included links to CSS Inspiration such as http://thefwa.com, Design Blogs such as http://www.smashingmagazine.com/, a lorem ipsum generator, Wireframing links, online type testers, online font creators, job boards, and online portfolio services. In fear of losing the sheet of paper, I will put the list here.

Inspiration

http://thefwa.com

http://www.thecssgallerylist.com

Design Blogs

http://www.smashingmagazine.com

http://net.tutsplus.com

http://wellmedicated.com

http://speckyboy.com

http://www.designshard.com

http://spystudios.com

http://www.noupe.com

http://www.instantshift.com

http://inspectelement.com

Greek

http://lipsum.com

Wireframing

http://www.mockflow.com

http://iplotz.com

http://www.flairbuilder.com

Online Type

http://www.typetester.org

http://www.typechart.com

http://csstypeset.com

Online Font Creator

http://fontstruct.fontshop.com

Job Boards

http://www.krop.com

http://jobs.37signals.com/jobs

http://jobs.smashingmagazine.com

Online Portfolio Services

http://www.flickr.com

http://www.krop.com/creativedatabase

http://www.behance.net

http://cargocollective.com

http://www.coroflot.com

Diving into CSS

On Tuesday, Oct. 13, Medium and Tubatomic helped us jump straight into the coding process of web design. Since I tend to mess with code when I have the chance, I was not as overwhelmed as many of my colleagues seemed to have been, but I still did learn much about CSS. I’ve always believed that there is no better way to learn code than to jump into it, and that theory seems to have proved itself once again as we used Text Wrangler and Firebug to customize our own web pages. I even went ahead of the instructions and inserted several DIVs and my Web in the Wild logo just to see if I could do it. Unfortunately, we didn’t too far into CSS to be able to mess with positions of DIVs or anything that wasn’t body text. But, we did learn the basic behavior of HTML and CSS and several of its meanings. By the end of the class, everybody had their own website and a set of tools and links provided by Medium to help develop what we have learned. I think that in the near future, just to test myself, I will dive into my blog and try to spice it up a little with what I’ve learned!

Gadzooookz – Wet Yo Biscuit™

Today, we had special speakers George Baraktaurus and Alex Ogle from Tubatomic and M.A. Turner from Tubatomic and Tricycle Inc. speak to us about some of the benefits of web design, a comparison of a web career versus print, a brief history of spreading media through the web, the freedom and flexibility of the career, and also a brief history of Tubatomic.

They began by talking about the advantages and disadvantages of working in house or as a freelancer, noting that freelancers are generally experienced in dealing with sales, motivation, and organization. The speakers, especially Turner, expressed passion in explaining to us about the freedom that web designers are able to have in doing what they love to do. Turner’s example was that he could get up in the morning, pet his cat, and get to work on his computer at home. They expressed that the field of print is interesting in its own way, but they loved web for its interactive and dynamic potential. George talked about their interesting history of Tubatomic, and how it became a web design company from a simple, comic book inspiration. He explained that anybody, anywhere with the experience that we obtain, along with Google, (haha) can achieve big goals.

They moved on to talk about the growth of websites such as the popular web media pages Myspace and Facebook, and explained how things are always getting better on the web and replacing older pages. We even came up with our own social media page, thanks to Turner and Drew: Gadzooookz. Tag line: Wet Yo Biscuit™

DIY Summit Preparation: Lea Alcantara

According to Lea Alcantara’s website, www.lealea.net, she is the Creative Principal / Chief Hired Gun of Lealea Design in Edmonton, Albera, Canada, and creates beautiful designs for many clients from Canada, the United States, and the United Kingdom. She specializes in using and talking about using Expression Engine and the art of Branding. She has been included in websites such as 25 Hot Female Web Designers – Lee Munroe, 50 best female web designers around the world | INDEZINER, and 16 Genuine, Authentic Designers on Twitter. Further down on her site, she mentions that she also loves to cook, keep fit, write, sing, and dance. Lea has also worked as Print & New Media Specialist for VOXCOM Security Systems and as Design Intern for Somnia Communications Inc.

Lea has an extensive knowledge of services, both print and web, including: Expression Engine Design, Expression Engine Implementation, Branding Strategy, Identity Logo Design, Marketing Kits, Graphic Design, Web Standards, and Consulting. She offers professional services with a very happy and easy-going attitude that shows she can get along with your business, big or small. She shows that her work has resulted in clients increasing sales by 250%, increasing overall page views and visitors, and getting rave reviews and comments about the clients’ new designs.

Lea has designed the art direction and print design for Waterloo Festival for Animated Cinema, print packaging for Cara Albo’s movie, Cat’s Cradle, the branding, CMS, design, IA, interface, print, and website (“…which essentially means I did everything. ” -Lea Alcantara) for VOXCOM Security Systems, and many other companies.

Besides her career website, she also maintains another similar website called The Art of Self Branding, where she provides links to her presentations as well as other resources that she has mentioned in her talks or articles. The list of her presentations and resources are here at http://www.artofselfbranding.com/.

I am personally very interested in her thought process behind all of her designs. After visiting many websites designed by her and looking at a few of her logos, I thought to myself, “How does she do it!? I need to steal her secrets!” All thoughts of envy aside, I am aware of my lack of knowledge when it comes to brands, and hope to learn a lot from her show. I saw a slideshow of her talk that talked about making yourself an amnesiac and asking yourself questions such as “Who am I?” and “What am I?” which, as simple as they are, could potentially give us volumes of information we need to be aware of when it comes to designing. Because, after all, I think we need to be aware of ourselves before we can be aware of anybody else, don’t you?

HelloWorld.show();

Where to begin? As soon as I walked into CreateHere, I just got giddy all over. I have been fascinated with the web ever since I could speak English, and there was nothing there that failed to fascinate me. There were a few that really stood out in the room that I could not take my eyes off of.

The first piece that caught my attention was, well, the very large chalkboard that we walk into:

Photo by T.J. Bowman

Teach the Web by Leslie Jensen-Inman shows colored code source of a website very carefully done on a chalkboard. The chalkboard has traditionally been used for education by teachers, due to its ease of use, reuse, and flexibility. If you can write or draw, you can use a chalkboard, it can easily by erased by an eraser or rag to use again, and can be used to explain anything you can draw on it. Leslie takes the traditional chalkboard, and displays source code, mixing the old and the new. You can see the old code, or perhaps drafts of the new code, erased and faded behind the new code, showing that despite it being a new subject, it has been around for some time, and is still constantly changing.

Photo by T.J. Bowman

Sculptor Issac Duncan III and Dan Rubin’s sculpture with projected code and web. Being so short, it was awkward trying to look at this, but that only made me feel sad, wishing I could take a better look at it. It was definitely cool in a way that we were looking at code and its designs on something other than a computer screen.

Just look at this beautiful piece. It is by Weston McWhorter, and shows that even the simplest of shapes and a few colors can create something so deep and beautiful that you wouldn’t believe they were all squares. His other pieces have a similar idea, but take it a different way by repeating the simple shapes all the way across the canvas. This one has a different approach that I appreciated much more, and I admit that some of it is because I am a mellow, “blue person” and enjoy any artwork that has nice blues in it. Since I’m also a fan of abstract art, digital art, and simplicity, this one was a winner.

There were plenty of other intriguing and awesome artworks at the show, such as Matt Turner’s layered CSS concept and C.E.B. Reas’s beautiful Pre-Process Evaluation. I have this great, positive attitude towards web design and seeing great things such as the artworks I have encountered encourage me that this is only the beginning of an awesome road to learning the web.

A cool design I ran into.

http://waterlife.nfb.ca/

I love the design.

New Sites

For Web Media and other purposes, I signed up for Twitter as well as Evernote.
Twitter – http://www.twitter.com/justmashu