Web Design Projects

Below are my most recent web development projects. Read About My Design Process Read About My Design Process
x

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!

Close
William Tennent House Association Website picture

The William Tennent House Association

Problem: The WTHA needed a website to assist with recruiting new members, receiving donations and educating the public about their cause.

Solution: I built them a Wordpress site - it was the easiest and quickest way for them to have a website up and running that allowed them the functionality they needed.

J Radick Roofing Siding and Windows picture

J Radick Roofing Siding and Windows

Problem: Local roofing and siding contractor wanted a basic informational website for his business.

Solution: Created a website using the Bootstrap framework that links with their Facebook page and provides an email contact form.