What is Mockup Design & What is its Significance?

status 200
3 min readOct 29, 2020

UI mockups, or wireframes, are a key part of a fine functional specification. Functional specifications describe how the software works from the user’s perspective. This article does not explain why a functional specification is needed. For this reason, we recommend Joel Spolsky’s article, Painless Functional Specifications. The focus of this article is to explain and analyze some approaches to creating UI mockups.

I think there are many other ways to create wireframes, but I’ll only explain and comment on the ones I’ve used, and give some general explanations about their pros and cons. ..

Lo-Fi Prototyping-This is just a fancy name for the old butcher’s paper approach. This is the best way to design a new shrink-wrapped software package. It really helps collaborate, shed creative juices, and the speed at which you can create rough screens is unbeatable.

I once spent four days with a group of developers in a small apartment designing communication applications using this technique. The result was not surprising, and I was able to quickly explode and repeat the idea. As a UI designer for the team, I went home with a ton of paper over the weekend and converted it to over 30 HTML mockups.

This approach is not suitable for previously designed simple business websites and software (such as non-new systems such as shopping carts). It’s also not great if the client is directly involved in the project. There are several reasons for this. It requires a significant investment of time on behalf of the client (they may have a business running during the day), and secondly; the client-supplier relationship is often that they do. Create a dynamic thing that tells you what you want and you do it. Clients usually don’t hang out while designing software.

In general, what I do before designing anything is to tell the client “I’m going to make a very rough mockup of what the screen looks like. It’s not pretty, but at the moment the button layout I’m trying to lock down a general layout, etc. “.

This can make the screen look scary, so methods such as lo-fi prototyping and MS Excel may help. The danger of HTML or Photoshop mockups is that you can spend an early effort on “cleaning”. The problem with making things “look good” in the early stages is that time is wasted (and will be) when iterative adjustments are made.

Iteration is the name of the game when designing the system, especially in the early stages. In such cases, you should choose an approach that allows you to create revisions at super-fast speeds.

If you ask me what is mockup design then I will simply tell you Website design mockups don’t have to look like the final product. In most cases, mockups can be used with simple boxes or dotted lines to indicate where an image or content will be placed. The client may think that the mockup is the final output of the project, but in reality, it is just the model in which the output is developed.

For many web designers, it is very important to let the client know how the mockup works. Some clients don’t really care about mockups. All they want to see is the final product. Still, mockup development is important in the process of planning the design of an Ohio website. This is to serve as a designer’s guide. However, web designers need to know that mockups need to be open to changes.

--

--

status 200

A Software Development Company focusing on developing Scalable, Secure, Reliable, Customizable, and fault-tolerant systems using the following technology stack.