#mockupdesign #howtocreateockup #websitemockupdesigntips #rhettdemille #rhettwebdesignconsultant #palmettosoft
00:00 Introduction:
00:33 What is Mockup Design?
01:25 Why is Mockup Design important?
01:48 How to do Mockup Design:
02:40 Caution Tip!
03:16 Smart Tip!
05:55 Three Key Takeaways From This Video:
04:20 Conclusion:
Introduction
Hello everyone and thanks for visiting the PalmettoSoft YouTube channel. My name is Rhett DeMille and I am the owner and founder of the company.
In today’s video, we will be discussing the Mockup Design, which is Step 6, in our 10 Step Web Design Process.
So let’s get started!
What is Mockup Design?
The mockup design is a proof-of-concept digital document created by the developer to the client on how the website will look.
It is also the result of numerous conversations, research, wireframes and previously collected content. Basically, most everything you have done to date on the project directly feeds into how the Mockup Design will look.
If you were designing a house, think of the mockup as a rendering image. It shows dimensions, colors, depth and a general sense of how the structure will look.
Have you ever noticed the digitally created beautiful neighborhood clubhouse, bushes and happy families all gathered around the pool? Well, that is essentially the Mockup Design.
Why is Mockup Design Important?
Not to sound like Captain Obvious, but nobody wants an ugly website.
The design is important because it lets the client and designer understand how the website is going to look.
And while looks are not everything, they are very important when building a website.
How to do the Mockup Design:
For time constraints, we are only going to cover the major points of how to do this.
1. Use the Navigation Summary, Wireframe and Collected Content as your guide.
2. Send a basic questionnaire to the client to include questions such as, but not limited to: What is your color scheme? Name 2-3 websites you really like – And what specifically do you like about these examples?
3. Ask the client: “Is there any additional information that you can provide that will help us in the Mock Design effort?” This is kind of a catch all question that needs to be asked.
4. Create a Homepage, standard inner page and Contact page examples of the same design. You only need to create three.
Caution Tip!
Do not, under any circumstances, offer multiple versions of the mockup design. Why? Mainly because you will open several paths of thought for the client to go down and this will almost guarantee that your Mockup Design will take exponentially longer to get approved – Rather than using one design.
Here’s the thing: If you did your proper due diligence, research, documentation, etc., you should already have a strong idea about what type of look-and-feel the customer wants.
Smart Tip!
Use the previously gathered content from the Content Collection step to place within your mockup design.
As in, don’t use Latin filler text to show where a paragraph goes. And don’t use a placeholder box for an image.
By using the content within the Mockup, the client has a better understanding of how their website will actually look – And… It will make the Mockup look better in general.
Key takeaways:
1. Before starting the Mockup, ensure you send them a questionnaire so you can get a good understanding of what type of design they want.
2. Only offer one version of the Mockup – And not multiple ones.
3. Within the Mockup Design, integrate the content gathered from the Content Collection step.
Conclusion:
Well folks, it’s about time to wrap it up and we hope you now have a much better understanding of the Mockup Design, which is Step 6 in our 10 Step Web Design Process.
And please let us know what you think in the comments below. As always, have a good one and come back to see us.
———————————————————————
Other Resources:
► Web Design Process: https://www.palmettosoft.com/web-design-process-steps/
____________________________________________
Follow Us!
► Subscribe: https://www.youtube.com/c/Palmettosoft
► On https://www.facebook.com/palmettosoft
► On https://twitter.com/PalmettoSoft
► On https://www.linkedin.com/company/palmettosoft
