This brief called for a style guide, landing page, brand directory page, single product page, and comparing products page.
[Unedited] Notes on the Process
This section contains my [mostly] unedited thoughts, as I write them down during the process. From this brief on, I’ve decided to try writing down my process in a more detailed, thorough way, instead of merely showcasing the final product.
Since brown is the color of coffee, I decide to choose a brown color palette for this brief — using Coolors, of course. It would be fun to try using a not-usually-associated-with-coffee palette instead (such as red-and-green or purple-and-blue), but that’s a challenge I’ll save for later. For now, I think brown is best if I want the colors to work with the product, rather than draw attention away from it.
I browse on Coolors for a bit, opening up promising-looking palettes in the generator. I think I’ll try combining this one and that one. It might seem strange to you, but for designs “from scratch” (no brand colors, etc.), I often don’t know if a palette will work until I start putting together a design.
Next, I decide to choose some public domain photos of coffee to work with.
I dive into the landing page design right away. The second coffee beans photo (the one with the glass) looks like a good choice to use for a background, so I start with that. I think a black navbar would look nice with it. At this point, I’m feeling a fancier-looking script font would work with the header, so I add that as well.
It’s nice, but not great. I’m going to try using a sidebar rather than a top bar.
Something doesn’t look right — maybe it’s the font. Yellowtail, the one I’m currently using, seems a bit too playful, and I want something sophisticated. I’ll try Staatliches.
Better.
Now, I’m thinking that the photo I inserted as a background could actually play the role of product. What about an overlay box on the bottom right corner of the photo? On impulse, I throw a second photo onto the page as well.
(I made up “Jovanna Coffee”, by the way. I don’t think it’s an actual coffee type.)
Hmmm, this seems more like a single product page now. I’ll leave it as is, and move on to working on the comparing products page. To me, the first page is always the hardest. Now that that’s out of the way, the rest of the pages should be easier (emphasis on “should”).
I base the comparing products page on the single product page. I’ve gotten rid of the larger coffee beans photo, and decided to use a black body background. I’ll figure out what to do with the sidebar later.
Comparison cards seem like a good idea, so I’ll start with those. The brief specified that a product page should include “the brand name, the product name, the location of where the bean was grown, and a short description of tasting notes,” so those will be the comparison factors.
While making the comparison cards, I adjust the overlay card and choose new photos as well.
After some time, I end up with the design below. It’s far from perfect, but it’s a good start:
It will need quite a bit of work, but I’ll save that for later.
In case you were wondering, I updated an element on the single product page as well:
Which reminds me, I should probably add a country icon to the comparing products page. And a “Buy” or “Shop” button.
It’s been almost two hours, and I think I’ve reached my limit for this session. I’ll continue the brief later.