DIGITAL

10 things I learnt designing the Showcase website

Author

1. Designing for mobile isn't easy!

It’s not just a case of scaling the design back or stripping out bits that don’t fit. Take time to consider how a user will interact with the site on mobile and explore a few possibilities. Get other people’s opinions on this behaviour too, what would they expect to see when they tapped ‘x’. Consider designing for mobile first or at least side by side, so you can adjust solutions based on different devices.

2. Animation can help communication massively.

To aid the static designs, support them with interactions. The animations help communicate in a way that might be challenging to explain over Slack or email. I used Keynote to communicate a lot of the animations for our site, but I’m now really keen to learn After Effects to take my animations to the next level!

3. Webfonts are a thing and they are super important!

Supply the webfonts with your initial handover to the devs. A webfont may look the same on the screen but its been reformatted and optimized for use on web pages. It might be an obvious one, but I found these massively impact how the site will render and you won’t be able to launch your site without them. When working on a multi-language site it’s highlighted even more, because you need to make sure you are delivering a site that is visually consistent.

4. Spend time on snags.

Snags aren’t a bad thing. Use them positively and they can help you refine and iterate the designs. Some snags are larger than others and you may need support from different disciplines and that’s okay too. For the snags you can support, provide visuals and as much direction you can, this can be a time saver in the long run! I used InVision and the comment functionality to communicate the snags with the external developers.

Before : Highlight's title in Italian. Text is too large, displayed over three lines in one colour.
After : Small tweak to copy added to the translation's string document, so the title is displayed over two lines in two colours.

5. Spend more time on preparing your assets.

Once the design is complete, you need to allocate time to outputting and finalising all your assets. These could be images, videos or the copy. Getting these prepared in the correct format and organised correctly really helps support the communication between design and development. We used google drive to upload all our assets along with google docs to record our notes / progress.

6. Nothing beats the feeling of seeing the design in staging for the first time.

From all the hours spent in Sketch and working through snags, it’s all worth it when you get to see your design in staging. The staging server is a platform used to test the site before it goes live. I got a fresh sense of determination to continue working and complete the site to the best standard I possibly could.

7. Don’t panic… If it’s broken, you can fix it!

Along the way our site went through multiple releases, some more smoothly than others. As a designer don’t be afraid to flag things you aren’t happy with, you are responsible for the visual, and often the devs can fix the issue really easily! If not they’ll work alongside you to create a solution that functions and renders in a way that you are happy with!

8. Try and break it!

Use the content that you have to create your own edge cases. An edge case is a situation that rarely occurs but can occur. For example, how will this block display in German? Don’t just wait for your QA (Quality Assurance) to find a bug in your site, try and design to include them. In this example you could set a solid foundation of font sizes that can handle minimum and maximum text lengths, so that the site can be responsive not matter what language it is displayed in.

9. Propose unpolished solutions

A carousel is often a tricky module to design. I’ve never laid my eyes on the perfect one, but I’ve learnt to give it a good go! Explore multiple options via wireframes or chats with other developers to discover a UI that functions as well as it looks pretty, no matter which device it is viewed on!

10. Feedback is a gift

Seek feedback, whether it’s from other designers, the developers, or the users that engage the website. You can use these pointers to grow and develop as a digital designer... priceless!

Check out the full website at showcase.lush.com

You need to be signed in to be able to create a comment.