Designer, desperately looking for
Scalability design tools
I think we can all agree that 2015 will be remembered as the “New design tool” year.
About 34.7% (more than a third!) Medium articles right now are about design tools.
(Completely made up statistic to prove my point.)
But we are still using static graphic tool to create a UI. I don’t understand why a developer writes three lines of code and instantly generates a fully scalable list using real data, while I am still here creating every item at a time, using stock photos…
Here is my toolbox:
- Sketch for wireframing, UI, even illustration sometimes;
- Illustrator & Photoshop for icon design, illustration, photo composition, everything I am not comfortable doing with Sketch.
- Invision for simple wireframe prototypes
- Principle & After Effect for interactive complex prototypes. (More to come about Principle once the software is publicly available)
- Zeplin to build a bridge between designers and front-end developers
But there is still something missing between Sketch and Zeplin
When building a product from an idea, you go through a lot of stages.
Once the conceptualisation and wireframing are over, it is time to get dirty and create a visual identity.
Experiment with different layouts for the main pages, different visual styles. To find the one which will suit your users and make your product stand out from the competitors.
I call this, the creativity step. Sketch’s artboards are amazing for that. You can quickly iterate from one design to another, try all sorts of graphics, buttons, fonts and see all of them next to each others.
But then comes the next step: Production.
What I call production is when you have finalized your identity, found fonts, colors, layout, shapes, etc. And need to pixel-perfected design the 20 pages of your product. You know all the ones that come after the main page like settings, friends lists, profile, connect, splash screen, and others.
I usually, plug my headphones, launch a mixtape and it is on for the next days.
Here is my problem :
It takes an enormous amount of time, overloads my brain to design all of this starting from a one page identity.
Our current tools like Sketch are no help for production work.
Even worse, sometimes you did not create the identity, but you are asked to create the pages, create new features on an already existing project. Or you have to give the project to another fellow designer.
It is 2015 and I am still creating my guidelines switching between my tools and writing it down on a notepad…
Programming thinking
When someone ask me if I know how to code, I answer :
“No, but I kinda understand how it works”.
To me, it is very important to understand how the work I create will be produced in a technical way. Because it simply helps me design a realistic product and enhances my creativity.
I have been learning the basics of Javascript and PHP/Mysql logic, I speak HTML/CSS.
I work very closely to the developer team, to understand their part of the work. I know that an iPhone application is composed of different views, how data will go from one point to another, and how I need to graphically represent them.
This enables me to see a product as a hierarchized version of graphic elements.
Not having a blurred image of a code editor in my mind when I think about the development. But a clear vision of how every pieces will affect each other. Like a giant puzzle.
Atomic design thinking
When you start thinking with a coding approach, you start dissecting every graphic aspect of a product. I recently learned that it is called Atomic design.
Basically, every little object like a font, an image, an icon or a button are atoms.
They are grouped together to becomes molecules, like a list cell.
Several molecules become an organism, like a list.
And so on.
In the company I am working right now, the front-end developer always creates a giant guideline displaying every atoms, particles, organisms of the product.
I love to imagine that designing is like playing with lego blocks. (Maybe my friends were right when they said that design school is like kindergarten…).
But I need to integrate this process directly in a visual design tool, to increase the consistency and productivity of my work.
Imagine being able to create all your atoms, in a panel and just displaying them on the artboards. Without thinking of alignments, fonts, colors because evertyhing would be set right before.
Imagine being able to instantly export your atomic design guideline in one clic.
Matej Hrescak created this sketch plugin to quickly design organisms which is to me the first step. But I would like to bring it to the next level.
Here is how it would work
Once your visual identity is created, you would be able to create a specific file using only this identity. Removing all other useless information of the software.
First you set the colors, the main fonts, the shapes, padding, margin.
Then start creating more precise atoms like titles, text, buttons, fields.
Finally, play on the artboards, create some basic texts and shape layers:
Then right click on them to give the style you already set:
The rectangle automatically take the style, and you just have to edit the label. By setting the padding, the button would automatically resize while you change the label, and setting the marging would automatically align the element inside the artboard.
We could even set more comlpex organisms, such as NavBar, to keep consistency everywhere :
We could add a lot more features, complexity to automatically generate full screens, lists, cards by setting every element. Changing the design settings would automatically apply to every element. Testing different colours, fonts styles, etc.
Creating UI kits would be really easier and we could preset with native components.
3 years after starting designing mobile applications, I still never remember what is the exact height of a NavBar.
Also, while setting some elements, we could bring some usability tips about the colors used, the typography contrasts, create responsive elements really quickly, color palettes instantly and not care about pixel perfect alignment.
I know that you can already work with Text styles and create symbols on Sketch, smart objects on Photoshop, but it still is very limited.
How do you deal with that?
Thanks for reading!
If you enjoyed, hit the recommend button and follow me.
I would be more than happy to discuss about it,
drop me a mail : benjamin.bergerb@gmail.com
Or tweet : https://twitter.com/benjamin_berger
My info
