The most exciting part of any web design project is always when it is time to finally style and design the website. The wireframes are set, most content has been finalized, the research is in full force and a site outline is ready. The client’s vision of the project is set (despite how many times that may come to change) and there is an atmosphere of peace, and anticipation for the website to come together.
It is finally time to design.
While the designer goes through wireframe sketches, there is no doubt of the countless ways the elements pop off the page. Assigning colors for buttons, imagining the perfect typeface, the choices are endless and it is an act of creative expression to put it all together. The client often will get caught up in this hype too, to make sure all of these decisions are in line with their own corporate vision. You refer back to your initial wireframe sketches as you place the elements together, but as a result of this design excitement you forget why wireframe sketches were drawn in the first place: function is the primary focus of a website.
The average internet user in 2015 deals with very few UX nightmares when browsing. While this is a blessing from an end user’s point of view, it prevents user experience from being on our minds when we look at a website. When you have a seamless experience on a site, you are relaxed can appreciate the visual aspects of the website. A big mistake designers make and clients overlook is to assume a seamless user experience, and then put all attention into design details. Website design is more than just the look and feel. When all parties ignore UX the project results in a pretty website that is difficult to navigate, often with a high bounce rate and low conversion rate to boot. We will outline where to focus your attention when designing a project on your own, so that you are not distracted by the visual elements and left with a poor user experience.
How do we wireframe?
Putting together wireframes for a website is an essential step which is not generally overlooked in 2015. Web designers today will wireframe your website, but do they understand why? Too many designers are using this stage to structure content for the purpose of what looks best, and not what works best. Assuming that you are not working in a team with one hardcore UX professional who will give you workflows and wireframes of structured content, it will be on you to put together this site outline. Design is about solving problems, and there should always be a specific goal when a user comes to your website. Put together basic flow charts on pages on your site and ask “is the user pushed towards this goal?”. Do not overlook items such as a call to action on the main page, just because a full width slider with a stock photo might appear nicer. Before any of the UI elements are finalized, ignore them and make sure the journey a customer makes on your site is logical, and promotes conversion. This is vital when your client is more excited to tell you the proposed color scheme or a certain image they want to make sure is above the fold. Remember that as a web designer choosing to take on a UX role, you must be able to explain to a client the importance of giving your site this structure.
Have enough content to make the site work.
Often, designers are given little content to work with in a project. Especially when working freelance and interacting directly with a client, there are a lot of ideas thrown around. Often a client may want to get an idea of a ‘site template’ of what the design will look like beyond a wireframe stage before they are able to get you all of the written copy and images. Designing pages in a ‘fill in the blank’ manner is counterproductive to design. Content should be reviewed first. Before deciding a ‘good place to put an image’, you must first look at the image in mind. Including various graphic and image elements that look good hurt conversion if they are not relevant, so don’t be stuck with a spot for one if there is nothing meaningful to place. The sizes of divs and appearance of text might have been known first, but the content is meaningless. The site can not be designed with the content in mind this way. Making websites in this method may be a good quick and dirty method to throwing up a landing page, corporate outline or contact information, but it will never make for a good user experience if any function beyond reading copy an is added.
Look! It’s mobile responsive too!
Take these same principles into account as well in the design of mobile web pages. Just because the framework or theme you are building the site on will display elements in a certain manner on mobile, doesn’t mean they should appear that way. The site can look fantastic on any screen size, but it may provide for a poor experience. It is important to keep in mind that on mobile, users behave differently than on web. The purpose they have visited your site may be different, and this should be accounted for in user experience. Treating all screen sizes the same when they come to your website may be as ignorant as viewing all audiences and demographics who come to your site to be alike. Why did a user find you in a mobile setting compared to web?
When can I forget about UX and make it look good?
Short answer: never*.
Function is always the priority in design, but this doesn’t mean styling a website should not focus at all on the UI. Keep in mind with design that the site exists to showcase the content, so you should style all of the sites elements with this in mind. Written copy should be meaningful first, legible second, and a specific typeface third. Keep in mind that if you cannot find purpose for that element based on the function of your site – it should be removed (as beautiful as it may have been) Photographs should always be relevant to your product, ignore stock images and make sure you have original content. Product photography is very important when done right, so showcase high quality photos outlining your products or of your exact service.
Remember that websites are not art projects. While it is important to have a visually appealing design, it always has a purpose. Your focus with good design should always be to showcase the content of your website before it is to use certain fonts or use certain colors. Putting together a clean user experience may not always be noticed, but it is essential. Don’t worry about having to push back your stylistic choices a bit, or sacrifice any time on this aspect; having a smooth browsing experience will give both your client and users a better appreciation of the site’s UI, and make a good design that much more smashing.