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:

  • Planning
  • Designing
  • Coding

It’s far from a complete UX process, but it will allow you to take your own design and make it come alive.

1. Plan it

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.

It’s extremely important to have a thorough plan for whatever product you’re designing. It will save you time and effort for sure.

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.

2. Design it

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).

Foto: http://bradfrost.com/blog/post/atomic-web-design/

3. Code it

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.

Zeplin.io is in my opinion the best way to translate design to code.

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.

Previous ArticleNext Article

Leave a Reply

Your email address will not be published. Required fields are marked *

T.

The new time and attendance law will kill innovation in Spain and Europe

Simple solutions or “one fits all” policies are easy to market by populist governments but they are sometimes at the expense of certain sectors and their people. This time the affected party is innovation and value added services, to a point that puts in jeopardy our (already weak) spot in the global competitiveness landscape.

I’ve always told my teams that I do not hire their time, but rather their talent and potential: their brains, their energy and passion and their willing to make a difference and impact our clients and the world through them. Innovative companies try to get in existing markets and solve things in complete different ways, some go as far as creating new markets from scratch. They all have in common that their mission is extremely hard, sometimes impossible (thus most fail along the way). The key for their success is how they manage to convince their teams that everything they do is not a job, but a religion. They are changing the world and that is something worth spending time and making history.

I can tell if somebody is motivated by their job by looking at their eyes while they talk about their challenges and ideas. Best people don’t work, they play. They make their challenges their hobbies. I’ve had many conversations at 1 am in the office, after some beers and sushi, before even realizing what time it is. Only when a job makes this kind of conditions happen, the wheel of significant value creation really stirs and great things come from it.

It is very hard to create a culture in which people feel so empowered that they are capable of anything. In my experience, it helps granting absolute flexibility. I don’t remember the last time I approved vacations to my team, or I paid attention to their schedules, or the days in which they worked from home or the office. This is not the kind of conversations I want to have with them. My relationship with my team is based on trust, and it is based on one single (often repetitive) conversation: how can we do more and better, how can we grow faster, how can we raise the bar. Little it matters to me whether they contribute to this questions from the beach in Canary Islands or spending many hours in the office.

However, the government today decided that it is a great idea in the 21th century that all companies like ours should make everybody clock in and clock out by law. I’m now obliged to add people’s time and attendance into our conversation. We now have to treat all jobs like production lines in factories (amidst the era of hyper automation and robotization). They go as far as having us registering accurate pauses for lunch. Unfortunately they don’t include how should we manage the time spent in the chill-out area, or when having long coffees in the outside terrace, or spending the afternoon in ping pong championships. Should we clock-in and clock-out every time we do that too?

When I travel I always get asked how is the Spanish ecosystem for entrepreneurship and innovation developing, I always defend our potential to become a leading actor in science and technology,  besides our current reputation for tapas, toros and siesta. We previously analysed the many initiatives taking place in the city of Barcelona. But my question is: is there anybody in the government actually helping us to make this happen?

The new law will come to place the next 12th of May. At Factorial we developed a free feature, so companies can instantly become compliant with the law. Interestingly enough, almost immediately after launching this feature people started developing tools using our API to automate clocking or connecting it with Slack and other interfaces. It looks like after all there will always be people willing to work on relevant things and not waste their energy in bureaucratic traps.

PD: You can find more information about the law in this article.