Class Work

Screen Design

In order to make the transition from ideas to actual creation, guides, wireframes, and finalised mock-ups are essential. They make the process a lot more smoother and allow designers to view mistakes before spending a lot of time on actualising them.

First, it is good to start with a template for the device you are working on.

Toast- 1.png

Here we’re using an iPad template to begin with. Using Illustrator, it’s a must to insert guides to make sure alignment is precise and correct. After that, you make the wireframe.

Toast- 3.png

You indicate where everything goes, generally kept grayscale as wireframes are used for exhibiting layouts. Next, you go over the wireframe with a genuine mock-up.

Toast - 4.png

It doesn’t need to be perfect, but as close to the final design as you can get, particularly in colour, layout, and user interface. After doing this, you will need to annotate where the UI elements are and explain what they do, after all, this is an interactive design.

Toast - 5.png

And finally, gestures and UI overlays (such as sub-menus) need to be highlighted.

Toast- 6.png

Make any necessary notes on extra details, and move on to make more screen designs!


Leave a Reply

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

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