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 *

W.

WHY YOU SHOULD CONSIDER A COWORKING SPACE FOR YOUR STARTUP

Your home office or a coffee shop won’t be enough!

Yes, we all know the tale about the guy who starts a small company in their garage or basement, has a brilliant idea and becomes the next Steve Jobs. It’s true, most successes have very humble beginnings. It’s also true that not all garage or basements are going to magically get you a successful business. They might work in the very (veeeery) early stages of your startup, but you can’t always meet a client at coffee shops, not to say your basement. 

A great, if not the best, solution is to find a coworking space. Coworking spaces have become very popular all over the world, either for freelancers or entrepreneurs and startups. 

Coworking spaces are not just big rooms with desks and chairs with high-speed wifi. The areas are made to be exciting places to work and improve your productivity.

As a startup, you need to find resources fast and affordably. More importantly, you’ll need motivation. This is why you should consider a coworking space. 

Here are some basic but amazing benefits from coworking spaces:

Community

Joining a coworking means joining a community.  Being surrounded by other entrepreneurs, freelancers and talented independent people is without doubt a one of the best features of a coworking.

Motivation is key when starting a new project and trying to develop your own business. The road will get though and you’ll appreciate other entrepreneurs’ vision and support! Other workers’ feedback can be very useful to improve your service/product before trying to sell it to the world. 

Networking, networking and…networking!

As a startup, you’ll be looking for networking opportunities. Most coworkings host professionals from different kind of industries, which can open up many doors for you and your business. Not all coworking spaces are about networking, some of them prefer to have a quiet individual work environment, so as a startup you have to make sure to choose a coworking with networking opportunities.

At Itnig, for example, we love to share ideas and support other entrepreneurs. Don’t be shy, some of the other coworking tenants can bring great business opportunities, or even become new clients (and friends)! 

Budgetfriendly

As entrepreneurs (or people for that matter) it’s very important to understand the importance of money, more specifically: budget. Tight budgets call for smart spending. Coworkings are usually budget friendly, most of them offer different membership options depending on your startup’s needs and budget.

Amenities 

A coworking provides you with everything needed to be as productive as possible. High speed internet connection, printers, conference rooms and COFFEE. Some coworkings even plan afterwork activities and events to make it all more fun! As a startup, a coworking space is your best chance at having all the basic amenities but also the fun ones, like a ping pong table or a nice chill out terrace. 

Happy clients

As you grow and have more clients, it can get messy if you keep meeting them in coffee shops. Coworking spaces offer office services such as conference rooms. That way your meetings will be more professional and comfortable for everyone. 

Barcelona is a city full of coworkings of every kind! Our Itnig community keeps growing, we now have up to 20 startups such as Andjoy, Classlife, Factorial and Freeverse, all under the same roof. We have afterwork activities and we also plan different kinds of events open to anyone interested in marketing, tech stuff, entrepreneurship and design. Our space is about 2.100m2 with up to 800m2 of conference rooms, events space, ping pong and fun activities. 

There’s also  wifi, endless coffee and talented people. Join us!