Recently we attended the Campus Code DevCon, held at the University of Negros Occidental – Recoletos last February 28.
Partly sponsored by Akubo, the forum aimed to boost students’ academic learning with trends in the IT industry and discussions on bug tracking, version control, and design. Among the guest speakers were two members of our team. I was one of them.
When I was first told to talk about UI design, I was not sure if I was the right person. I started to create user interface mockups for Akubo projects two years ago. I learned on my own, and I still have a lot to learn. So I reminded myself: every UI designer starts as a beginner.
What is UI?
Decades ago, if you wanted a computer to do something, you had to use a programming language and type a command. It was just a screen and lines of code.
Eventually we were introduced to computers with an interface, and a mouse cursor. Most of us know the old (Windows) design: the gray pop-up windows, chunky buttons, checkboxes, desktop icons.
The design may already look “ancient” next to the ones we now see today, especially on smartphones. But still, old or new, they’re both examples of UI design.
UI stands for user interface, and it’s more than just the colors or graphics. UI design is the look or layout of the product, and everything that the user sees or clicks (or presses, on a touchscreen device). A Sign Up button, the menu, the links on the sidebar, the familiar What’s on your mind? field in Facebook, the Photo Stories of Instagram — these are all parts of a user interface.
Five Lessons
You’d think that after two years I’d find it easy to create designs for our projects at Akubo. That’s not always the case. But I did learn a few things, and so every time I begin to work on a mockup, I remind myself of five things:
1. Who will use it?
Is your software/app for kids or adults? Millennials, teachers, or parents, who may not be very tech-savvy? Once you understand who you’re designing for, it’s easier to plan out everything else: what information you need to show, how to organize the pages, the style of the graphics or illustrators, the colors, even the font families and the writing style.
2. Work with shades of gray
A tip I learned only recently — build your mockup with monochrome colors first. Worry about the colors, gradients, and fonts later. This way, you can focus more on the layout and the technical aspects of the design. It’s also an exercise to test your skill and your creativity, and you’ll learn to make your product look great and usable, even in black and white.
3. Be consistent
The red traffic light always means Stop, whether you’re here or in another country. It’s the same idea in UI design. The buttons, links, and text headers are there to guide your user around your product, so they need to be easily recognized. If your Cancel buttons only have red borders, then all Cancel buttons in all pages need red borders. If you use an X icon to Close a page, use a different icon for Remove or Delete options.
4. Use simple language
Most bad examples are error messages. “404 Not Found?” or “Syntax Error?” might mean something to programmers, but it’s a foreign language to ordinary users. The user doesn’t know what it means. Or what went wrong, how to fix it, or when it will be fixed. When that happens, you’re basically leaving your user in the dark, and the experience doesn’t give your product a good impression.
5. Copy and deconstruct
If you’re new to UI design, it’s hard to create something from scratch, or something original. That’s why we learn and practice by copying.
The idea is not to plagiarize — it’s to sketch out the skeleton of a design. When you copy a design, you break down every element of the product. The tabs, headers, sidebars, positions of the sections and even sizes of the buttons.
Slowly you’ll understand why the design worked for that product, and why it might or might not work for a product like yours.
_
This article was written by Joy Martir, a Design & Communications Specialist at Akubo.