What Is the Best Way to Mockup a Website on Earth?

Asking “What Is the Best Way to Mockup a Website?” is like asking “What is the most noteworthy web design trends?” There is no shortcut as a single “best way”, but some do work better than others to some extent depending on each individual UX/UI designer’s style and preference. The innumerable tutorials about “PSD to HTML” are like abracadabra to you and the paradox is that when you finally suffer reading it you will just find yourself still nibbling on a piece of cardboard.

The thing is that, you, as an UX/UI designer, should defend your own basic rights of choosing tools. Photoshop is helpful, but we’d better do not label it as the only available all-in-one approach to mockup a website. It’s 2017 and there are countless alternatives out there. In this article, we will look at 3 most common website mockup method to getting close to the best way to mockup a website as much as possible.

1. Coded(HTML) Prototype

From a prevailing perspective among the new generation of designers, Prototyping in code might be too tedious to be the best way to mockup a website. However, there is certainly a reason that many designers have not give it up.

PSD to HTML.jpg

I actually find out a few advantages of doing a mockup in code. The most obvious one is that coded prototypes support all operating system and an outside software is unnecessary. Rather than concentrating on being creative, designers concentrate on how to make the code work. It is so interesting that I call it a “pre-development” step which will end up to be really valuable in the further development of the website.

You can also find free HTML text editors everywhere just by googling it but a high qualification of patience of learning will be required before they are helpful.

2. Wireframe Tools

Much like playing Legos, endless amount of trying and fixing in the later process is much more expensive than changes on a blueprint. Wireframe tools are so welcomed because they allow designers to do quick iteration. And if you are a freelance designer who often works with different teams, you need to be fully prepared that they will ask for the competence of using different wireframe tools.

mockplus webtite demo.jpg

I am personally a fan of pen and paper, but sometimes I use a wireframing software called Mockplus if I need to quickly collaborate with my teammates. In fact, it is very hard for starters to use anything else than wireframe tools because the terrifying learning curve of coding has already blocked them. And the pre-designed components and icons in such tools help starters free their creativity to execute the ideas in their heads quickly. For all the reasons mentioned above, wireframe tools of various kinds are literally becoming serious competitors of for the nomination of the best way to mockup a website.

3.Presentation Software

There is no such thing as “the best way to mockup a website for everybody.” So, for the green hands, presentation software like PowerPoint and Keynote can also be “the best”. In other words, presentation software can be the best access to the gate of being professional. Almost everyone has used it before, and it won’t be so long before you grasp all the tricks about advanced features such as animations and linking slides for interactions.

elements in PowerPoint.jpg

The basic element libraries contained will also lead you to quickly get familiar with what website mockup is about. Soon you will be able to jump to using more comprehensive wireframe tools.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s