Yeah, I can code - but I suck at design. Help?

How do you get better at design?

Hello,
My name is Cameron Burkholder and I am a freelance front end developer. I have gone through the FCC curriculum and earned my Front End Development Certificate. I have also taken courses on Codecademy, SoloLearn, and Udemy all on how to code.

The biggest thing I struggle with, however, is design. I feel bad calling myself a developer when I nudge my clients toward Wordpress powered sites because I'm not confident in my own design ability. You can look at my site here. Its not awful, but if you look at Wordpress themes targeted to similar industries, they look much better.

I want to know how a successful front end developer combines typography, layout, spacing, color, and any other elements of design that I know are important (but I don't use well) to build beautiful sites. This weakness in design is kind of an achilles heel because I love to design things, I'm just not great at it. Are there any courses or tips you guys have on not only making sites with good content, but making sites that look really, really good?

It kind of gives me imposter syndrom haha.

Thanks,
- Cameron.

2 Likes

Donā€™t think of this as some deficiency in your programming skills. Focus your search on learning design skills. Youā€™re already a developer, what you want is to also become a designer. YouTube, Lynda.com, Treehouse, and other places all over the internet have graphic design courses for you.

1 Like

Thank you. Iā€™ll keep that in mind.

Sometimes I like to Google ā€œbest web designsā€ and take a look. If you like those or some WP design, see if you can duplicate it from scratch. Learn how it works and what you like about it. Sketch them out by hand. Then see if you can alter it and combine it with other ideas.

There are great design books out there. Of course, The Design of Everyday Things is a classic. Donā€™t Make Me Think is great for web UX.

As far as ā€œimposter syndromeā€, donā€™t let it bother you. Itā€™s easy to have in something as abstract and subjective as ā€œdesignā€ and even more so if youā€™re self taught. A lot of us feel the same way. In any creative art, the way to get over it is just to do it and learn. You have to be willing to make some mistakes. A lot of us here are in the same boat - I know that that is the part of all this Iā€™m worried about the most. So this summer Iā€™m going to reread this post and follow itā€™s advice.

Disclaimer: Iā€™m at Freecodecamp for the opposite reason. Iā€™m a designer and design lecturer trying to improve my development skills.

I agree with all the other posts here. Iā€™d also like to add a recommendation for the book ā€˜Stop Stealing Sheep and Learn how Type Worksā€™. It is a very good book that explains the rules of typography, and (according to Oliver Reichenstein of IA) 95% of web design is typography. Good type can make or break a website.

Aside from developing great typography skills, Iā€™d recommend reading and looking at everything you can that is associated with design. It takes time to become a good designer. Learn to critique everything you see. If you think some colours work well together ask yourself why. If they donā€™t work well, ask yourself why. If you donā€™t know why, do research to find out the design fundamentals and theories behind that topic. The book Universal Principles of Design is a good place to start for general design ā€˜rulesā€™.

Donā€™t feel bad if you think your design skills need work. Honestly, thatā€™s half the battle won! Bad designers donā€™t know that they need to improve their skills (Iā€™m a design lecturer at uni - trust me, I see this often!) Good designers know that they can improve and continually work to improve their skills.

Some other advice I give students who need help with their design skills is to study designs you like and see if you can re-create them. Even the great masters learned by copying others. It will give you a feel for appropriate composition, white space, balance, line-height (leading), line-length and dozens of other factors that influence a good design. Obviously donā€™t try to pass it off as your design in your folio, and donā€™t stick to copying one design style.

If you are still convinced your design skills are weak donā€™t despair. Just find a good designer to team up with. Most designers are terrible at web development so your skills will complement each other. Just make sure itā€™s a designer with some clue about web design and code because otherwise it can be a very painful experience (Iā€™ll save ranting about this topic for another day :slight_smile:)

I hope this helps!
cheers,
Ali

8 Likes

After your recommendation, I just bought this book on Amazonā€¦ $6.49 + free shipping.

Thatā€™s a bargain! I hope you enjoy it.
cheers,
Ali

To be perfectly honest, your design is really good. I donā€™t see what youā€™re worried about.

3 Likes

Let me clarify a few things.

Youā€™re worried about wrong things.

The coders, that are referred to as developers in the industry as developers, are completely different from designers.

Now, in Software Engineering, there is a concept of design which is completely different from the design youā€™re thinking about.

If you want to be a coder/developer, you gotta be more focused on architectural design - meaning, how data flows through your system, how code is structured, how various components of the system are abstracted to facilitate maximum code reuse - That is the design you gotta focus on the most.

In well standardized industry, there are two separate Job Profiles - UX Designers and UI Developers.

UI Developers are not supposed to come up with PSDs and color schemes and layout. That is a job of designer.
UI Developer witll take a Visual Design (VD) created by designer and breath life into that still picture.

So do not worry about your designs. As long as you know you can build any template you see on your own, youā€™re good to go as a developer.

Hope this helps.

5 Likes

Thank you so much for your advice! Iā€™ve been reading some design books, like the one you recommended, and others. Iā€™ve also taken time to try to recreate good designs, as well as analyze them. I havenā€™t made any modifications, but regardless of that, I was wondering if you would take a look at my site (https://www.burkholderwd.com) and give me some design feedback for the next version?

Hi Cameron,

Your site is looking very good! I think you have very good design skills for a developer. And as Adityaparab said in the previous comment, you are not expected to be a top designer. There are people who specialise in web design who can work with you so donā€™t feel you need to compete with people who have 5+ years of experience in design.

That said, I strongly believe good design skills benefit everyone and we can all improve with further work! With that in mind Iā€™ve written some feedback that could help improve small details of your design. I think by and large the design is very successful so take my feedback with a grain of salt and decide whether you want to make any changes based on it.

Typography: Be consistent and be readable. The body text in ā€˜Recent Worksā€™ is Fjalla One, whereas the body text in ā€˜Responsive and Aesthetically Pleasingā€™ is Cantarell. Cantarell is easier to read because of its body width (x-height and body width help with readability, especially on screen). The one thing the Fjalla One text has right is that it is bold. If you are reversing type (white on a darker colour) then setting it in bold helps with readability. Normal or light text can result in too little contrast visually. Looking down the rest of your page you use Fjalla One elsewhere, but it is hard to read there too. A general rule of typography is to use no more than two or three fonts in a document (sometimes you need more, but keeping it simple prevents a lot of problems). Use one font for headings, another complementary font for body text. Be consistent through the document. If you want to use a different font where you are currently using Fjalla One consider using Cantarell Bold. It will give you visual consistency with just a little bit of variety.

The blue colour theme gives a feeling of trust, reliability and tradition. I believe this works well with the site purpose. If you wanted to create a feeling of excitement, or being friendly and approachable, a different colour palette would be a good idea. You can always experiment with different colour palettes to see if anything else works for you.

Can you create rounded corners on the hover effects in the Recent Works section? On my Chrome browser the semi-opaque overlays are larger than the images beneath and donā€™t have the rounded corners of the images. The images themselves look nicely designed and work well with the overall site. The difference with the overlays looks jarring and it looks like you overlooked this detail. Resizing and rounding the corners may not be a big change, but a lot of design is in the details.

Consider using a larger and bolder font in your contact me button. It is your call to action and the purpose of the page. Currently it is visually less important than the tick image used to illustrate that section. Is this what you want? Donā€™t go overboard and make it too overwhelming, though! Itā€™s all about visual balance.

With your testimonials - can you link to the customerā€™s website? This would give them an added level of trust and authenticity.

While the colour palette is largely consistent, the lighter, brighter blue in ā€˜I deliver high-quality productsā€™ is a bit out of place considering you donā€™t seem to use it again on your page. If you are looking to include more colour variety for visual interest then try to echo that colour somewhere else in the webpage. If you are trying to keep to a strict and restrictive colour palette then look to the colours you are already using for headings and icons elsewhere and re-use them. I canā€™t advise you as to which approach is best. Youā€™ll need to try it and see which works better.

Are you missing a link in your menu? It looks like you have a period mark to the left of the about link.

I hope this helps!

cheers,
Ali

2 Likes

Thank you so so so much! I want appreciate all of the feedback. It is really helpful. Iā€™ll make sure to take your advice into considering as I touch up the website over the next few weeks.

No worries! Iā€™d love to see your site again once youā€™ve made some changes. You could even create different versions and do some A/B testing with your target demographic. This can really help when it comes to small but important decisions like what colour to make the buttons.

A really good site that shows the importance of A/B testing is Behave.org (formerly WhichTestWon).

cheers,
Ali