Startups, business & tech
Is design more than just making it pretty?
Marcos is a Product Designer at Quipu. This function requires making important decisions before tackling the visual part of new features. The multi-step process consists of structuring and simplifying the product, talking about it with the potential users, and, finally, making it look good.
Continue reading “Design is Much More Than “Making It Pretty””
Designer, Investor & Friend Marcos Medina tells us about his journey from a graphic design school to working at startups in Silicon Valley and now moving back to Barcelona.
Continue reading “Product Design Journey — From Terrassa to the Valley”
Even if you’e not a designer and never used design software before, you can still release products that do the job and are well designed.
The following steps I’ll guide you through can be divided into three parts:
It’s far from a complete UX process, but it will allow you to take your own design and make it come alive.
In your initial phase of planning you need to know your goal, and what you want to achieve with your project.
When you know for what purpose you’e building your app or your product for, you need to know who’s using it.
You should think of your audience in three different ways.
>Who: Demographics, age, gender, profession, etc.
>Where: In what setting they will use your product in.
>What: The kind of device they’re using your product on.
Take this information and let it influence your decision as you design.
The next step is to do at basic flowchart, in other words see how the user goes through your product, step by step, instead of just hard-coding it.
When you make a flowchart you avoid making mistakes that forces you to go back and do big changes. An example of a flowchart I’ve used in Quipu is pictured under to give you a rough idea, but if you want to dig into it — here’s a video explaining the process using Sketch.
The last part of the planning, is to define a functional definition of each page in your product. It’s a document that will be your documentation or knowledge base about what each screen does, what it shows, and what routes and actions are possible to take from there.
So if you’re building an app, you should have a page with the following information for each interface:
Name of the view (or the module) –> The purpose of the page –> Full information –> Partial information –> List information –> Routes/actions.
If you did your flowchart correctly, the documentation will be heavily dependent on that Flow Chart.
The most important thing as a fresh designer or working on a project you’ve coded yourself, is to use established patterns.
There’s no reason to reinvent the wheel again.
A place where you can find questions and answers for most issues are ux.stackexchange.com. It’s similar to stackoverflow.com, just for design, and we know how important that is to most designers, so don’t be afraid to seek inspiration and help from more experienced people.
Then start on your wire-framing. Translate your flow and functional definition to a low-fidelity screen that contain everything but the design finish. In other words, focus on getting all the routes, actions, buttons and content right before making it look nice.
One of the most important thing of the design process, is to design it like you would code it. I recommend using Sketch, but use whatever software you’re comfortable with, like Illustrator or Photoshop.
Design as you would code it simply means using non-filled transparent containers to imitate containers and wrappers. Also use naming conventions for layers and groups just as you would use while coding your components.
The last thing I want to mention in terms of design, is to use Atomic Design principles which is a way of designing interfaces that extends to what we’ve been covering in the “Design as you would code it” part above.
It talks about structuring your design, and define it into atoms (colors, fonts, shapes) and form molecules by using them (buttons, inputs, lists etc..), to finally do organisms. An organism then becomes a template For example, A navigation bar that has a menu, a search bar and a logo (few molecules).
As a designer I will not teach code, most of you probably are more talented coders than I am, so I’ll just mention the software you should use to help you get all the CSS styles you will ever need.
Zeplin.io is a software that takes Sketch Designs, exports CSS styles and gives you all the sizes, margins, paddings, borders you need in order to translate your design to code and not loose the quality and level of detail you worked so hard on.
If you followed the atomic design, and designing as you would code it, then this process is simple, quick and with minimum errors.
I can honestly say that in Quipu where I do the design, this is the most time-saving tool I’ve ever come across. It drastically reduced both cost and time spent on getting the looks of our apps and website translated to all browsers.
Also read:
https://blog.itnig.net/why-ux-ui-designs-should-be-aimed-at-zombies-1968d72b0472
This post was written by media manager at itnig, Sindre Hopland, based on the presentation by lead designer at Quipu, Kamil Jura.