Ahhh yes, to feel the crushing pressure of a pressing deadline. I lost how track of how many things didn’t work when I completely underestimated how much time this stuff actually takes. …the joys of css….when it works, you love the world…when it doesn’t…there’s another story.
The biggest struggle I had was integrating horizontal
Problem #2: Faux columns. Works great…in specific situations. I had to majorly tweak my vertical column to get the same effect. Is it right? Probably not, but it’s working so far.
Problem #3: Bg color worked only sporadically. I had to circumvent and use an image gif instead.
I think overall it was a really good exercise. I learned that there is a certain art when it comes to using CSS. I really need to be at this for more time to really get the beauty of CSS to really sink in.
My project is a national coffee chain I named El Gato Coffee. I chose four different competitors that are national chains for my competitive analysis: Starbuck’s, Peet’s, Coffee Bean and Tea Leaf and Intelligentsia.
Being that Starbuck’s is the world-wide, its scope of product offerings and focus is different than its competitors. The interesting thing I found is that the majority of real estate of the home page is devoted to a promotional video featuring a featured coffee blend. I’m not sure how useful this is. The global nav drop down is rather extensive. One drop down link had 6 sub categories with 22 tertiary pages. I think the intent was to keep their global nav as minimal as possible (6 links).
Most secondary pages had a prominent video link on the landing page that occupied most of the space above the fold. There is no left or right or left hand navigation. You have to scroll down the page to reach tertiary page links. The corporate brand prominently displays their committment to sustainability.
Peet’s Coffee is a simple site with 6 links for the global nav. The prominent features on the home page include the logo placed in the center of the page. Below the global nav is a static image promoting a feature of the corporate branding, “The Fresh Truth”. Clearly Peet’s in gearing its message of freshness and quality. Considering Peet’s doesn’t have the market share that Starbuck’s does, it seems to promote itself as a more homespun corporation. There’s a link on the global nav called “Who is Peet” which I am going to handily “borrow” as a concept for El Gato. There is also another global link to “The Perfect Cup” which goes into detail how to make a perfect cup of coffee. The nav on secondary pages doesn’t have a left or right side nav bar. All content is in the center for the user to scroll down. There is not a link to Twitter or Facebook.
Coffee Bean and Tea Leaf is less extensive than Starbuck’s but has a stacked global nav. The navigation continues on secondary pages on the left, but when you drill down into tertiary pages and beyond. The left hand nav disappears and the information and links are in the center column where the user would need to scroll down to see more content. Clearly, it seems it’s a theme with national coffee sites.
It seems a common element for the sites is to have a feature to charge your card for further purchases. Another feature of course, is the “follow us on Twitter and Facebook” prominently displayed.
Intelligentsia also has a center logo like Peet’s. I haven’t really seen center logos that often yet it seems to work. Whereas Starbuck’s message focuses on sustainability and Peet’s on Freshness and Quality, Intelligentsia seems to focus on innovation and being cutting edge. The home page has a large rotating image section just below the global nav. The images feature best design for a product line of theirs and the other image is a snapshot from a barrista competition where Intelligentsia had won a prize. Again, when one goes to the secondary pages, there is no right or left hand nav. One notable thing is that the logo switches from the center to the left when you drill down into secondary and beyond pages. There is a left hand nav when one drills down beyond secondary pages. The nav begins below a center spanning image below the global nav.
Overall, based on my analysis, I will borrow a lot of the concepts from these sites. My nav will simple with dropdowns and I will see whether I can do a design with out a left or right hand nav on my secondary pages.
Hmmm. After analyzing my chosen site and the excessive number of div tags in the design. I probably should have chosen a more simple design. The site is a two column site with header and footer with embedded “panels” in the body.
Argh. I’m not going to be able to finish before class.
I did comb through a fair amount of posts from blogs that were very complicated or gave a very over simplified description of a how to. The one I feel is makes it simple and easy to understand is
http://mirificampress.com/show.php?id=106. Oddly, it’s a Christian-based web blog…who knew?
My findings were that they varied in their approach to design elements such as navigation, features and user experience. The common thread to all the sites, given that they were visual establishments, was an animation featuring current exhibitions/events.
Overall I have to site MOMA’s as the most user unfriendly site. I couldn’t find information after leaving the site and then returning. Sites varied on how information on the homepage was displayed. Some used the “fold” to determine their design and while one, The Walker Art Museum used the home page to post all their primary links. Their site actually seemed to be the easiest to use.
I would say Houston’s site would benefit the most of a redesign. From the home page, one is launched into an entire site by clicking on a featured link (collection, exhibit, school). It was confusing also since I couldn’t navigate back to the home page after jumping off.
My design focused on meeting the needs of the stakeholders while also incorporating features from the selected user personas. I tried to address Heather’s request to make the site interesting and “design-y.” I used Theresa’s request by making a specific banner to highlight kids’ events at the museum. I incorporated George’s request by trying to group all the relevant information in an easy to find layout. And alas, most importantly I created a easy to find link for members to join.
The sites I’m reviewing for a competitive analysis are the Contemporary Arts Museum Houston, Walker Art Center, Milwaukee Art Museum, The Museum of Fine Arts Houston and Los Angeles County Museum.
The common elements all include design that is driven by the current exhibit at the museum and all presented in a rotating images. Navigation varies whether it’s a fluid frame like Moma or a left column navagation such as Milwaukee’s.
My observation is that depending on the stakeholders of the sites and their prescribed tasks, the sites do vary in how the information is presented.
So I’m back in the web design world. Did you miss me?
I’ve noticed things have changed, but I can usually figure things out.
New developments: CSS good. Tables bad.