3 Good Starting Points for Designers Who Want to Code
Yup! This is another article about why you should learn to code (if at some point in your design career you were doubtful…or not) Well, in my opinion, nothing is necessary as long as you are aware of the knowledge that you have as well as you are good with it, but perhaps… trying to learn a little bit about code doesn’t mean you need to become an expert coder.
In my experience, I started slowly with code because everything is letters, terms you need to memorize, and of course all of that can be a DISASTER for a designer. Therefore, if you can see what code looks like and at the very same time look at it visually, you will figure it out, because all that you have been writing is right there.
My experience as a designer is all about visuals and how we are looking our design at the very same moment.
So, all right, we will take it slowly… and instead of me trying to convince you to learn all about it, I put together in order to help you start a few basics apps/websites that throughout my years working with both Design and Code, I have been looking into and they are actually very helpful for designers along with some recommendations. I truly hope it will benefit you somehow.
So the first step! HTML & CSS
We can start with the bare-bones, HTML and CSS, HTML (HyperText Markup Language) is the architecture of the site that tells the browser what to show, and CSS, or Cascading Style Sheets, is the code that tells the browser how to show. CSS is used to change the look and feel of websites.
A really good example is if HTML are the bones of a person, and CSS is the skin, the color of their eyes, hair, body shape, etc. is all that we can see in a person. This language is very simple and helps to structure the code.
For this one, I recommend this app, called CSS Peeper
1. CSS Peeper
How do you get all of that without digging in a code inspector of a browser if you don’t know much about code? Which is the correct style?
As a designer, it is so much easier to find an element and its styles on a page than it is with the built-in “inspect element” tool. You don’t have to sift through the developer view to see attributes anymore. The design is well-done as well. CSS Peeper will help you visually to understand how components are built.
2. Bootstrap
Bootstrap in a simple way, is a framework used quickly form to build websites, it contains HTML, CSS, and Javascript libraries that can help programmers when they need a specific process, functions, even design system, that other programmers have already written so that everyone can use them without writing them again and again and again...
If your development team is using a framework, please take your time to review it when you are starting your project from type sizes, grid values, and in each new scenario then you should know the default values of this framework’s styles and the options available when making changes in them.
Shoelace.io will let you understand in an interactive way how the grid works for each breakpoint that the window has, and on the right side, the code changes when you are moving each column.
The structure of the pages is achieved using columns or ‘divs’. When your browser window gets smaller, the columns cascade beneath one another to make the page work the way your window is and doesn’t pile up like a monster of layers.
And last but not less important…
3. Get Mimo
If you really think that I’m talking in Chinese, I’ll recommend starting with small steps, and don’t take a lot of pressure on it, remember that understanding and learning new things are scary, and even more if you are learning it alone.
I’ll recommend this app that would help you learn to code in an easy and kind of Duolingo form with exercises and a reeeeaaaally visually clean structure to see your goals.
So it is for me?
To know code or not, from my point of view, some advantages inside work projects are a better understanding of limits in our designs that can lead us to always having truthful communication with the team. Because it’s not that we must know everything about the entire project, besides understanding and acknowledging that each one of the team members has different perspectives/experiences in the making.
Another advantage that I see often is the opportunity to learn from each other because at times when solutions are unable in one approach an open brainstorm can help create another strategy that can be usable, manageable, and even in a better way than the first one.
Don’t be afraid and start taking those small steps. Being aware that all the time you are investing in learning code is actually time that you are building your designs in the future, meanwhile, building empathy between the team.
You are the only one that decides which step are you taking, be proud that is a good step. ✨
Have doubts?
Don’t you know where to begin? Which type of code do I start first? Let’s connect! I’d love to hear your feedback or questions in response ⬇️.
