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 *

B.

Buy an island & get to know the IPO pipeline

This is the Newsletter shared on the 2nd of September. If you wish to receive newsletter faster, you can subscribe here: https://itnig.net/newsletter

Hi there,

Coming back from holidays is tough. What if I told you that you can buy an island? This project allows you to even get the citizenship of the island if the crowdfunding succeeds. Interesting, huh?

If you are lost getting to know which companies are planning on doing an IPO, don’t worry, the list is not long. Ahead of WeWork, Cloudfare, and SmileDirectClub, the pipeline for IPOs is quite thin! In this sense, we just got to know that Ping, the online ID management company has filed an S-1 form indicating that it plans to raise up to $100 million in an IPO on the Nasdaq .

By the way, you may want to add some brilliant networking conversation starters as at Itnig we will host several events for techies and entrepreneurs. If you are interested in organising one, please, write me an email!

– Itnig’s team

Podcast #104: Digital Signature with Juan Zamora, CEO at Signaturit

In this week’s podcast, Juan Zamora from Signaturit shares with us who digital signature works. The Barcelona-based startup counts now with over 100 employees dedicated mainly to engineer a product that reduces the hustle of traditional contract signing.

Bernat and Jordi chatted with him to further understand how the technology works. They also took this opportunity to announce the new collaboration between Signaturit and Factorial.

This week’s podcast is sponsored by Codeworks, the most intense programming bootcamp in Europe in which you will learn JavaStipt and you will become a full-stack developer just 3 months!

Use the code ITNIG19 before the end of 2019 to get a 5% discount saving up to 500€. Choose the upfront payment plan, and benefit from the discount!

 

New funding for startups 

Random tech news Satellite Antenna on Twitter Twemoji 12.0

Events recommended 🎫

Find out about more vacancies at itnig.net/jobs.