Building a website: My UX/UI process
Running back through time, a couple of years ago I used to do web design as a freelancer. I never coded them I just used to make the design and sometimes pass it out to Wix or some other platform.
Back then I didn’t have a process to design or even to deliver a work, it was until I decided to become a full-time UI/UX Designer when I learn more about the process.
First I started making my own process to improve my work (and surprisingly it wasn’t too bad at all). It used to be something like this: create a visual concept to know more about my client, see what they want to reach with the website, do lo-fi wireframes and after, hi-fi wireframes, but to be honest, sometimes I skipped the lo-fi wireframes and do directly the final design.
At my first steps, that process worked but as I move along I realized that there were better ways to do it. I read a lot about it and watched a bunch of youtube videos and I got better at doing it, but it wasn’t until I completed a Coursera specialization when I finished putting all together and be really good at this.
So here is something I’ve learned in the courses and through my experience.
1. Build a Strategy
As a first step, we want to build a strategy that helps us to reach not only our goals as a designer but the client company goals.
In the strategy phase we need to answer:
➜What are our goals? (as a designer and our client goals)
➜Who are our users? (target audience)
➜What are the user goals? (why and what would the user do in the website?)
We also need to do a quick visual research of similar sites just to figure out what type of content they are using and why not, to get some inspiration.
And, to finish the strategy, we will need to define and give a voice to our project.
The strategy is much more than just setting goals and saying who our target will be, so, I will talk about strategy later on in another post.
2. Outline of scope
The Outline of Scope is a list of content and functionality to our website that needs to be included in it to fulfil the goals we previously set in the Strategy.
In the content side, we need to describe the information and elements we will need for the website, for example, we’ll need imagery, testimonials of clients, social media links, terms and privacy, contact information, etc.
And for the functionality list we need to describe what the user will be able to do in the website, like make an account, log in, recover password, contact us through a form, add to a shopping cart, pay with card or Paypal, etc.
3. Site navigation or sitemap
In this step, we take the content and the functionality list we made above and put it into a structured and cohesive whole.
Here we determine:
➜The navigational structure of the site
➜The correct labels to make easy navigation through the site.
4. Lo-fi Wireframes
Here, our focus shifts from the concept of a whole site to individual pages. Wireframes are sketches of the structural makeup of a website.
Note: Lo-Fi makes reference to Low Fidelity.
In the Lo-fi Wireframes, our main focus is on content, we need to do a preview of the site and its functionality but without getting into design yet, this just to make sure everything is good structured and to have a base to when we start designing.
5. Hi-fi Wireframes
In this step, we finally gonna be creative because it’s time to design!
Here we design and determine the visual identity of the website, in other words, we create the whole interface.
In this phase is where we finally care about typography, colours, shapes, etc.
And, when you finally finish the design, it’s time to give it to the development team to let them work with it or if you have coding skills, you can do it by yourself ;)
