When I decided to learn how to code, I signed up for the Skillcrush web designer career blueprint. I was trying to decide between the web designer and web developer blueprints, but I decided to go with the web designer blueprint because I knew I would need extra help with web design. I didn't have much experience with design so I felt web design would be the best place to start vs. learning Ruby.
The web designer blueprint is no longer available at Skillcrush. The web design skills in this series have been taught in other blueprints and courses they have created including the visual designer blueprint. Now they can be found as classes in the Break into Tech program.
The web designer blueprint started with Skillcrush 100: UX & Web Design. The first week concentrated on UX web design, but it particularly reviews important design concepts that help guide developers and designers toward what they want to build. The design process varies for every designer and developer you talk to. However, Skillcrush goes over a design process that will help you get the information you need to make the right design choices.
While the final product might be different, the process designers take to create a design doesn't change. Adda Birnir (the founder of Skillcrush) offers a tip in regards to the design process. This is one of the biggest lessons Adda learned when she was starting.
Although it might be tempting, you don't want to take any shortcuts by skipping steps. Skipping steps just means more work later down the road.
So in short, save yourself time and extra work by sticking to your design process. You will be mad at yourself if you don't. When it comes to the actual design process, here is what Skillcrush suggests. The order these are done might be different for certain designers, but these steps are found in every designer's process.
1. Define the project goals.
A good designer needs to know what they are building before they start making something. Designers ask tons of questions to learn as much as they can about the project. In regards to web design, this means learning about what user is being targeted and what users should be doing on this website.
This is the step where designers look at the product currently being used. Web designers can look at a website a person or company is using. They also look at sites from their client's competition or simply ones that they might like. I like looking at examples and samples from a client since it shows me what they want to be and what they are looking for as well as what I am working with.
Skillcrush suggests using a questionnaire for a client to fill out with all the questions you want to be answered. However, some designers might meet with clients instead of giving them a questionnaire to fill out. Others might use both methods when meeting with clients. Regardless of what method you use, you need to find out as much as you can about what you will be working on, who the project is for, and what the intended goal a user needs to take on the website.
2. Create a user persona.
Now that you have gotten as much information as you can about the project, it is time to create a user persona. A user persona is a profile of a person who might visit your website. Designers use these user personas to figure out what their needs are so they can address them within the design.
While the idea of designing for one person might seem like an odd idea at first, it is one of the most important things I learned from Skillcrush 100. Designing for a specific user in mind isn't just going to be easier. By concentrating on a specific user, you can get deep into the details to meet the needs of your user. When it comes to design, Skillcrush believes "meeting the needs of one specific person is the best way to meet the needs of many."
When I made my first version of my portfolio website, the user persona wasn't just useful in helping me plan my site. The information I have gotten from my user persona helped me think about what kind of prospective clients I am looking to connect with. Knowing what my user likes to think about and do is helping me change my design to make it easier for them to find what they are looking for. As I worked on my site, I tried to think about the user persona I created and what users are expecting to see as they visit my website.
How do you get information for a user persona?
Designers do lots of interviews. They talk to users who use the website as well as users you plan on targeting for your design. This information can be obtained through surveys, social media, e-mails, and much more. So if you see the little pop-up windows on some of your favorite websites, chances are they are getting user feedback so they can improve the design of the website.
3. Make a site map and user flow.
After you get information about the project and the user, it is time to start putting together the design. Before you start working on the project, you need a plan. At this stage, you make a sitemap.
Sitemaps are outlines of a website. They act just like a web diagram you would make for a high school essay. Sitemaps figure out what pages are needed for your website.
It doesn't matter if sitemaps are drawn by hand or built using a software program. They need to show all the pages that will be on your website. As you make your sitemap, Skillcrush suggests thinking about the site navigation. These questions will help you figure out what landing pages you will need.
How do you want users to move around your website?
Do you need a login page so users can sign in?
Once you have a sitemap of your site, it is time to think about the user flow.
The user flow is a map that shows the path users take to do a specific action on your site. It doesn't matter if you want users to buy something, subscribe to a newsletter, or follow you on social media. This map should show how users get from one point to another on your website.
A way to start thinking about your user flow is to think of how users get to your website. Once you brainstorm your entry points, you can start thinking about what actions users should take on this site. On my portfolio site, a client might find my site through a Google search and end up sending me an e-mail about a project they need help with. The client's Google search is the entry point and the e-mail is the action I hope the client will take on my website.
Sitemaps and user flows can be very easy to design or complex. It matters depending on the site you are building. Some sites will need multiple pages and have several goal actions that need to be achieved. When in doubt, you can never go wrong keeping things simple.
A lot of designers from Skillcrush webinars, podcasts, and online design courses all recommend this. The reason why is because designers aren't designing for computers. Today web designers have to think about designing for computers and mobile devices. While one idea might sound cool on a website, it could make things difficult for users if they are trying to find your site via their cell phone or tablet.
4. Start putting together your wireframe!
My favorite stage of the design process is here. After you have your sitemap and user flow, you can start sketching your site. This is where the wireframe comes in.
Wireframes are different from sitemaps because they have a lot more detail. In a good wireframe, you start placing spots for where the content will go and how the site should look. Designers should be able to look at your wireframe and know where everything is going to go on your website.
Think of wireframes as the rough draft you might make for an essay you write in school. The goal of a wireframe is to create a structure for the website you are making and show how the website should function. It doesn't matter if you plan on using paper and pencil or a wireframing program. You just don't want to get too focused on the details.
Don't worry about putting images or actual text on your wireframe. You will figure out those details later. All you need to worry about is making sure your sketch addresses everything you put on your user flow. Would a user be able to complete the goal actions you picked? Use your user flow as a checklist and guide to help you work on your wireframe.
Conclusion
There is no right or wrong way for web design. However, the design process is an organized way to help you think about the project you are making and the users you want coming to the website. Even if you aren't planning on designing websites, it is important to understand the design process because you will be building the final design in the future.
Developers who are familiar with the design process can help designers improve designs to better meet the actions or needs of their users. Now that there is a wireframe in place, you can start shifting your focus to how the website should look at feel. In the next post, I will review week two of the web design blueprint on how you can begin building your brand by picking the right colors, typography, proportions, and much more.
What design process do you use? Feel free to share your design process in the comments or add any of your design tips.
This post was originally published on October 5, 2016 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.
Top comments (0)