Table of Contents
Do you want to level up your redesign process? In this article, you will learn about the last four steps that are necessary for successful redesign project. We will discuss tips on creating a mood board, building mockups and prototypes, delivering assets and testing. Without further ado, let’s take a look at how to level up your redesign process.
The Website Redesign Process – How to Redesign Like a Pro part 1.
The Website Redesign Process – How to Redesign Like a Pro part 2.
The Website Redesign Process – How to Redesign Like a Pro part 3.
The Website Redesign Process – How to Redesign Like a Pro part 4.
Put together mood board
Let’s start with a bit of theory. What is a mood board? Put simply, a mood board is a visual tool for designers, other creatives, and also clients. Generally speaking, a mood board is a collection or combination of things such as mockups, layouts designs, colors, images, fonts, patterns and textures. The design direction of the mood board is determined by the style of the redesign project.
The use of mood boards is not restricted to web design. Mood boards are used in a variety of industries and disciplines, such as branding, film, fashion, interior design, industrial design, photography, wedding planning, etc. The reason you may not hear about mood board yet is that different industries use different names. However, the principles is the same.
Another thing that can vary a lot is the form of a mood board. We can create either digital or analog, physical, mood board. This choice is completely on us. In other words, it is a matter of personal preferences of every designer. Some designers like digital mood boards, some analog and some mixture of both. You may decide to share the mood board with your client and other stakeholders.
However, the person who will work with the mood board the most is you. You will work with mood board from now until the very end of the redesign, or design, project. Keep in mind that there is no “best” approach to creating mood boards. So, experiment with all approaches and see what works for you, what you find most comfortable. The same is true for tools for mood board management.
Benefits of creating a mood board
Creating and managing a mood board may seem like a waste of time. So, why should we invest our time into it? What are some of the benefits of creating a mood board? There are two main reasons for creating a mood board for redesign, or design, project. First, it can help us save time. Gathering ideas and inspiration before we start designing can make our redesign process faster. How?
Mood board full of examples can help us quickly awake your creativity and imagination. This will help us avoid one of the big fears of any creative person, staring at a blank screen. This is how mood board can save some precious time. As such, it will improve the odds of finishing the redesign project before the deadline. And, it can help us save time in another way.
Let’s say that we decided to create a mood boar and share it with our client and other project stakeholders. Doing this can help us get client’s approval on the redesign concept we have in mind. This is additional time and effort that could be wasted otherwise. Imagine working on a design concept for a redesign, and giving it everything you have, only to have it rejected by a client.
This is much less likely to happen if the mood board we created was also approved by our client. In that case, we are starting creating the redesign concept on a common ground.
The second reason is that creating a mood board helps our client, and other stakeholders. This is related to what we discussed above. Sharing the mood board with our client and stakeholders gives them a better picture about the concept we want to create. They will have a better idea of how will the finished product probably look like.
Having this information will then allow everyone involved in the project to agree on it before we move any further. So, saved time and also opportunity to let our client and other stakeholders become more active participants on the redesign project. Aside to that, there is the frequent problem of trying to describe design only with words. This is can be a cause of many misunderstandings.
Two people may say the same thing. However, they both may mean, and then understand, something completely different. So, when we present our client and other stakeholders with a visual representation of our concept, it can help everyone get on the same page.
Questions to ask
We know what is a mood board. We also know some of the benefits of creating a mood board. Whe we decide to create a mood board for our redesign project, we can’t fill it with just anything. We have to always choose the right material. How? There are four questions we can use. First, does this example relate to the overall structure of the project I want to implement? Meaning, is this example using the same or similar layout, grid or patterns?
Second, is this specific design style, such as the color palette and the use of color or typography, similar to the design style I want to create? Third, does this example have a specific functional feature I want to implement in this project? Fourth, does this example convey a certain mood or emotion I want to convey with this project?
Answering “yes” on any of these questions makes the material we are thinking about a good candidate for our mood board. It is still important to keep in mind that these questions are only indicative. When we start creating a mood board we may not have a clear or even any idea about what we want to create. At that moment, our concept for redesign can be very vague.
If this is true, it will be hard to answer some of these question. As a result, we may end up with a diverse mood board. This doesn’t have to be an issue. In a fact, more diverse mood board can help us find more creative solution for the project. And, in the worst case, we can always meet with our client, show her the mood board and ask for her opinion. If she agrees, don’t worry. Go ahead.
7 Tips for creating a mood board
My first tip is to do it yourself. Don’t outsource mood board creation to someone else. It may look like saving some time. However, doing so can backfire. The mood board may not convey the mood and style we want to convey in the concept we are thinking about. Or, we may not like some of the examples. Or, we may want more, or less, diverse mood board than the one we got.
Whatever the case is, we should be the ones creating the mood board. In the end, we are the ones who will work with it. Second, choose a style and theme. One thing that can help us narrow the number of choices for our mood board is choosing one specific design style (modern, traditional, futuristic, old-fashioned, bold, etc.) or mood (happy, playful, exciting, reserved, calm, pristine, exclusive, adult, childish, conservative, etc.).
Third, create more than one mood board. There is no rule saying that every design or redesign project has to have just one mood board. We can create as many mood boards as we want. What’s more, this is can be a very good way to increase the diversity of examples while keeping all our mood boards narrowly focused on a single theme, mood or design style.
Fourth, forget any limits, be playful and experiment. Since we can create multiple mood boards, there is no reason to hold ourselves back. We can give our imagination and creativity a free rein. So, when we find something interesting, but unusual, it doesn’t mean we should discard it. Why not to create a new mood board specifically for these weird and unusual examples?
Fifth, have example for everything. Everything in a sense of having an example for every element we may want to use in our concept. So, a variety of examples for layouts, grids, patterns, color palettes, typography, cards, modals, buttons, navigation, forms, headers, sliders, etc. This sixth tip is closely related to the previous one. It is about focusing on one thing.
Having an example for everything can be overwhelming. One thing that can help us is focusing on just one element at the time. For example, we can start with looking for interesting examples of typography. Then, we can search for examples of color palettes, then cards and so on. This way, we can slowly create a very rich and diverse mood board for our redesign project.
The seventh and final tip, refine, revisit and curate. Mood board is not static. It can and should evolve as the concept for our project gets a more concrete shape and form. This means that we should regularly go back and refine our mood board. We should add new interesting examples and discard those no longer fitting the style and mood of our concept.
Create mockups and prototypes
The next step in the redesign process is about bringing our concept into reality. At this point, there are two ways to approach this stage. First, we can create a static design in our favorite graphic editor, such as XD, Sketch, Photoshop, Illustrator, Affinity Designer, Gimp, Inkscape, etc. Second, we can skip static mockup and create a prototype of our concept.
If our job is to create only the design, not the final and working product. In that case, our choice will be the first approach, creating mockups in graphic editor. Otherwise, what we choose will depend solely on us, and on what we find to be the best fit. Again, there is no “right”, “the best” or “correct” approach. What matters is what fits us, what allows us to work fast.
It may seem that a lot of web designers adopted the second approach, going straight to prototypes. However, this is not completely true. There is still a lot of web designers who like to build mockups in graphic editor, present them to their clients and proceeding to building a prototype only after getting client’s approval. Then, there are designers who like to design with code.
These people usually skip creating mockups in graphic editors. Instead, they create those mockups with code, as partially or completely functional prototypes. In other words, we are basically talking about going from wireframes to first prototype. This is my favorite approach. I found it to be much faster to design with code than with graphic editor.
However, this is also caused by the fact that I am better with code than with graphic editor. For me, it is easier and faster to build a prototype in HTML, CSS, JS and React. Some else can be faster when she works on the mockup in sketch. Again, it is about experimenting with different approaches and tools and finding what works for you. That is your best tool.
Prototyping is a very broad area and it is beyond the scope of this article and mini series. A very good place to learn more about this approach is Everything You Ever Wanted To Know About Prototyping (But Were Afraid To Ask) article published on Smashing Magazine and 6 Steps To Use Rapid Prototyping And Build Amazing Products Pt2.
Deliver all assets
Let’s assume that our redesign project went well. We defined our concept, got approval from our client, and either build a prototype or designed a mockup, depending on the scope of the project. Now, it is time to prepare everything so we can hand it over to our client. So, what can we do to prepare all assets so that they are in a usable shape?
Let’s start with the content of graphic files. Make sure the names of layers, groups and art boards are accurate and correct. And, proofread the content. This may seem like a minor detail, but avoid any typos, or ad hoc names. Keep in mind that you want to present your work in the best shape. If you are not using groups, folders or whatever, do it. It will help with content organization.
Next, remove everything that is not used. Do a complete cleanup and keep only what is used in a final version. If you decided that you will not use layer, or element, remove it. Now to the files. Again, use accurate and correct names. I forgot to mention this above. It is good to choose one naming convention, use of dashes or underscores or spaces, and sticking to it.
Just as with the content, group your files with folders. For example, you can use the website site map group together related files. Include only files that will be used and remove the rest. Make sure that all visual assets such as images, audio and video are optimized. Also, provide them in the highest resolution. When it comes to video and audio, include multiple formats to ensure full support.
Next, for every font you used add necessary files, even if the font is available via CDN, such as Google Fonts. Finally, if you used any licensed assets, make sure to include licenses and any necessary documents. And, if you used some licensed assets and didn’t pay for them, do it now. If there are some assets that have to be paid, there are two options.
First, use project budget and buy necessary licenses. Second, find royalty-free alternative. Choose one of these options. Never use anything that is licensed and you didn’t pay for it, at least not in the final version. Finally, wrap all files in a one archive. I suggest using either zip or 7zip. Both formats are well supported on all platforms and both are open formats.
When it comes to code, make sure it is optimized and cleaned as well. This applies to HTML, CSS, JavaScript and any other language you used. All files have to be clean, and documented with comments where necessary. Take a look at Website Maintenance – 11 Tips for Web Designers and Developers Pt1. This article will give you a handful of tips to polish your code. More information about commenting code is in the second part of this article.
The second part also contains tips for conducting browser testing. This article also briefly addresses tips on improving accessibility and ARIA. Both topics are worth exploring so our client will get the highest quality work.
Test, test, test
We are almost done. In the first part, we discussed that improving user experience and usability of the website as what does it mean to do a redesign. In the same part, we also talked about the importance of setting goals and choosing key metrics for our redesign project. Now, it is time to deploy the redesign to production, turn on analytics and start testing the redesign with real users.
We can call the redesign success only if we can meet these goals we and our client set. If not, the project is not a success, but a failure. In that case, we have to find the root cause of the problem. Then, we have to find a way to fix it, test it and learn from the data. And, we have to repeat this loop of testing, trying and learning until we finally meet our goals.
We will not proceed any further with this topic. We already discussed user testing and how to do it in-depth in Mastering Web Design Process Pt4. This article explores various ways of conduct user testing and tools to use. This article on Usability testing hints, tips and guidelines also provides a lot of good material about user testing. So, take a look at both.
Closing thoughts on website redesign
This is it, the end of this part and also this mini series focused on the process of redesign. I hope you enjoyed it and learned a lot of useful things. There was a lot we discussed through this series. We paid more attention to some topics than others. If there is any topic you want to know more about, please let me know via comments, email or twitter.
I will dedicate an article especially to that topic. And I will give you all information to help you not only to learn about that topic, but to master it. With that, thank you for your time and have a great day!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
