itnig’s new office: Party & Work with us

Last Friday we celebrated the opening of our new office space on the third floor of Alaba 61 with friends and family. With the music and atmosphere by Technoborn and a drink & food sponsoring by iKoula we were ready to go! 162 people made their way to our office and partied the night away! Here you’ll see some impressions and short fragments of the stories of our guests (in Spanish):


https://www.youtube.com/watch?v=Pb_Q-jIayfA

In this podcast #18 we present a crowd-sourced podcast to you, asking our guests what they do, how they got there and what they associate with itnig.

What is itnig for you? A cultivating space for new idea to take form, friends, Avantguard, a company in which you can grow, learn & have fun and even a mix of knowledge and good practices that push you to find a good solution and accompanies you.

What is itnig for you and how can you contribute to our startups?

Join us: itnig.net/jobs

We will talk with Eloi & Arol from Codeworks about whether their 3 months intensive coding bootcamp can be an alternatives to universities. if you want to become a developer a university course might be too engineering focused — can a bootcamp be a solution?

Eliza is spending her day focussed on logistics, transporting online orders not yet with drones. Oriol Blanc is interrogated by Bernat on the relationship of him being in a company and the police stopping by to check if everything is in order. He also tells us a bit more about his past venture Gossip, a social app that grew and was dropped very quickly. Next up, Jaume Freixa from iKoula, a sponsor for the night, a company for cloud hosting dedicated to small and medium businesses. Jaume used to work with us many years ago and now comes back with an interesting solution to startups like ours.

Victor Martinez, another ex Camalooner, is confronted with the topic of our last podcast talking about recruitment. He was the one who took a technical test asked of him badly and perceived it as having to give free work to the recruiting company.

Xavi & Matthias, both in two open source corporate businesses, discuss what it is like to work in such an environment. Matthias will also mention his responsibility as gatekeeper, contributing himself to the Linux kernel and also checking other contributor’s branches. But what is it like in a working environment, where productivity is not measured, even though they follow agile methodology with a marked production rhythm?

Hear from Alex, who used to work at Playfulbet, about his use of microservices o monolithic app. You’ll also meet Aida Nogues, who started as artist hunter at Camaloon and talks about her days now as UX/UI Designer at Badi. She spends her time with user testing to validate features, flows or wireframes of the product they are developing or even UI and the design of the interface.

Lastly you’ll see Bernat interviewing Adria & Andre, one of our first Sales Ninjas in Camaloon, who came to celebrate with us. They are now dedicated to selling Saas for hospitals or travels for students in Switzerland.

If you want to join us in this open environment, nurtured by smart people, many ideas and even more discussions, take a look at our job board: itnig.net/jobs

Learning the Design to Code process

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.