Visual Design

Published in

UKM Heroes

5 min readOct 10, 2019

User Interface undoubtedly becomes the core of Software Development. Every Software will aim to be used by many users. If their app or website is not appealing, the users will leave the app and search for other app. But how can we create a good User experiences from a good user interfaces ? We need to find the best design for our software. Finding a good design is uneasy and we need to go through several steps to at least get a good design. The general steps to when we design our User Interface is create Wireframe and Mockups. In this medium, i will share how our group do the design process

Wireframe

What is wireframe ? Wireframe is a low-fidelity design layout. From the definition, we could comprehend that wireframe will mostly give us the idea of how our apps or website structured. Wireframe will minimal have 3 purposes:

Represents things that will be displayed. In wireframe, we can display the information that we will have in our software.
Outline of structure and layout. Wireframe’s minimalistic design will be a perfect guide for our software’s layout
Overall design direction and description. The validated or confirmed wireframe will then be used for next design process

Wireframe in our project :

We created our wireframe in https://wireframe.cc . And we follow 3 guidelines:

Keeps grayscale colors. make the design as simple as possible
Use Max two fonts. we don’t need that yet, fonts will be implemented in Mockup
No images or fancy stuff. We use only placeholders for images and not much customization.

Mockup

After we’ve done the Wireframe, we implement the wireframe design into the mockup. We see mockup as a high-fidelity design that almost close to the final product or website. Overall, mockup has some benefits.

High-fidelity. We can see the final product from the mockup we create.
Realistic. We can see something we can’t before. Like matching colors, choosing fonts, and detecting defect.
Revision Friendly. Easy to change and make revisions than if we were just go with the code.

In our group, the design has changed about four (4) times in total because of the flaws that we discover and also revisions from the UT that we conducted.

Then we make revision and create 2 separate design, one by me, and one by Vadim. This one is my design.

And the design that we agreed to is the combination of both mine and vadim’s:

We use my home design, with my laci design and agreed on small event calendar with an event list so that the users can lightly browse an event at one particular time

Our group will implement this design for the project.

When we are making the design, we also need to take notes on the ‘Usability Heuristics by Nielsen’. Which is a broad principles for the usability and user interaction.

Visibility of system status. The software needs to give feedback to users
Match between system and the real world. Use universal/user’s language that the user will understand.
User control and freedom. Easy access to get out of unwanted situations.
Consistency and Standards. Design and words/phrase consistency
Error Prevention. Software that hinders or eliminate the error probability.
Recognition rather than recall. Making remarkable design and user interaction.
Flexibility and efficiency of use. Not making things to complicated for users.
Aesthetic and minimalist design. Gives clear vision for the users to retrieve information.
Help users recognize, diagnose, and recover from errors. The error messages must be displayed in plain and universal language.
Help and documentation. Provide helps and manual regarding the problems faced by the user.

So, wireframe and mockups can be a good help for us to create a perfect design for our needs.

And that’s our group’s Design Process.

FINAL UPDATE 12/5/2019

It’s been 2 months since i created this medium. We’ve gone through numbers of design revisions and now we would like to present our final mockup. Now with fully working mockups (And high fidelity also).