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 *

O.

On sales leadership

These are some values that I learned that define a leader:

– A leader is somebody who reaches their goals and achieves beyond their individual abilities aligned with their own values and the organization’s values. A leader without a team is not a leader. A leader works for the team, not the other way around.

– Humbleness. Leaders must get to know themselves first, acknowledge their limitations. Acknowledge they have no recipe for success (no one does). They will succeed only by being curious and trying things faster, testing, changing things again, failing again, learning as fast as possible. In sales, everybody notices when things work well, success is measured in € vs budget. A leader must embrace results with no buts and take action to reach the goals.

– A leader works harder, a leader cares about the goals more than anybody else, they took full ownership of the goals. A leader does about anything to remove bottlenecks away on his team, they assist, train, support everybody, anything it takes. They are always the best resource for their team.

– A leader will always be available for everybody in their team, for personal and professional issues. They go the extra mile. They make sure everybody knows that. They earn the team’s trust.

– A leader makes everyone aware that teamwork is not negotiable. Without a cooperative team, there’s no leader. Lone wolves kill the growing/changing organization. Growth happens only WITH the team, not at their expense.

– Leaders communicate all the time, they don’t keep things to themselves, they are honest with their team. They share good and bad. They share the why’s. They trust their team. Trust precedes process and it is the only path to grow at a scale.

– Leaders learn fast and learn mostly from their team. The team has the most valuable knowledge a leader can get, it doesn’t come from books, blog posts, degrees or mentors. The team gets the real shit from the front line. A leader listens to their teams’ impressions and ideas, they explore them all and give feedback. Leaders generate a culture of idea generation and idea sharing. Leaders stay away from guru preaching.

– It’s important to understand people’s personal and professional ultimate goals and motivations. Leaders spend time asking them on their one on ones and they think about them. They write them down. Everybody is playing the movie of their lives, a leader must find out which one is it, they make sure each team member keeps being the hero of their movie.

– Leaders always lead by example, not by title. They show real bravery. Leaders go first to battle. They call leads and close customers. They apologize to customers when the company screws up. They take the shit first. They don’t leave anyone behind. They don’t show their rank, their status, their difference, their pedigree. Startups are flat meritocratic organizations. Leaders must understand well the company goals and they put them first, they are prepared to step down, or step aside, or leave the company at any moment if needed. Company goals are what matters most. Leaders show this to everyone. Company/collective oriented leaders always thrive.

– Leaders celebrate every victory. They visibly show the pain of every defeat. They take every opportunity to show they care. They analyze why/what/how and find out always changes to be made. Then they go and make the changes. They change anything or everything, but never keep on doing what doesn’t work. They shake the whole company inside out before/when goals are not met.

– Leaders set goals that are both ambitious and achievable. They work along the team to make sure they meet the goals. They are flexible when the goals are set wrong. They are implacable when goals are not met.

Most people will never be a leader. It takes time and patience, it takes survival skills, it takes real personal strength. But after committing to all these things, things start to work. Leaders are such when and only when they brought teams to make things work, nobody becomes a leader just by trying it. True leaders make sure they don’t leave the boat until things work (as they will work, ultimately!). They don’t leave the job undone.

– Bernat Farrero CEO at Itnig