CSS Zen Garden Goods and Bads

Good 1) http://www.csszengarden.com/143/

Good 2) http://www.csszengarden.com/213/

Bad 1) http://www.csszengarden.com/221/

Bad 2) http://www.csszengarden.com/202/

For the first good design at first it may seem very visually boring and not all that great, but once you take a closer look there are subtle details that really make it a great design. Firstly the overall way the information on the cite is displayed is very easy to follow and read. This is achieved by the overall hierarchy in the design succeeding. Secondly the actual design theme is overall fairly good as a whole theme but it is like I said a bit boring.

For the second good design this is a much more visually interesting and appealing theme. The theme is very cohesive but also the actual layout of information works very well. It’s centered making it easier to read on the web and it also has a nice overlay of images at the bottom which adds a sense of depth to the overall design.

For the first bad design the actual theme and visual style of it isn’t that bad I actually kind of like it. But the display of information doesn’t work very well in a web browser. Everything feels very spread out across the page and as you scroll down it becomes very easy to get lost and a bit confusing to follow.

For the second bad design, again the actual theme and visual style of it isn’t bad and overall it looks pretty great with the subtle moving overlay to make it look like vintage movie film. However when you start to actual scroll through the information the type layout is pretty horrendous. especially because the designer already limited the amount of space they were using in the initial grid of the design.

Advertisements

Resume Typeface Outline

PDF: billyjoresumeoutline

For my first type combination I went with the typeface “Raleway” and “Merriweather”. I first chose “Raleway” because the logo I created actually used this typeface so this was a good starting point. Raleway as a typeface has a very sleek and modern look to it while also being inviting unlike some modern looking typeface that can feel cold and inhuman. Next I felt that I needed a typeface that had some sort of serif in order to ground the whole resume from a type perspective. This is why I chose Merriweather. The Merriweather typeface acts and feels like a “regular/common” typeface used in everyday life, specifically for reading books or lengths of text, this made it perfect for my resume. Overall I feel that these 2 typefaces work well together especially when changing the size for each different section of the actual resume.

My second combination I went with used the typefaces “Bebas Neue” and “Source Code Pro”. I chose these two because I felt they had really strong character especially when working together. Bebas Neue being very bold and big and all caps really draws attention. I hesitate with this because it has such a big character to it but it felt very fitting for myself as a designer. The second typeface Source Code Pro also works really well with it adding as a light airy contrast to the harshness of Bebas Neue. Overall I feel both typefaces have a very digital and contemporary tone to them which is very fitting for me as a designer. Overall I feel the first type combination is stronger but this is a close second.

HTML is like…

HTML is a way that people are able to build websites and bring something to life digitally. The best way to think of it is as if you’re a mad scientist bringing to life a monster! However, rather than various human parts and a dead persons brain, it’s lines of code and a server bringing to life a website rather than a monster. At first HTML can seem like a scary thing but once you understand how it works it really isn’t that bad, in fact it can be quite enjoyable. frizzleThe actual process though is very much by the books, because if there is even the tiniest error, everything could fall apart. When using HTML it’s best to stay very organized and on top of how you display the actual coding. A messy process makes a messy code, and a messy code makes a messy site.