Ouch, that's the kind of subject that can put dogs fighting cats in a blink of an eye.
Or not.
After all, we're all humans with tastes, ideas, goals and journeys that can be similar in so many aspects that the differences that might exist are blurred away. Pixels unite us and different idioms allow us to say the same thing - black is #000000 - instead of creating a gap between us.
That's the beauty of the thing. Different people, personalities and skills, on different steps in a product's workflow, but always playing for the same team. Same office, same computers, same chairs, united by respect and beautiful interactions as similar peers.
In the end, it's not Developers vs. Designers but Developers and Designers - one talented team.
During the workshop, the design team had the time to explain how a design comes to life. How client's ideas are matured in such a way that even them start to think “this is it!” - yes, sometimes clients don't know exactly what they really want or need; ultimately the designers bring enlightenment to client's dreams.
So, it's not only colours, grids and layouts that make them proud to be designers. There's a complete process that starts in some words and sentences, passes through ideation and mockups, ending in the masterpiece of a design with all the love and sprinkles.
Which tools are used? Do you remember Notepad? Yes, some sort of text editor needs to be used to capture the words that define client's dreams. Then, there are more technical tools. Let's focus on the primary tool used by designers in our company - Sketch.
It's used to create vectorial designs with the simplicity as drawing something in a white paper sheet. Your canvas evolves to a grid based website template with ease and high fidelity. It's also web and app oriented, with the fastest image exportation with all bells and whistles needed to support every sort of screens and resolutions.
And it's so simple to use that any developer can open it and start collecting its first colours, distances and grid specifications in a couple of minutes.
"What about Adobe Illustrator or Photoshop?" you might ask. Well, they're still used in specific situations. For example, Photoshop is still the best tool to beautify and work with images. But, in terms of full creativity, Sketch is the number one.
And now the fun begins (designers swearing in the background).
Implementation, 3, 2, 1… go!
Whoa there cowboy… before you start typing your first lines of code you need to be well-prepared. I usually tell newcomers: "Don't start it if you don't know enough about the design so you can explain it to the colleague on your side."
Before anything, view and absorb the design. You must know the grid, the used typography, common elements such as headings, icons positioning and margins between elements.
Important questions can arise: What should this button trigger? Which page should be showed after the user does this or that? Which are the elements that are repeated throughout pages? Which are different? It's simple to understand why they are different?
Don't forget: If you have questions, ask your friendly design experts. They will spare you from suffering and buy you precious time. Then you can start your magic!
It's important that you know the web development's gospel, specially when creating outstanding web pages - which you always want to achieve, right?
Everything starts with a well-structured document achieved using HTML - your structure layer. Instead of diving into style or some kind of desired behaviour, create your page sections like header, footer, main content, paragraphs, lists and so on.
Do you want to know if your document is structured in a good way? Remove any styles from your way disabling CSS and style rules on your browser, checking if you still can see a beautiful document that you can read and understand.
Then comes your presentation layer using CSS to achieve the beautiful design that you're implementing. Try to use CSS to your benefit by remembering that it stands for Cascading Style Sheets, meaning that every rule will cascade gracefully throughout your document.
That's why it's so important to know your design well.
Remember those common elements such as typography and margins? Now it's the time to put them to practice by creating your styling rules, for example, to your headings that differ from size but use the same typeface, letter spacing and some margin to breath.
Try to not go more than 3 levels of control. For example, instead of doing something like #sidebar div p.sidebar span.left try to play with your markup and do something simple as #sidebar p span:first-child. Do you want to learn how to separate your code into folders and files? Learn with great masterpieces like Bootstrap. Check the source code and you'll learn so much. At the end, love your markup and put a smile on its face using some good old-fashion CSS.
Finally you have the behaviour layer, and regarding this specific phase and specifically the behaviour of elements on your page, JavaScript (JS) is definitely your best old-friend that stands firm while time passes. With it you can bring the interactivity that your page needs, calculate accurate info when users do some sort of choice, trigger events when submitting data, etc. If you need complex data structures and heavy calculations, maybe it's time to look to those marvellous JS frameworks.
If not, stick with your JS files, with functions named properly, like simple black boxes that you just need to set your input and you know for sure what will come from the other side of them.
Another simple tip is that now you can do lot animations and transitions with CSS3. Sometimes the answer can be just CSS and not JS. At last, try to organize your functions on properly-named files instead of keeping everything on a single huge file. Above all, be proud of your code.
Oh, the question was: where should I start?
Start with Test Driven Development! Yes, start with your test, code, have a green light and refactor when you can. Try to learn by watching some masterminds' screencasts that you can find in Code School, for instance. You'll learn so much from them.
This takes us back to the first topic, the one we ended up calling "developers and designers - different people, same team", remember?
Sometimes we can be "lost in Translation" (great movie, you should watch it as soon as possible, if you haven't yet) with different people speaking different languages. A developer might say:
I know my language. It's <div>, <a>, margin-left, var nav = $(".navbar"). Give me that design and I'll make it shine.
On the other end, a designer might say things like:
Those titles should have all the same colour and size. Can't you see the grid has 12 columns? It's not floating, it's 3 columns wide.
It was a really positive workshop, it was a great pleasure to do it and be able to share this with not only my dear colleagues but with you. I hope you can get some lessons or at least good vibes from these lines.
Based on an article originally written by Timóteo Bica for Imaginary Cloud
Found this article useful? You might like these ones too!
A group person who loves to communicate and learn. Calm and joyful. Seeks for the best solutions and follows the latest technologies. Open to advice.
People who read this post, also found these interesting:
.png)
