bfkouba — 2011-06-01T08:58:41-04:00 — #1
Like many of you, I am an independent web designer. I have a goal of eventually being free from trading time for money. I also have a great love of good coffee From those two things, this project was born:
Make Espresso Drinks at Home - Free Video Training
I did everything from self-filming the videos (yes, that's me in the vids) to designing and developing the website on WordPress as a CMS.
I would love your review of the project. I'm also trying to build traffic to the site, so in addition to the design and UX, if you want to make seo/sem suggestions I'm all ears.
bfkouba — 2011-06-02T19:00:33-04:00 — #2
Specifically I'd like to know what your initial response is when you look at the site. Does it feel welcoming... does it appear to provide good value... are you motivated to explore the site further? Does it feel "salesy" with the couple ads, or do they blend well and also provide some value?
Thanks to anyone who wants to review this for me!
patricksamphire — 2011-06-03T07:32:08-04:00 — #3
I quite like this design. It does feel welcoming and friendly. My only comment is that the contrasts seem too high. The blacks are too black, the whites too white, if you see what I mean. That makes it harsh on my eyes. Particularly where you've got a black background, consider using a rich brown instead. Otherwise good work.
bfkouba — 2011-06-03T11:37:55-04:00 — #4
Thanks Patrick. Good thought - I agree with you on that. If you have any other comments like that, I'd appreciate it.
richkorea — 2011-06-03T20:18:28-04:00 — #5
It’s a nice looking site. The brown colors look good on my display.
I agree with PatrickSamphire with his blacks and whites comments. I had read on one design site to avoid pure black and pure white, as they don’t appear in nature, so I always tweak the hue, value, or saturation a little bit.
My first impression in looking at the site is that the name of the site is “introduction” since my eyes are first pulled to the video intro. You might want to consider increasing the size of the logo (yes, doing that would cause problems with the navigation and fitting within the 960px width, but maybe you could make the buyer’s guide menu item into two lines, which would save some horizontal space).
Dropdown menu – The black of the menu dropdowns do not provide any contrast to the video introduction, so they blend together. Some contrast would be nice. On the basics menu, the numbering started at 2, implying that Primer is 1. I realize the Primer isn’t really a step, but I think consistent numbering would look better.
buyers-guide menu selection – Clicking on the top menu level for basics and drinks brings the user to a nice intro page for that subject, but clicking on the top menu level for buyer’s guide brings the user to a kind of plain page with a big white box that says to pick one of the dropdown selections. I think you need an overview page for the buyer’s guide, similar to what you’ve done for basics and drinks.
Video Box – the black intro image is pretty strong. Maybe a rich brown background would be better. Also, what about swapping the video box and the white tag-line box so the video’s on the right (so it doesn’t compete with the logo as much for attention) and the tag line (Learn to make coffee…) could stand out more?
Is this page helpful box – I suggest putting the Tweet, Facebook, and email stuff above the menu (especially if you increase the size of the logo and the menu bar), and moving the question about whether the page was helpful or not to the footer. People who are into Tweeting and sharing stuff they like via Facebook won’t need the question to get them to do it, and for the rest of us, the question placed so prominently on the page is annoying. The right half of the page helpful box seems to be tweet of a recipe-of-the-day kind of thing. Maybe it should have it’s own box with a title and be a little wider (the message loses the tweet feel in the narrow box).
The six boxes introducing the Espresso Basics should be sized to fit on one line. Having Frothing Milk on its own line looks strange.
About This Project section – The abrupt switch to a smaller font size is uncomfortable. What about isolating the “I’m a regular guy” portion with a border and/or different background color?
Disclaimer – Maybe make this another full width section (with maybe the dark brown background) to separate it from the About This Project section and to make it stand out a little more without being too distracting. I’m thinking having a disclaimer but not having it stand out enough is worst than no disclaimer. Also, having a disclaimer puts you in a legal situation. I’m not sure how it works in Delaware, but in some places, knowing that what you are promoting has some risks, but not providing sufficient warning of those risks could leave you financially liable. I’m not a lawyer, which is why anything I’ve done involving risks, IP, etc. I would run past a lawyer.
Leaf9 – anywhere there’s a Leaf9, it should probably link to your business site (I’m assuming the purpose of the coffee site, besides for fun and as a demo for customers you’ve identified, is to try and guide potentially new customers to your business site).
Coffee Cup Logos – you seem to have three slightly different coffee cup graphics (Espresso logo, the logo at the end of the video, and the leaf9 logo). What about having all them with the same shape, handle direction, and thickness, and just change the color for the different sites?
Copyright – I suggest putting the All Rights Reserved on the same line as the copyright and dropping the “Copying is stealing.” Yes, copying is stealing, but those who are going to steal your ideas, graphics, or text will do so despite the reminder, and for the rest of us, having the word “stealing” on the page is a little insulting (at least I felt an ever so slight pang of insult when I read it).
Search Engine Optimization – your site came up #2 in Google when I searched for the words “do it yourself espresso,” but if I searched for "make espresso at home," your page didn’t come up (at least in the first four pages). You might want to expand the description and keywords to make the page rank higher for the different ways people might search for a site like yours.
Page loading – There are a lot of separate images (e.g. the social media logos and the basic steps) that could be combined into a single image and then selected using background positioning. This would reduce the number of HTML requests. The page is loading 20 script files. It would be nice if you could get rid of many of the separate HTML requests.
Coding – Assuming that you’re using the coffee site as a demo/reference site for your web design business, I would recommend reworking the code to give it a more hand-coded feel. For example, the menu IDs is use numbers (e.g. menu-item-525) instead of something more human readable like basics_grinding-beans. Same goes for the class names.
Shadows – The home page only has one shadow (above Espresso Basics) and it’s going up, as if the light was coming from the keyboard. My preference is to think of the light source coming from either over the shoulder of the user, or from directly over their head, and then set up the shadows based on that angle. Also, shadowing should be consistent throughout the page (shadow anytime there’s a change in the imaginary 3D depth).
Good luck with the site and the business.
bfkouba — 2011-06-03T21:16:40-04:00 — #6
Rich, that was the best review ever! Thank you for the time you put into that. I really appreciate it, and you will see many of your suggestions fleshed out in the site soon based on your feedback. I can't do much about the menu-item-# as that is coming from WordPress, but other than that I think you're spot on and brought up several items that I hadn't considered.
zeanuws — 2011-06-04T16:53:34-04:00 — #7
Love the site, Besides the flat black and white that have already been discussed, the colors work very well together in providing a warm and welcoming design.
however the colors used for the 'most popular' feature really clash with the overall design.
Although these are just minor adjustments I think they would really help in harmonising the design.
the layout and content is excellent.
jamesg1234 — 2011-06-05T09:39:35-04:00 — #8
I liked the site and thought it was designed really well.
I agree that the 'most popular' feature colours clash with the overall design and am personally not keen on the bars on that feature sticking out in that way.
On my browser (Safari) one tiny thing I noticed was that on the "Subscribe" button on the 'c' there is a small black line?
Also on the header, the page that you are on is highlighted in a darker brown. (So if you are looking at the home page the word 'home' is highlighted.) On the Basics and Drinks pages though the same thing does not happen. It works fine on the other pages though Buyers' Guide, Gallery, About and Contact.
All in all I really liked it though.
maartenvr — 2011-06-05T20:03:36-04:00 — #9
I would do something about the drop-down colors. They don't really stand out when they show. It more blends in with the page.
Also, Depending on the screen resolution of the user, it is hard to notice that there is more content below the dark area with the squares showing lessons. I would suggest that you take these items and the content below, and place them vertically besides each other.
system — 2012-11-07T03:48:31-05:00 — #10
Really a great website and minor information for self improving but if you dislike drinking item like coffee juices etc than try to behave yourself, hahahah :-).
If you enjoy a frequent caffeinated drinks hit, then getting a coffee maker of your own is a smart idea. Coffee and espresso makers are ideal for making larger quantities. Water slowly drains through a paper or filter. As water moves through, it takes up the variants and fragrances.