Published 08 Oct 2018
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.
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!
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.
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.
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.
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.
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!
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.
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!
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!