How do I go about learning site design?
I am re-learning CSS (why I am here 😀 ), but how do others learn the how to of designing the general look'n'feel of a site?
16 Replies
For lessons on YouTube, courses, or reading CSS documentation, I advise you to subscribe to Kevin’s channel, there is a lot of useful material there, or go to his website and take courses there
Thank you, I am subscribed to Kevin Youtube channel. My problem (I believe) is that he teaches you how-to achieve a layout using CSS, but what if you need help with the designing the layout?
Why layouts, there are a lot of tips on how to implement any element or other parts, and if you need the site layout itself, then this is more of a web design, Lunasi, or Photoshop or Figma will help you with this
Yes exactly, its more a design issue. The tools (such as Figma) will help me make the design once I have an idea of what I want to achieve, but I am just starring at a blank piece of paper for now.
You need to read on the Internet about the organization of the site, they give the structure and examples, the necessary and minimum and much more, this should help you
OK, I don't understand your reply (the site is currently blank), but thank you anyway
Do I understand you correctly, you don’t know what to fill it with?
That's correct. I am learning CSS so I layout the content, but Iam struggling with what the content should be to make it look nice.
Then you need to read something about design or at least about color combinations, I’ll say more, there are palettes with ready-made colors, or you can rely on your taste
Yes, that was the title of this post "learning site design?". I am looking for ideas of where I can learn from.
You can find examples by searching in your browser, or look at the online job exchange of designers, they often post their partfolios
Do your research into UI and Ix. Learn about the Gestalt principles, hierarchy, 4point spacing grid, rule of thirds.
I had an instructor who taught us an exercise to cut out magazines or graphics (although now you would just zoom way out on the computer ) and close your eyes part way so you just see the shapes , no details. Observe how the shapes fit together and the patterns of spacing in between. The use of light and dark, large and small, proximity and balance. Adjust your perspective when browsing through sites not as a consumer but as a creator. How and why did they collage and out the puzzle pieces together in that way. What does it achieve? Is it intuitive for the user flow? And always remember less is more.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
Antoine de Saint-Exupéry
I've never heard of the Gestalt principle (but thats's why I am a newbie to this) but great, that is some useful things to look at there. 😀
Online courses are better for beginners than videos because online courses have you using what you’ve learnt while videos can lead you circling around tutorial hell. Videos should be for those who already have a good foundation.
I have heard good things about Free Code Camp and I have used Codecademy’s 2 weeks of free pro to learn a few new things (Codecademy’s price is unappealing however).
Then you need to recognise that it will take you months and maybe years to be at a good level. CSS is unassuming but it’s extremely complex. Get a CodePen account and learn how to make small thing, like styling buttons, headers, heros, layouts, etc rather than jumping into making whole websites. I see people jump into making whole websites before they’re ready and they get frustrated and leave and if they do continue they’re handicapped by not having enough experience with individual components
Thankyou for your suggestions. I am going thru Kevin's "conquering responsive layouts", as a way to get a solid foundation in CSS as well as looking at others such as FCC. I will certainly be practising, practising and practising more as time goes by. What I believe I might struggle with, is how to design a site from scratch, and that is what prompted this question?. Is that reasonable or will it just come to me ?
The best way is to copy, but importantly when you start you cannot look at the source images you have to do it from memory - you will make mistakes and differences, just roll with it.
So you absolutely can’t claim it as your own, but if you go onto Dribbble and see a design you like you can make it, and clearly label who designed it; you can share it on CodePen.
By copying you’re handing off the design to someone with experience and you can pick up on the decisions they made to help you with your own designs
It’s also a good idea to immerse yourself in websites, explore them, find out how they solved certain problems
You will collect together lots of little bits of inspiration and the know how to solve it