I’m on a 7 day design course with a focus on creating landing pages, and these are my thoughts on day 3!
*The days may be not consecutive since it’s self paced*
Day 3
Day 3 of 7! Now we’re talking.
Today the instructors introduced us to the basics of composition and the tools in Figma related to it (grids, alignment tools, etc). We were also introduced to other sections on the landing page and how it should tell a good story. The assignment was to take one of our submissions from day 2 and to fix the composition, as well as to add some sections to create a complete long scroll landing page.
First off, I made a big mistake. I thought we were trying to fix the composition of the design that we had already come up with, and so all I did was to move the text/images around, and fixed some of the alignment using grids. I tried for about an hour or two, but I was stuck. I couldn’t figure out if any of them were any better, and I didn’t know what I was doing wrong!
As you can see, it was bad, dismal, looked like I didn’t even try! At this stage I uploaded it to the slack (where we submitted the assignments) anyway, with a “Help me” message basically saying how stuck I was. Thankfully I got a feedback video (I think I may have been the first to get a feedback video) with great constructive feedback.
The “Aha” moment for me was that I was hanging on to my design instead of re-imagining it. The instructor also gave me some fancy feedback ideas to try, but since I was nowhere close to that in skill level, I tried other variations within my ability.
Here’s me going nuts.
I pumped out 7 other variations in about the same amount of time. It’s not the most polished, but it was good to try a bunch.
If you ever get stuck on a design, try taking a step back and generating a bunch of new, low fidelity, ideas to see where it takes you!
In the end, I chose version on the bottom right to take my landing page further. I liked it because the colours were inspired by both the cans and the Italian flag.
My process looked like this. Since I had some sense of the sections based on the header links, I first created an ideas section collecting possible layouts for each section. The course came with good material on section layouts so I just picked from there to begin with.
Then I started to fill out each section. Here’s the final result.
Credit to San Pellegrino and stockists for the product shots.
Do I love it? I’m not sure. The elements feel repetitive and it’s picture heavy. That’s likely related to the fact that I chose a drink as my product this time round. I shall try it again with something I’m a bit more familiar with, like a digital product.
Thoughts & Reflections
- Without themes and prescribed font families (like brand assets), I should have spent more time deciding on the fonts. This did not come naturally to me, and is a skill I need to spend more time on. I found it easy to feel if the fonts worked or not, but it was hard to find one that did. More often I didn’t like what I saw. (Day 4 is on typography so I shall look forward to it)
- Getting quality feedback makes a huge difference.
- Alt-click to copy and paste is my favourite shortcut so far.
- As a student, having a look at the actual product page can help but also hinder. It’s better to just give it a go before referencing the material. Unless your intent is to deconstruct and rebuild it!
