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 *

E.

Essential Podcasts for Entrepreneurs & Tech Lovers

Podcasts are a great way to discover new subjects and new people. Whether you are a tech lover or an entrepreneur, bellow you will discover podcasts for entrepreneurs you should – without a doubt – listen to. 

Itnig Podcast with César Migueláñez, Bernat Farrero and Carlos Pierre
Itnig Podcast with César Migueláñez, Bernat Farrero and Carlos Pierre

« Masters of Scale » 

with Reid Hoffman

The host: Reid Hoffman decides to turn to the corporate world instead of pursuing a university carrier. He worked for Apple, Fujitsu for then starting his own business: SocialNet and left it in 2000 to join Confinity. Confinity gives life to Paypal after fusionning. Finally, in 2003, Hoffman co-founds LinkedIn. He is Master of Scale’s host. 

About: The podcast welcomes some of the greatest entrepreneurs. You will discover throughout the talk how they managed to take their companies from 0 to a lot of zeros. You can listen to Masters of Scale’s special guests like Mark Zuckerberg (Facebook), Selina Tobaccowalla (Evite), Brian Chesky (Airbnb) or Nancy Lublin (Crisis Text Line). Must-hear: one of the top tech podcasts for entrepreneurs.

Listen to the podcast: On their website, Apple Podcasts, Spotify and Youtube

The Team: Reid Hoffman, June Cohen, Deron Triff and Jai Punjabi

« Rocket » 

with Christina Warren, Simone de Rochefort and Brianna Wu

The hosts: Christina Warren started as a Freelance Writer. Then, she worked at Mashable as a Senior Tech Analyst and Tech Correspondent and ended the journey at Microsoft as a Senior Cloud Developer Advocate. About Simone de Rochefort, she is  Senior Video Producer and co-host of The Polygon Show. Brianna Wu founded her first startup at the age of 19, Giant Spacekat. She was Head of Development at the time. She is now running for US Congress. 

About: In this podcast, you will discover three passionate women and their “geek conversation” as they like to call it.  No guest speakers, but you will be able to listen to a panel of tech subjects from Apple to Comics, you will not be disappointed. 

Listen to the podcast: On their website, Apple Podcasts, Overcast, Pocket Casts, Spotify and Castro

« This week in Startups »

with Jason Calacanis

The host: Jason Calacanis starts as an internet industry journalist in New-York. In 2003, he co-founded Weblogs, Inc and then a few years later he joined Sequoia Capital, launched the web directory Mahalo. He also founded ThisWeekIn.com. Furthermore, he created This Week in Startups podcast and a startup named Inside.com. Finally, he was part of the creation of the Sydney Launch Festival. 

About: Either you are looking to start your own company, or you are a successful entrepreneur, or you just love technology, this podcast will give you a peek to the entrepreneurship world. You will hear stories of all kinds! On his website, you will also find his events and some research on transportation, healthcare and more. This is one is part of the tech podcasts for entrepreneurs not to be missed.

Listen to the podcast: Apple Podcasts, Youtube, SoundCloud and RSS Feed

You can also subscribe to their newsletter in order to receive episodes directly. 

The Team: Jason Calacanis, Jacqui Deegan, and Tony Agapiou

« Recode / Decode » 

with Kara Swisher

The host: Kara Swisher is an American journalist specialized in the technology industry. She first started to work for an alternative newspaper in Washington for then working for the Washington Post. She wrote articles for the Wall Street Journal and New York Times and wrote her own books. Finally, in 2014, she created Recode, a website dedicated to the latest technology news. In 2015, she initiates Recode Decode. 

About: The weekly podcast welcomes tech experts and great entrepreneurs. They review how they got there, what’s on their mind about the current industry and what they would improve or create. Her recent guests were Elon Musk (Tesla CEO), former Secretary of State Hillary Clinton and Mark Zuckerberg. 

Listen to the podcast: Apple Podcasts, Google Podcasts, Spotify, Stitcher, and TuneIn

« K Fund PodKast »

with Jaime Novoa

The host: Jaime Novoa’s background is quite diverse. He is a writer and an investor, but he also worked in data analysis and social media analysis. In 2014, he founded Novobrief, a newsletter for startups. Then, in 2016, he becomes an investor at K Fund and he founds, in 2019, Dealflow, a weekly tech newsletter. 

About: The podcast discusses startups, entrepreneurs and Venture Capital. You will discover enterprises and their story. From data science, unicorns or digital platforms, you sure will find more than one interesting podcast. 

Listen to the podcast: On their website and Soundcloud

« Clockwise »

with Dan Moren and Mikah Sargent

The hosts: Dan Moren is an active author and writer as well as podcaster. He was a Senior Editor at Macworld. Today, he hosts two podcast shows: Clockwise and The Rebound. As for Mikah Sargent, he started as a Website Designer and Developer for then switching as a Senior Editor at Newsy. He now hosts few podcasts such as Clockwise on Replay FM or on TWiT.tv. 

About: The weekly podcast discusses technology and welcomes each time 2 special guests. For 30 minutes, they address 4 topics where all four speakers get to elaborate on the matter, highlight the issues and expose their thoughts. 

Listen to the podcast: On their website, Apple Podcasts, Overcast, Pocket Casts, Spotify and Castro

« Itnig Podcast»

with Bernat Farrero

The host: Bernat Farrero starts his career as a Developer. In 2009, he founded Itnig, a startup ecosystem that organizes entrepreneurship events. They also have a coworking for startups, a podcast and a fund for early-stage projects. Furthermore, he is a Founder of Factorial, Quipu and Camaloon. He is also a Board Member of Playfullbet, GymForLess and Parkimeter. Finally, he hosts Itnig’s weekly Podcast. 

About: The podcast welcomes every week a new guest. If you wish to learn from successful entrepreneurs, you are on the right platform. The discussions turn around Technology and its industry. You will come across guests like Carlos Pierre (Badi), Vincent Rosso (BlaBlaCar) or Oscar Pierre (Glovo).

Listen to the podcast: Youtube, Spotify, Apple Podcasts, Ivoox, and Google Podcasts

You can subscribe to their newsletter if you want to receive the podcast’s link every Monday. 

Whether you are at an early stage of your project, an investor or you are just curious, these podcasts for entrepreneurs give you the opportunity to be updated on tech and business news. Also, you get to learn from successful international entrepreneurs, which can definitely be very useful for your business.