Astheria.com is now an archive and is no longer updated, you can find new writings at kylemeyer.com →


08 10 2007

I know few people read these things so I will keep it brief, and if I do begin to bore you please do take the time to drop your thoughts in the comments. Thanks for visiting!

The basic concept for this design is something I tend to express in frustration every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content. The web is all about content and the goals of users is (in the majority of cases) to view that content or submit some form of content. Anything that complicates that process is just… unnecessary. I feel I’ve accomplished my goal of putting the content front and center.

I decided to be a little risky and am using Palatino as the king of the font family, it’s a relatively websafe font in my opinion, along with a few other fonts that are just beginning to see a little more use on the web. Palatino Linotype, the Windows equivalent ships default on Windows XP and Vista, and Mac’s have been shipping Palatino for quite some time. So if you unfortunately fall short here you’ll still get to enjoy the site in Georgia, or if you’re font-challenged, the default serif font of your operating system – shame on you.

The rest of the layout is based on a two column grid, split vertically using the golden ratio, better known as the number phi.

The menu may seem rather empty now, but I’m revamping the portfolio page (you can view the old one here) in the meantime and in the spirit of Getting Real, I’m launching the new blog regardless, personal projects just have a tendency to sit on the back burner forever. So I apologize for any glitches in Internet Explorer, the majority will get fixed shortly. But rather than add hacks to completely get everything perfect for IE6, there will be a few differences as it still fails to understand most CSS pseudo-selectors; so IE users will miss out on a few stylings here or there.

Techonology Used

This site was made on a Mac, using Coda, Photoshop, and plenty of hand sketching and documenting. The blog uses the latest WordPress release as its base. The WordPress installation is extended with plug-ins for Recent Posts, Recent Comments, Similar Posts, and an improved admin interface thanks to the Tiger Admin Panel. I’m currently hosting through Media Temple.

Code highlighting is courtesy of Google’s Code Prettifier, and other miscellaneous scripts are made easier to write thanks to jQuery. The tabs in the footer are powered by Klaus Hartl’s jQuery Tabs script, which saved me a boat load of trouble since it does everything one could ask from a tab script and more.

Twenty-one

Responses

  1. I applaud you for breaking the boundaries of the drab and unoriginal to come up with this clean, simple and intuitive interface that makes my mouth water.

    Awesome job, Astheria. I’ll be sure to visit this blog often. :)

    Keep up the good work!

  2. Nice post. I’ll be sure to come back and read this blog every so often.

    And, I love the simplicity of your design. :)

  3. Love the new, simple design. Though the labels underneath the comments boxes (Name, Mail, Website) are kinda tiny.

  4. Love the new blog, Kyle. Good work on creating something very minimal. Perhaps it’s the fonts more than anything else, but it really reminds me of my friend John’s site, twistedintellect.com

    I look forward to seeing how you incorporate the content from your old site into this new look - I really applaud your following of the ‘Getting Real’ ethos.

  5. How are you alternating the background colour of comments, by the way? It’s another nice touch.

  6. Elliot: Twisted Intellect is a great looking site, and he is using Palatino for his body content, beyond that he is using the highlighting style of emphasizing text that I’ve also implemented. I love the way it looks at 37Signals as well as other sites and feel it’s a great way to truly emphasize certain text.

    As for the background colors, they’re done pretty easily, you can find the code within the basic Kubrick-based template for WordPress. It just assigns a class of ‘alt’ if the comment id number is odd.

    Others: Thanks for the kind words.

  7. Hi Kyle,

    I will say this is not a design at all. This is like a word pad.

    Many web designers design their web site as you have design. But I belive these”word pad ” design is a foolish thing.

    I have a test for you.

    Just show your web site to a little child and ask him, how is this web site or perhaps he or she don’t know the website …just see the expression..

    and than shoe him any average design which is not “word pad” design…

    You will see the change.

    I know that web designer can fill beauty of a blank white background…But remember that you are designing website for general users.

    It is my opinion…May be I am wrong..

    Thanks.

  8. Amit: Thank you for your criticism. However I would like to question your statements. You mention that I should show my design to a child, however, a child is not my target audience. My audience includes other designers, who like myself, will likely have a strong passion for typography or, potential clients or coworkers who (if they know what to look for) will desire someone who can understand a grid and can handle type well.

    The sites that I design for clients would not necessarily be in the same niche or general feel of this site, rather, they are designed for their target audience. An example being Freddie’s Coffee House, the design of Freddie’s site appeals to its target audience in the same manner that I feel this site appeals to its target audience.

    As someone who blogs about web design (judging from the url you used as your homepage) I’m sure you have visited A List Apart, and any designer you speak to on the web will have a very high opinion of the design they have created there. However, little separates this design from A List Apart’s beyond a splash of colors and a few more rules between columns.

    I strongly suggest you have a go at reading an excellent article at iA Japan, Web Design is 95% Typography, and maybe you’ll understand the goals and decisions I had while creating this site.

  9. It’s colophon, not coliphon :P

    Otherwise, nice design :)

  10. fully disagree with Amit. I go with you, kyle. asking a child to test a website design? that is foolish.

  11. Good typographic work here. Congratulations.

  12. You should test your design without javascript. The bottom tabs and items become rather unaligned and ugly.

  13. M: Thanks for catching a typo right in front my eyes.

    devnull: I’ll be taking care of that along with the remaining IE issues. :)

  14. Reminds me of Andy Rutledge’s “Design View” and various other designs I’ve seen, but really, does it matter? No, not really. Looks good, though I’m generally not a fan of just greyscale designs, this one is by far one of the better one’s I’ve seen. Good job. :)

  15. Hi Kyle,

    Thanks for suggestion for iA Japan article. It is really a nice article and has nice comments.

    I know your target audience is not a child, but I mean there “even a child”.

    I don’t think that the people, who have a strong passion for typography, don’t like colors or decorative elements. I don’t know about your potential clients or coworkers ..So I can’t say anything.

    Yes, I regularly visit ” A list Apart”. But there you will find classic Illustration by Kevin Cornell and other decorative elements like flower background of logo and some small other thing.

    And here at , we have none of this.

    But we all have our canvases and we all have our taste.

    I can’t see your design from your eyes and you can’t see from my eyes.

    So, may be I am wrong about design…but I have said what I feel.

    Amit.

  16. Amit: Thanks for clarifying a bit, it is true that we all have our own taste in things. :)

  17. Hi

    Very interesting information! Thanks!

    G’night

  18. Nothing makes me happier than talented people referencing our site for their work. Taste: Yes, trained people have their individual (sometimes blind) taste, yet, overall it is, as a trained intuition, often objectively superior.

  19. This is one of the best website design I’ve seen in months! I really love it!
    All my respects & congratulations. I will read you for sure.

  20. Palatino is hard to read online. The width of the stems is too thin. It may work as a big font but anything less than 20px is blurry.

  21. @jive: I agree, I’m actually working on a new design and layout due to some content restructuring and will also be changing typefaces away from Palatino for the same reason. I love it on the headlines but it is difficult to read elsewhere.