How to improve your web design with well-rounded design research
Designing a website is a long process that rarely begins with design. Planning and research are essential for crafting a site that fulfils and exceeds the requirements of the client and users. Good designs are inspired and validated by understanding current web trends, technologies, and best practices.
Before any design begins, the website should be fully planned and specced. This includes creating sitemaps, wireframes and technical specifications, all of which allow the designers and developers to understand the flow of the website and any problems that might appear through the creation process. They also explain what’s expected from the website, and what is budgeted for.
After the website has been planned, it’s time to begin design research. Here are some insights on how and what to research, and where you can find information that will be valuable for your investigations.
Branding
The majority of clients you’ll build websites for will have some form of current or previous branding. This can range from fully developed brand and visual guidelines for larger established companies, to just a logo for smaller ones.
Brand guidelines
Brand guidelines describe the clients visual output rules, often covering what logos to use and how to use them, brand colours, imagery and tone of voice. Some companies might have brand guidelines stretching across hundreds of pages and several documents, while others keep it simple.
These guidelines help the client build a brand by being consistent across all their visual outputs. For example, if the client’s app looks nothing like their website, users might not associate the two. Deciding on brand rules also allows the client to sign off designs easier as they won’t have to go back and forth about picking suitable fonts, colours etc.
When researching, brand guidelines should be your first port of call. Reading through them will allow you to understand your scope, any restrictions, and where you have space to push the brand to its creative limits.
Previous artwork
If the client is a lot smaller, there probably won’t be any established guidelines. In this case, they might have a logo, branding elements or artwork previously created which they want to continue using, so find ways to incorporate these into your design.
From this artwork, you can take colours, fonts etc. and use them on the new website. Often, we might want to change these slightly for visual or logistical reasons (such as fonts being unavailable or expensive for web use) which you’ll need to ensure the client is fine with.
Previous website
The client will likely already have a website or digital presence that can help with your research process. Explore the website and any additional visual materials fully to see what’s been done before and what you could improve. Ask what works well, and should be kept or translated into a new design, and what doesn’t, and should be improved or scrapped.
If you’re only refreshing part of the current website, there will be more restrictions on what you can do. Elements of the current site should remain familiar so users don’t have to relearn how to use it, and will continue to recognise the new area as part of the website and brand.
When a complete redesign is needed, you are free from the restraints of the old website to fully flex your creative muscles. Branding elements such as fonts and colours might have to remain the same, but layout, interactions and styling can all be altered and improved. It’s valuable to understand what wasn’t working in the old design and ensure these issues are covered.
Inspiration
Once you have an idea of brand guidelines and the client’s previous website, you can start your creative research and seek out inspiration. You may have an idea in your head already of what you want the site to look like, but it remains valuable to improve and validate your idea by looking at what other designers have created.
Design sites such as Dribbble, Awwwards, and Medium are useful when searching for web design inspiration. As well as looking at full websites, search for various elements such as CTAs, navigation, blog posts, and even smaller things such as pagination and buttons. Incorporate all the great inspiration you find and your website will be full of great ideas, or save them for a future project with an extension like Dropmark.
Interactivity
There’s more to the design of a website than what you see. How you interact with the website is a substantial part of the user experience and primarily the responsibility of the designer. Don’t leave buttons as a flat green box on a page; decide what will happen when a user hovers over it, or clicks it. What do links look like? Or active states on a navigation? Can you animate elements such as SVG icons? Create a html stylesheet that covers all of the design’s styling and interactions which you can give to the developer. Alternatively, showing these states and making a note of them on the design can be just as helpful.
Interactivity is where you can turn a design into something exciting and engaging for the user. There’s a lot of creative scope but many logistical barriers such as budget and skill sets. If you have more complex interactions in your design, such as maps, elaborate navigation, or non-standard forms, it’s a good idea to research these to confirm they are possible. Other examples you find around the internet can be valuable for the developers so make sure to save them. Chat to your developer if you’re unsure about including anything.
While research prior to designing is key, it shouldn’t stop there. Keep looking back at what you find, and don’t be afraid to pause your design to seek out more inspiration. Take time to complete well-rounded research and understand best practices, and your final product will be of higher quality.
