This week, I started Designlab's Design 101 Course. It's taught online over four weeks, with 1-1 mentoring. My mentor is Andrew Wilshere, a designer who works for Designlab and also does freelancing.

I signed up for the course because I wanted to improve at graphic design. I think of myself as a fairly creative person, and I work well with my hands, but my ideas don't always translate well from paper to screen. Over the years I've built up a fair amount of experience in UX and design which has been mostly self-taught. So, I wanted to do some formal study to polish up my skills a bit more.

The brief

Our first assignment for the course was to create a page layout advertising an imaginary energy drink. The goal was to assess our skill level, so we were asked not to spend too much time on it. Of course, being me, I became obsessed with the idea and spent way too much time this week thinking about it. It's just too fun...!

For this assignment we were asked to:

  • Design a landing page, advertising the new drink
  • Give information about the drink (process, ingredients, features)
  • Include a call to action for the user to sign up to a mailing list for more updates

We were also given several alternate names for the drink, including SuperGood, Eyes Bright, and Brightly.

Version 1

Design sketches version 1

I started out sketching some ideas for a hero image featuring the bottle. I focused on two ideas:

  • An eye, using the bottle as the pupil
  • A plant, using the bottle as a stem or bud

The content provided for the page focused on the health benefits of the drink, so the idea of a plant emphasized this concept to me. The eye is a very different idea. I liked the eye as it was unusual and visually appealing. I thought it could make quite a striking image.

I decided to go with the eye, mostly because I loved its weirdness. Probably not something I would do with a real product, but hey - this is just for me. I laid out a design for the page using some assets provided by Designlab in Sketch. (Incidentally, as a student you get 50% off the purchase price for Sketch - very nice.) Here's what I came up with:

Landing page version 1

You can see it is fairly close to what I sketched out above. The design features a very bare-bones hero at the top with my eye logo, showing the product bottle. Below, I've divided the content into horizontal sections. I used a root-like structure coming down from the bottle to link the section headers. I wanted the metaphor of the root to show that these are all of the things that go into making up the product.

We were asked not to spend too long on the assignment, so while I could have polished this up further, I feel reasonably happy with it. (I've misspelled "mailing" on the button, but I can live with a typo in a mockup.) The challenges I faced were selecting the colours and type. I found it quite difficult to choose colours that were both visually appealing and seemed to fit with the other colours already on the page. In the end I went with a kind of corn colour and avocado (you can't go wrong with avocado, right?). That fit the feeling of the brand well, but it lacked pizzazz.

I chose Futura as the typeface because it feels both classic and modern at the same time. (It has such a friendly Art Deco vibe, don't you think?) I wanted something that fit with the more old-school feeling of the brand, but felt a bit more forward-thinking. I think Futura bridges that gap nicely.

The feedback from my mentor also gave me some more ideas for improvements:

  • The main call to action (signing up for the mailing list) is too far down to grab the user's attention.
  • More colour could be added in the hero, which would help bring the colour scheme further up the page.

At that point, I could have stopped there. I'd completed the assignment. Sadly for me, by this time the idea had took hold of me and I really wanted to keep improving it. So, I created version 2.

Version 2

Again, I started out by sketching some ideas in my notebook. My mentor suggested I try using dotted or graph paper (pro tip!), which I have to say improved things considerably.

Design sketches version 2

With this version, I've continued to play around with different ideas for the logo:

  • A couple of ideas based on a lightbulb and filament
  • Plant shape using the wheat sheaf from the Brite logo
  • Design highlighting the main ingredients of the drink (coffee and protein)
  • Improvements to the eye shape

The main idea that I had for improving the layout was to move the visual imagery (logo and "roots") over to the left side of the page. This would give more space in the hero to include text and the call to action.

Landing page version 2

I think this version is an improvement over my first design. The layout is more space-efficient, and the colours feel brighter and more interesting to me. I also like that the call to action is more obvious to the user.

Since I did this quite quickly, there are still some things I would change about this. The header feels a bit cluttered, and I still feel like I could improve the layout of the text at the bottom. The left side of the page feels a little empty now in comparison to the right.


Overall, I'm feeling pretty happy with my design. If this was a real product, I think I would have gone for the design using the Brite wheat sheaf shape. That was probably the best fit for the brand, and it ties the page together well. But, I decided to stick with the eyeball design instead - for absolutely no reason except I love it.

I leave you with this final version of the layout I made after my mentor taught me how to use the vector and shape tools properly. I wanted to go all out with a Clockwork Orange meets Art Deco vibe.

Landing page version 3


© 2019 by Marissa Warner-Wu. All rights reserved.

Proudly published with Ghost