Below are some user interfaces I have designed.
What Problems Do I Need to Solve?
Before I get started on site mapping or wireframing I need to know what the website needs to do. What are the most important parts of the website? What problems does it need to solve? Is it mainly informative or does it need to collect user data or sell products or services? Answering these questions well from the beginning lays a strong foundation for the rest of the project.
What is the Best Solution?
There are many ways of building a website and each of them come with advantages and challenges. Once I know the purpose of the website I can decide the best way to build it. I consider factors such as hosting, content management, database requirements, timeline and budget, just to name a few. With a firm understanding of what the client expects from me, now I can move on to site mapping!
Designing the Site
A site map is a basic outline for the site and is always my starting point. Creating one helps me organize the content and create a site structure. For larger projects I will also create a user flow chart to make sure I'm not missing anything or creating any unfavorable UX situations.
At this stage I also create some user personas because I want to have a good understanding of the target audience. It is important to cater the design to the people who are expected to use it. Next I start wireframing.
I start off with pen and paper and once I'm happy with what I have I move into Adobe XD to make low fidelity wireframes. Lo-fi wireframes are best for figuring out the page layout, user flow, information structure and the over-all functionality of the site. I won't move onto high fidelity wireframes until the lo-fi ones are approved by the client.
After getting approval for the lo-fi wireframes I create the high fidelity wireframe and prototype in Adobe XD. The prototyping tool allows me to create a mock website for the client to interact with. I use this to make sure they can navigate the site well. After this is successful I jump into my editor and start building the site!
I hope this short summary gives you a good idea of the process I use for designing websites. Now let's look at some of the work I've done!