So there I go into a new project in FreeCodeCamp, spend some time thinking, coding, struggling and finally project finished, I can’t be more happy, well, until I compare my project with others people’s projects, there’s that creative girl who made a colorful portfolio with draws and fancy buttons, an art genius who made a realistic calculator and so on, while my projects are just some buttons, centered text, and some color combination that I got from a color pick webpage, I just feel bad my projects aren’t even half decent.
This site is fantastic but it doesn’t teach you any design concepts. How can I learn some design for web apps? I just want to make at least decent things.
Edit 1: thanks guys some of your answer are very helpful, you are all nice people
Look at amazon.com - their design is pretty awful - yahoo, cnn, constantly changing but pretty awful as well. I’m of the belief that function matters more than form and as long as people can easily use and find your web site - that’s what matters.
Developers are back end focused, Designers are front end focused - decide which matters more to you
It probably won’t be helpful for you to compare yourself to people who are designers (I know this is hard). Developers and designers can overlap in skill set, but the focus is still different. It would be helpful for you to get some knowledge on basic design concepts and skills like typography, color, grid systems, etc if you are concerned with the aesthetics of your projects, which I feel is a totally valid concern.
Check out HackDesign for lessons. You can also look for some intro to design tutorials (plenty of free ones). Once you have the basics down you’ll be able to pinpoint more what you need work on and should improve in that area. Hope this helps!
I’d say learning good design (both visual and functional) is something that takes time really. And patience (which I’m sure you’re already aware of learning javascript).
I agree that this site is lacking with css properties, like animation, transforms, position, as well design what looks good what looks bad. I think getting a grip of what looks good / bad is really experience, and tinkering with the dev tools to look at the css behind, what causes this, what causes that.
I too would like to find some video courses, or books to help me.
I’ve read
For me at least to design a good layout I have to draw boxes out and on paper to get an idea of where I’d want to puts and what changes before I start to code things out.
I’d also say there are some general rules as minimalism like limiting yourself to 2 fonts. Limiting what color’s and color contrast you choose. Certain rules of font-size. Dividing things into modules with css classes.
Regards, hopefully we can both find some site / book to improve quicker
To be fair, there are a lot of people on here who are really experienced, and you will find skill sets all over the map. I have seen people on here using complex javascipt frameworks that aren’t even taught in FCC. So don’t use others to judge because some may be professionals in real life, while a lot of us are still learning new concepts.
Also I tended to make bad designs until I learned bootstrap, which is covered in FCC. Plain, basic bootstrap looks nice and presentable. Then you can add fonts and icons and nice colors to jazz it up. I like to look at color schemes from random news sites on the web. A lot have nice ‘flat’ design that is easy to mimic and modify. Press F12, and look at their CSS fonts and colors in the developer panel. Experiment with it (and fail a lot, too) That’s how you learn. Also look up ‘flat design’ for more ideas.
Finally, development, which we learn here, is another universe entirely from design. There are bootcamps and coding schools that teach only design because it can get pretty involved. I’m not sure trying to learn both at the same time is beneficial.
I feel your pain. I also have no eye for design, and I really dislike CSS. It almost feels like your post was written by me
Check this two part article on medium. It really helped me to go from “complete garbage” to “somewhat tolerable” design for my projects (they probably still looks like garbage, but who cares, it’s my garbage ).
And don’t compare yourself to others. Compare yourself only to the person you were yesterday. If today you are better than you were yesterday, you are on the right track (haters gona hate anyway).
Don’t beat yourself up by calling your projects garbage. Some of us have been at this for a while so we’ve had a bit of a head start. I’ve been designing websites as a hobby for years and am going through FCC to finally learn Javascript. You’re new. You seem dedicated. You’re only going to get better if you keep at it.
These are some great resources for learning design along with development:
From Zero to Front-End Hero - Part 2 - This part is mostly JS, but it also covers the DOM, which will come in handy, marrying design and development. (Free)
Brad Hussey’s Ultimate Web Designer & Developer Course - I’ve been doing this course to brush up since I’ve been out of the game for a while. It’s not free but it goes on sale a lot and there are Udemy coupons all over the web. Brad covers a bit of design theory and walks you through going through everything from picking out styles, colors and fonts to putting it all together w/ HTML & CSS to making it all dynamic w/ JS & PHP. (Paid)
The Odin Project - Has two sections on HTML/CSS, one that covers the basics, which it sounds like you know, and one that covers design principles using more advanced HTML/CSS techniques. (Free)
You don’t have to do all of these. Just pick one or two (or a book, like Duckett’s, if that’s more your style) and work your way through it. You’ll come out the other end with enough knowledge to produce a professional looking (and functioning) product.
And I second the suggestion that if you’re not interested in being a designer, it might be enough to just get familiar with Bootstrap which you can use to style just about any web app, as far as I’ve experienced. The CSS is already styled for you. You just have to pick which options to use where.
Hey, if your new to coding, it is natural that your design seem like garbage. But remember that as long as you see that your designs are “garbage”, you will learn it as you get more experience. I would suggest you have a look at the many links that people posted, keep coding and you will gradually become better.
It’s worth reminding yourself that development and design are different skills. You can learn them both, but you do not need to learn them at the same time.
FCC focusses on code, so get to the point where your projects pass the user stories and you will know you are making progress.
If you like, you can always go back later and imagine that you’re starting ‘Free Design Camp’ using the resources linked to above
I concur with all the above experiences and advice.
I find it much easier to write code (development logic) rather than design (CSS, PSD, graphics, etc).
Going through the FCC course, the most challenging aspect for me has been CSS (or rather good CSS) (I know, CSS is supposed to be easier than JavaScript, but I find it tougher). Getting code right (and good) seems to take fewer tries than gettinig whatever I am working on to look good. The CSS and design part seem to take 80% of the time I spend on a project.
And unfortunately as humans, we tend to judge books by their covers (including other areas of life). So even though under the hood stuff is awesome, performant, elegant, etc. people don’t really notice it and base their judgement on how it looks on the outside - i.e. fancy graphics, animations, javascript widgets, etc.
The only thing I can suggest, as others have, is to treat it as 2 different skill sets - i.e. are you a designer or developer? (If you put in enough time into both, then you’d probably become a good Developer and Designer. In my experience of interacting with software professionals (online and offline), I have found relatively few people that are both.
Before beginning FCC, I had always thought backend and pure development work was harder and front-end stuff was easier. I was SO WRONG! Being a good front-end developer is quite challenging and has its own unique challenges.
The other thing I would suggest is not to worry about things being bad in the beginning. Very few things in life are perfect on the first go. Why should designing things be any different?
As you (we FCC campers) spend more time and get more practice with the skills we are weak at, we too will someday hopefully look back and marvel at the journey from beginner to accomplished.
It’s because you aren’t constant with your challenges, if you don’t work daily in it, you will forget all your studies and you won’t be able to use what you’re practiced.
I agree with a lot that has been said here, especially that design is just as much about experience as programming is. Just wanted to add my 2 cents - I used to work with HTML and CSS a lot (here to learn JS) in a job, basically styling template websites with a lot of design freedom as the company was small and there were no designers yet at that time. I came in with no real experience, and believe me, my first ‘designs’ were c-r-a-p! They used to get someone else to finish the site, to make it look ok Not a great feeling obviously!
But then when this other person was done with the site, it would actually look better. I would try to copy some of the things this person did. Maybe a nice looking button, or a subtle box-shadow, or a nice looking font. Slowly but surely my sites started looking better.
You mention how some other people have good looking projects. Dont get frustrated, be inspired, copy them! As a beginner it’s ok to be a copycat. Try out that button, use the same font, etc. Play around with them (bigger/smaller, bolder/lighter, etc) and add them to your bag of tricks. After a while you will know more and more what ‘works’ in terms of design.
Some general tips:
Custom fonts are your friend. Google has a lot of free fonts you can use that look way better than the old Times New Roman or Arial. They are also really easy to load (no @font-face hassle).
Align stuff. If you have two images next to each other, make them the same height. If you have text under a few images, make the text just as wide as the images together. Same thing for spaces between elements. Put your invisible ruler to work! It may seem boring at first, but the consistency really works.
Stockphoto’s can make your site look more professional, but they are usually expensive. Fortunately there’s free alternatives, like Pixabay
You can spice it up with some icons, you don’t have to be a designer to add these. Bootstrap has a lot of icons built-in, or you can load the FontAwesome CSS which has even more.
In general, don’t get discouraged. Everyone who has ever been good in something started out being crappy And even if design isn’t your thing in the end, you can still be a great front-end developer.
Not really what you’re looking for, but I found this, which seems like prereq for everybody making anything: https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101 . A cursory five-minute Googling didn’t turn up what you’re after–some kind of primer on what constitutes good taste, the basic principles of visual design–but I’m sure it’s out there.
By the way, I make no apologies for making bad design right now. I know from enough school essays that if I start by tweaking fonts, colors, and alignments, I can go on for hours, and it’s better to get the “content” in place first and then style it. And even once I finish a project and take some time to go from completely unstyled to more presentable, I try not to take too long, as I worry about the slow pace that I’m going through FCC. I figure once I’m done and am applying to jobs, I can take the time to “refactor” everything, and that’s the time to make things clever and original and drop-dead gorgeous (after all, I can apply knowledge gained on later chapters to earlier projects).
It’s good to know when your designs are crap. If you know that you are way ahead of people who build ugly websites and don’t know it.
What you need to look at is some design theory. A great book on the subject is “The Non-Designer’s Design Book” (4th Edition) Design and Typographic Principles for the Visual Novice by Robin Williams ISBN#0133966151. This book has been updated and reprinted several times over the last 10 plus years and your library is likely to have it.
Robin’s web design books used to be really good but they haven’t been updated in a decade and use tables so don’t bother with those.
Being a designer is a totally different skill set than coding but even a little bit of design theory should be able to help you.
If you just google “The Elements of Design” (Line, Shape, Direction, Size, Texture, Color, Value) and “The Principles of Design” (Balance, Gradation, Repetition, Contract, Harmony, Dominance, Unity) you will find some really great articles that can get you on your way.
You’re right - ‘backend developers’ just have clients looking over their shoulder saying ‘can’t you make it do this, and it shouldn’t really take you more than 10 or 20 minutes to do it right’?
Not a great feeling obviously!