Vis·u·al De·sign
/ˈviZH(o͞o)əl dəˈzīn/
Prepare For Trouble
And Make It Double
DOJYAN~~ It’s another Double Feature! And today we’re talking about UI Design. I know, I know the guidelines we talked before touched a bit about UI Design, but now we’re talking something a bit different. Yessiree, we’re talking about the staple part of UI Design: Wireframes and Mockups!
User Interface
Ah, User Interface, one of the most integral part of Software Development. Without good UI, most customers would just bat their eyes on potentially good apps/programs just because of that. User Experience is also an integral part to the designs. Even if the UI was good enough to make Da Vinci cry, without great user flow and experience, hardly anyone would use it. UI and UX goes hand-in-hand, they complement each other, without both being good, the design of a product is questionable at best.
Wireframe
Mostly known as website blueprints, it’s literally just that. A Website Blueprint. It’s a visual guide that works as a design skeleton for designers to create prototypes on and later, the overall UI Design. Wireframe will usually have 3 purposes:
- Represents things that will be displayed. Everything is a placeholder/representative of something that would be displayed. Which is why most is minimum (images represented with a box with a cross on it, etc)
- Outline of structure and layout. Everything on the wireframe is just an outline, it doesn’t have anything too high-leveled or complex.
- Overall design direction and description. A validated wireframe will be used for the next stagings of prototype and UI designing.
As usual, here’s the design on UKM Indonesia:
If you would like to see it yourself, hit the link down below 🔽
Of course, we followed 3 guidelines:
- Keeps grayscale colors. No need for complex colors.
- Use Max two fonts. Wireframe.cc definitely only have one font, so we got that covered!
- No images or fancy stuff. We use only placeholders for images and not much customization.
Mockup
After having a validated Wireframe, it’s time for us to create the Mockups for our product. While it’s not the final product, it should be as close to the final product as possible. Which is why it’s perceived as a high-fidelity version of the Wireframe. In general, there are a few things we can gain from using Mockups:
- High-fidelity. We can see a vision of the final product.
- Realistic. We can see something we can’t before. Upgraded color palettes, HD images and designs.
- Revision Friendly. Easy to change and make revisions than if we went straight to coding. Cause seriously, that’s a madman’s journey.
While we’ve had a lot of revisions, we’ve finally decided on a design we can all get behind of (at least for now).
Best described as a “DeepWeb website” by our proud hacker, Andre, and I agree fully. The designs are very bad and is overall not very efficient.
The 2nd design technically consists of 3 designs, one made by me, one by Wahyu, and the last made together (actually just fusing Wahyu’s good components and mine’s).
For the lacis, I use the ones currently existing on UKM Indonesia, while I revamped the front page and the articles and added a new calendar. I used a dominant yellow color.
The combination of both mine and Wahyu’s. We used my event calendar/event list, Wahyu’s lacis and background, and created a carousel for the articles. In the end, this is the overall design we agreed on, and will most probably implement.
Usability Heuristics
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.
Afterwords
Well, this is the overall UI Design we used, coupled with the design guidelines we created before, it should complement each other perfectly. That’s all for me, Vadim, Signing Off!
Adiós
