7 Steps To A Successful Visual Design In Website Redesign
We’ve arrived at one of the most exciting (and contentious) phases of the website redesign process – visual design. You see, some web teams are born great, some achieve greatness, and some have greatness thrust upon them. Or, some spend their greatness debating the colour of a navigational menu for six months.
When you only have 15 seconds to make a good impression it’s easy to forget your original redesign goals and spend weeks trudging through colour schemes, whether the logo should go on the left or the right, or sending back proof after proof. And while things like menu colours are important, the visual design phase is just that – a phase. It’s only one factor in the entire website redesign process. Remember: redesign is a marathon, not a sprint. Don’t lose your greatness (or your mind) halfway through the race.
Instead, stick to these seven tips to keep your visual design on track each step of the way.
1. Prioritize Good Design and Good UX
A good website design is both beautiful and user friendly. Get creative, but make sure the design doesn’t disrupt user experience. According to Next Web News, the most common mistakes when it comes to combining good UX and good design are:
- Designing for yourself
- Confusing UX for UI
- Asking users for too much information
If you’re involved in the creative aspect of your new website, it’s easy to envision your new design as something you would love and enjoy. But there is a bigger audience at play – stakeholders, typical users, and the actual web team staff who will be interfacing with the backend of the site every day. The site needs to appeal to your target audience, which happens by being both visually enticing and grounded in user behaviour research and usability. A good site should look great, but also feel great to use. In order to accomplish that, users should be able to complete actions on the site (UX) with the best tools (UI). When you’re sharing your priorities with your design team, be sure to emphasize both.
2. Decide Design Requirements
Research which design requirements are a must (or a must-not) for your website. Often, this happens too little too late, and suddenly, you’re back to the six-month-on-the-navigation-menu debate. Does your site need to feature specific colours? Certain logos? Should each page follow the same format? Have a different navigation menu? Should addresses be included in the footer on every page?
Established early on, design requirements provide solutions to problems before they even come up. Even more importantly, design requirements save valuable time by serving as a guide for your design team. They minimize the back-and-forth on basic design decisions and time spent in the proofing process. Once you’ve established which design elements to include, step back and let the design professionals get to work.
3. Design with Accessibility in Mind
Speaking of design requirements, don’t forget about accessibility! It’s easier (and just plain polite) to design your site to be accessible now instead of spending more money later to make your site accessible post-launch. This goes hand-in-hand with prioritizing good design and good user experience, which should extend to all users. Designing with accessibility in mind, or “designing with empathy” means considering issues like page colour, how screen readers work, and correct labelling.
For example: You’re a higher education institution wishing to display an updated campus map on your homepage as part of your website redesign. You decide to label certain routes on the map with red and green lines to mark the quickest way to navigate through campus, including to the new student orientation. However, with roughly 8% of men worldwide and 0.5% of women currently living with colour blindness, there’s a good chance an incoming student wouldn’t be able to distinguish between the different routes on your map, and wouldn’t be able to tell which route leads to student orientation without further information.
By designing with accessibility in mind from the beginning, you could provide alt text for the map image distinguishing the routes or include text map directions. Now, you’ve provided your user with a positive experience instead of answering a call from a confused student (or frustrated parent) and having to go back in and adjust the homepage image after the fact.
4. Create Page Mock-ups and Prototypes
It can be hard to envision wireframes or site blueprints as a functioning website. While both display layout or information architecture, they typically don’t show overall style, color, or graphics. You may have no idea what the site will actually look like upon completion after staring at a wireframe. Creating page mock-ups in Photoshop or creating HTML prototypes offers a more complete picture of the finished project, and provides a tangible website vision to share with stakeholders. If you’re doing this in-house, PSDFan has several great examples on how to develop your own and convert them to HTML. Otherwise, your design team should provide several prototypes for approval before the actual site development gets started.
Again, it’s better to take the time now to create prototypes than end up with a website that looks very different on screen vs. on paper.
5. Take a True “mobile First” Approach
Embrace a “mobile first” approach by creating and optimizing your design for mobile devices before adapting them for desktop and laptops computers. Is this all starting to sound familiar yet? Spend time on your website redesign now to save time later. And it’s true, because you never know what might come later – from December 2010 to December 2014, smartphone usage rose 394% and tablet usage went up 1,721%. Combined, smartphone usage and table usage account for 60% of digital media time spent. Who would’ve known a little fruit company would’ve changed all of our lives so quickly?
A mobile-friendly site is also vital to your mobile search rankings. After the algorithm change, aka Mobilegeddon, Google now ranks mobile-friendly websites higher in search listings. If you don’t optimize your redesigned site for mobile, you’ll just watch your new website fall to the dredges of second page results.
Not sure if your design is mobile-friendly? Take the Google mobile-friendly test.
6. Don’t Forget Speed
Has anyone ever complained about a page loading too fast? A little can go a long way – one extra second of page’s load time can reduce conversions by 7%. In fact, one study found that almost 50% of users abandon a page after 10 seconds of load time. At this rate, a one-second page delay could potentially cost an e-commerce site making $100,000 per day 2.5 million in lost sales each year. Two-point-five-mill. Six zeros.
Page load time also affects your SEO strategy, as search engines penalize for slow load time on mobile and desktop. Since Google wants to provide the best search results, it doesn’t want to high-rank pages that are impossible to access. Needless to say, design your site with elements that load quickly. A few ways to do this include using web-optimized images, avoiding pages with extended scrolling, and using a content delivery network (CDN) to host your multimedia files.
7. Create Web Standards
Remember the design requirements from step #2? In a similar format, create set web standards that will be implemented during and after the redesign launch. These include colours, fonts, page layouts, logo usage, etc., that your content contributors and web editors will also be expected to enforce and abide by. Consider this a visual editorial style guide. Be sure to start using them sooner rather than later in order to get your team comfortable with noticing the changes and adjusting workflow.
Looking for more website redesign tips? Check out our on-demand webinar that looks at using analytics to drive website redesign.
This post originally featured on the Siteimprove Blog, which can be viewed here.