13 design skills that programmers should know

Source: duetapp Source: Sugar Balloon (@ Easy ). Welcome to the technical translation team.

I am a programmer, not a designer. I have not been trained by a designer. I have not read any design books. Even so, during years of development, I learned how to make my website and applications look very professional.

Below is what I think people with a technical background need to pay attention to when they want to be good at design:

Develop your aesthetic

... My favorite websites are:

• Awwwards.com-more sites on the daily and monthly lists
• Unmatchedstyle.com-comments are useful
• Dribbble.com (easy Note: I often go there and many Nb apps are designed on top.
• Patterntap.com

Spend more time

I spent the same design time as coding when developing apps and websites. Good design takes time to complete.

When I started the project, I generally had a basic idea about the overall layout. When I have an idea, I design and program at the same time. I will design those details in the browser while developing detailed functions. This may not be the most efficient, but it allows me to perform thousands of small iterations on the project at work.

 

Steal

The secret created is to know how to hide the source of information-Einstein

Good artist copy, great artist steal. -Pablo Picasso

This is not a new suggestion, but it may be the most important of these skills. At the beginning, you didn't have the skills to create attractive designs. This means that you need to imitate well-known designers or make them deeply influenced by their works.

Below are my steps: I will search for those similar to my basic ideas, but well-designed web applications. I will find the elements that I think will be useful in my app and recreate it in my app. Do not copy HTML or CSS directly, so you cannot learn anything. Only learning about vision and implementing it with your own code. When you have experience, you can start to create your own things.

 

Forgot Photoshop

 

If you don't know how to use PS like me, use your code to design it directly in the browser. I only use the PS adjustment icon and send it to the app. (Easy Note: Recently, sketch is quite popular. Many designers have switched from PS to sketch.

Proficient in CSS

CSS proficiency is required for direct design in browsers .... Below are some resources:

• MDN-Mozilla Developer Center, I use it to do many things, not just CSS
• Less
• Sass

Front-end framework is your good friend

 

It is difficult to create a website or app from scratch, especially for new users. So now I use the front-end framework. The most famous ones are foundation and bootstrap, and there are many other options.

• Foundation-my favorite front-end framework
• Bootstrap-the most popular
• Pure-never used, but looks cool
• Polymer-Google material design is part of the full platform implementation, cool interaction details (this line is easy to add, gfwed

Icon unexpected importance

 

It took me a long time to realize how important icons are for a good design, which is not that obvious. The icon improves navigation, adds colors, and delivers emotion. Icons may not be able to design Nb, but a bunch of bad icons will definitely make your design sb.

I use icon fonts or SVG icons based on different projects. Icon fonts is very useful, especially when you design it in a browser. Icon fonts makes it easy to add an icon to an element. You only need to add a class.

Another reason why the icon fonts algorithm works well is that you can change the size of these icons just like changing the font size. The same is true for color.

Below are some of my favorite ICON resources

• Themify icons
• Icomoon (easy Note: icomoon is my favorite. You can select icons to automatically generate CSS and Sprite, and even directly reference them. Severe recommendation.
• Freepik
• Glyphicons

Iteration, very important

Attempts and failures are very valuable tools. A lot of attempts seem uncomfortable. They don't work with your design. But it does not matter. When each failure occurs, roll back to the previous step and continue. I have iterated thousands of times before I confirmed duet's design.

Focus on availability and ease of use

A good design is not just what the app looks like. It also involves the functionality of the app, which is easy to use. Even if you don't need professional training, a little bit of common sense will benefit you from building available apps.

You only need one thing to ensure the availability of the app-to ensure that you are actually using the app you developed. It is often used. If something makes you feel uncomfortable, fix it. Believe in your self-consciousness. If a process is unclear or complex, you can intuitively feel it. Are there too many steps? Is a function hard to find? Is it because common functions are used too many times? Or do you sometimes forget where some features are? No matter where the availability problem is, as long as you keep using your app, I believe you can find it and then you will fix it.

Obviously, this process is imperfect. You cannot represent the way every other user uses it, but my experience is that most problems can be found through this method ....

 

Typographical layout is more important than you think

 

Easy: Skip this section because it is related to English typographical layout. Add two open-source Chinese typographical projects:

• Typo.css
• Yue.css

 

Select the correct image and Image Library

... Several high-quality free libraries

• Im creator
• PIC Jumbo
• Gratisography
• Super famous
• Unsplash

 

Important feedback

I can't deny that I did very poorly in this regard, but I realized the importance of feedback. Most of what I did was not provided feedback before the release. To get feedback during the testing phase, I began to focus on these resources:

• Criticue
• Reddit design critiques

 

Last move

If you don't know how to do it-it's always good to be simple. A large amount of white space, slightly shadow, and so on. Being good at design is a long process that will take you a lot of time. It may not be the method you like, but once you master it, you will obviously improve.