-
- Letting The Page ‘Breath’.
-
I’m continuing my way through Robert Bringhurst’s book and at a slow pace. The Elements of Typographic Style is so rich with information that I can only read it in spurts of a few pages and often have to re-read to let the full lesson sink in. Lately, I’ve become very intrigued by how he describes rhythm in the text layout and the concept of how a page must ‘breath’.
-
- It’s CSS Naked Day!
-
Today’s the big day! I’ve turned off my style sheets in honor of CSS naked day! Aside from the sIFR, which I’m not going to disable for this, you are seeing the pure semantic HTML markup of this site. This ties into a series of posts I started earlier this week on semantic HTML. More to come soon
-
- Typography Basics.
-
Robert Bringhurst’s book “The Elements of Typographic Style” is an invaluable resource to any print or web designer currently practicing. I purchased this book a while back, and now sitting in the airport after SxSWi, I’ve finally gotten a chance to examine it in detail. Here are some important teachings I’ve gotten so far.
-
- Poplisher: The Beta Issue
-
My good friend Mike Sullivan has just provided an invite to his new online publishing community Poplisher. Mike is a veteran in the publishing industry and is seeking to create a unique platform that merges online media with print media in interesting ways.
-
- The “Best” Kind of Design Exposure!
-
Yesterday I was greeted by fantastic news! Nick La has selected this site to be featured in the Best Web Gallery! Oh and did I mention that my traffic has shot through the roof!
-
- CSS Commenting With Textmate
-
Last month Jina Bolton wrote an excellent article about Sexy Stylesheets on Think Vitamin. I was particularly impressed with some of the ideas for commenting more efficiently. The problem was, even after knowing the techniques, I was too lazy to comment consistently. That’s where TextMate came in handy.
-
- A Refreshed Design for 2008
-
Happy new year! To kick off the start of 2008 I’ve labored over a new design for DontTrustThisGuy.com. Writing a custom WordPress template, the new version of this site has microformats strategically mixed-in for your convenience. Additionally, the site now uses some advanced CSS3 styling to reward readers who are using more modern browsers, and to encourage those of you who are not, to upgrade.
-
- A New Face For Sitewire.
-
I’m proud today to announce that we have finally finished putting enough spit and polish onto the new Sitewire web page that it’s ready for public attention. I handled all of the design, flash work, and html/css development while balancing other projects brought to me within Sitewire. The experience has been hectic at times but overall unique. For example, during the design phase of the project I wasn’t allowed to work in the office so I worked remotely from nearby coffee shops around town. Even more interesting - we rented truckloads of photography and lighting equipment and converted our office kitchen into a makeshift photo studio to do a staff-wide photo shoot as we didn’t have the time or the budget to accomplish at a professional studio.
A lot of things happened simultaneously during this project. Design concepts and brainstorming were being developed the same time as messaging and copy. This made both phases of the project a little less efficient from a time perspective but much more collaborative as both design inspired new copy and new copy inspired new ideas for design. Though things felt a bit hectic at times, I’m fairly pleased with the final result. The site is a bit heavy, but overall it’s pretty solid. So with that being said I present to you the new Sitewire.com. Take a look and share your thoughts whenever you get a chance.
-
- Design Study: A Different Approach to E-Commerce
-
Recently, I worked on a design to revamp the online retailer Group Mobile. I’ve never actually designed an e-commerce site before and overall I have discovered that I find the majority of e-commerce web sites to be lacking in innovation when it comes to design. It’s all the same thing again and again. Typical uninspired page designs utilizing big menus for every single product category offered by the retailer each with hidden dropdown menus containing a list of equally long options. I just don’t see it as an effective solution for browsing. Think about it when you goto these large e-tailer websites do you typically browse through them or do you just find a link directly to the product via a search on a site like pricegrabber.com?
The fact of the matter is that these sites may be accessible from the perspective that there are no broken links. This means every page is connected in someway so a bot could successfully browse through and index every product on the site. And hopefully all of the product information on the website is up to date. But at the end of the day it seems that the act of browsing through these large e-commerce sites was never a major consideration in the design. If you’re going to search you’d better know what you want and type in a direct product search. Wandering through an e-commerce site like these is often a difficult, boring, and almost meaningless experience.
A Shopping Consideration
When I started brainstorming a design for Group Mobile I thought about what you might do when you shop for a computer in a store. There are normally two possible situations that typically occur:
- You know what you want and are just trying to find it.
- You have a vague idea of what you are looking for and are hoping to find items that might catch you’re eye.
Half and Half Design
So with that being said I wanted the site to be easy to navigate manually but also have search accessibility. My approach for the design was to cater to both. One half of the page contains a search bar at the top of the page as well as the bottom. This side also provides customers with content such as the product information for the current product you are browsing etc. etc. Basically the right hand side of the page is the meat, it’s what you found, it’s what you are looking for.
The left hand side of the page however is a bit different than most. I’ve dedicated nearly an entire half of the page to browsing the store. If you click one one of the major product categories you get taken to a list page. But not only does the menu button of the category you’re browsing get highlighted as the present category; you also get a micro list of all of the products for that category which would have the current product you’re browsing highlighted as well. The idea here is that now when you shop you see every similar competitive product offering to the product you are considering along with it’s price and photo.
The goal is to expose users to all product offerings rather than hiding them behind a meaningless list of names which may even be hidden behind a drop down menu. Now without any extra clicks or steps I can see the alternative products and how much they all cost in a fraction of the page. Of course there are some disadvantages to this approach. If you have an abundance of products this micro-list would be overwhelming and take up the entire side bar. Likewise, if you have an abundance of categories it could get cumbersome to have a vertical menu that is so long. So these are considerations you would have to make when designing your navigation for an e-commerce site. For Group Mobile I feel this style works because there will only be 6 major product categories (right now I only have three in the mockup) and not more than 10 products to a given category at most.
Dual Navigation
While you saw the actual shopping navigation was located on the left hand side of the page in a vertical menu. There is also a separate nav on the top right hand side of the page dedicated to additional information related to Group Mobile the company as well as additional product information such as industry news, product FAQs, and general tools to help you become a better shopper. These services offered by the site are some of which help it differentiate itself from basic e-commerce sites which simply show you the product but don’t explain much about what to look for in the products themselves. These value added services should not be hidden from the customer so we provide as clear, distinct, secondary navigation to expose customers to them as well.
Exposing Information
Ultimately, the thought process behind this layout was to expose the user to as much as possible while not getting too cluttered. I’m not sure if I completely achieved this goal so I’m interested in hearing what your thoughts are. Do you think it’s overwhelming? Do you think it’s clear? Would you be thrown off by the fact that there are two separate navigation elements on every page? Let me know what you think I’m interested in getting as much feedback on this design as possible.
-
- Welcome to 2006.
-
John Oxton welcomes us into 2006 with a nice picture of what we’ll continue to see a lot more of in the new year. Shiny floors. I’m guilty of this as well but I’m not quite as bad. I make no mention of any beta in my ziptrac logo.
Either way I’m looking forward to more. Should be fun for a while I haven’t gotten sick of it all quite yet.