A Mock Up Using Moqups

I am not much of a freehand artist – I can only produce art with words or structured materials, so I have never been one for sketching the layout of a visual project.

This past summer while back at home, I kept encouraging my father to change the design of the website for his new restaurant because it was a quickly thrown together thing, and therefore very unappealing to the visual senses. I was delegated the task, but crippled without design programs installed on my computer, I turned to the one software I know best: Microsoft Word.

On Word I did what I could, trying to replicate my vision. The draft turned out like this:

screenshot of project layout in Word 2/18/16
screenshot of project layout in Word 2/18/16










Tonight, however, the internet proved once again how much of a benefit it is in efficiency and convenience with a website called moqups.

Moqups is a user-friendly web tool that allows for creating layouts digitally.

screenshot of moqups website 2/18/16

This is what the web address will pull up, a tutorial using moqups tools.

With this new gift, I decided to redo my layout to see how much easier and quicker it would have been to have known about this months ago.

screenshot of moqups project progress 2/18/16 – using icons to mock logos

There are multiple ready-made stencils (as mocups calls them) that can be dragged onto the project sheet and rearranged and adjusted. This includes re-sizing, color filling, shape rounding, borders, border colors, border lines, text inserting, and many more options. The website even gives measurements and alignment guides, as seen with the logo recreation in the screenshot above.

screenshot of moqups project progress 2/18/16 – adding text

I was not able to match the colors exactly with the logo for this quick mock up, but being a mock up, only a more general idea is needed anyway, so I did not feel a loss with this. I will be able to uncover more detailed features with more time. Although I put a placeholder stencil in for the logo and recreated the Facebook and Twitter logos, there is an option to upload images.

Below are my projects side-by-side, with moqups on the left and Microsoft Word on the right.

screenshot of work from www.mockups.com 2/18/16
Screenshot of finished moqups project 2/18/16

Although not timed, this process did turn out to be much easier and quicker, and enough features are available with the moqups free account for me to be sure that I will come back to use it again.



2 thoughts on “A Mock Up Using Moqups

Add yours

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: