How to create the perfect website for your brand's needs and stay within budget! Part 2 of 3
The following post is PART 2 of a 3-part series. If you haven't read PART 1, I fully recommend you read that first to make sure you have the complete information.
In PART 1 we talked about all the information you need to gather and answer before quoting the project with a designer, and what to expect to see in a proposal. In this post we will talk about the design process and strategy.
Later on, in PART 3 (coming up in a few weeks!), I'll go through the process of working with a developer, best practices, and how to keep your website running smoothly.
Part two (2)
Well planned and executed web projects include a few stages of research and design, such as User Experience and User Interaction (also known as UX/UI), and the Visual design stage. In some cases, there will be separate people assigned to each role, but a lot of the time, especially if you are working with a freelancer or a small studio, the designer will do it all.
What is User Experience design
Depending on who you ask, you might get different answers for what UX design is, but the primary objective of a user experience designer is to make sure people, who visit your website or web app, have the best, easiest, and most enjoyable experience possible. This is done first by knowing who your clients are, with in-depth research, and second by designing the architecture and navigation flow with key objectives and primary tasks in mind. If this is done right, users will be able to quickly and intuitively perform the tasks their are meant to perform, and your website will reach its objectives.
So, what does the visual designer do then?
Visual designers create what you see, meaning the visual front of the website or web app, and their work goes hand in hand with what the UX designer does. A visual designer establishes the look and feel of the website or web app, working with layout proportions, typography, colors, photography, and designing styles for buttons, icons, etc.
In other words, in the UX design process we create the structure and navigation flow (like a building’s floor plan and structure) and in the visual design process, we create the aesthetics (the look of the building and the interior design).
The design process
Research is needed to know the user in detail. The more information we have about your customers, the more effective the strategy will be.
If you have an existing website, research might also include the study of your current website’s heat maps and analytics — which shows where users click, hover, what information is the most often accessed and where they get stuck — to identify trouble areas.
The research should include interviews and/or surveys with real or potential users, either in person like a focus group or using digital/remote services. This research, combined with the project’s objectives, will help designers identify and confirm the most important tasks users want to and should be able to accomplish while visiting your website or web app.
2. USER EXPERIENCE STRATEGY
Based on the research results, designers will create a sitemap, representing the website’s overall floor plan or structure, as well as the content organization. This might also include a navigation flowchart, which is a visual representation of how users would navigate thought your site. The flowchart helps validate the proposed sitemap for intuitive navigation.
The next step is to identify key pages and design wireframes for those.
And what the heck is a wireframe you ask?
A wireframe is a simple line-based diagram that establishes the positioning for the navigation menu, specific content blocks, call to action buttons or links, and other important elements that form the basic layout of a page. I recommend doing wireframes considering at least 2 break points: desktop and mobile (usually is done mobile first) to make sure all sections of the website are accessible on any type of device.
Depending on the project’s budget, designers might make the wireframes clickable (like a prototype). A clickable prototype can then be used to run usability tests with real customers, either through personal interviews or using remote online systems. If needed, in-person usability tests can also be done with static wireframes.
I strongly recommend doing at least one user testing. You would be surprised of the things we find out on those that escapes the designer's and the client's eye. It's the best way to make sure your website is correctly speaking to your clients and making it easy for them to perform the task you want them to perform.
TIP » If you are creating a website with Squarespace, Shopify, or similar services that use pre-designed templates, you might not want to invest on wireframes, because you can’t fully personalize the layout. But, I strongly recommend at least doing the research, because based on that, you will be able to choose the correct template for your website. You should also do some user testing to make sure the layout and design works.
3. VISUAL DESIGN (the fun part)
Most of the time, the visual design process starts with the homepage, because that’s the most visited page on most websites (this is different in the case web apps, but that's a different conversation). Along with the homepage, designers will most likely create a style guide, which determines the overall design style of the website or web app, including elements such as: the color palette, typography styles, button styles, background designs, photo styles, as well as any other additional graphic elements like icons or infographics.
During the visual design process, you will see your website take shape. Most of the time, designs are done using software like Sketch, Illustrator or Photoshop, and you will be receiving static JPG or PDF files to review the designs. Remember that the navigation and overall layout structure was already determined during the UX/UI process, so in this stage you need to focus on the look and feel of the site.
TIP » a lot of people forget that a website is never seen as a complete page, like a flyer or a poster would be, but in parts as users scroll down. Keep that in mind when reviewing the files designers send you. Try to open them in Acrobat at full width and scroll down just as you would do on a website. Also, you should know that colors created for the screen (RGB system) don't print correctly (CMYK system), so always review web design files on a computer (or phone if it's a mobile version).
When key pages and the style guide is completed and approved, the designer will send the files to the developer. Unless the designer can also develop (say hi to the unicorns!), or unless you are using services with pre-designed templates such as Squarespace or Shopify, you will need a developer as part of your design team.
I'll talk more about the development process in the next post, as well as some tips about keeping your website running smoothly, so come back for PART III or sign up to my blog to be the first to know!