DEV Community

Cover image for A Web Design Crash Course: From one non-designer to another

A Web Design Crash Course: From one non-designer to another

Ali Spittel on August 20, 2018

I will preface this by saying that I'm not professionally a designer. That being said, I like building pretty things and have had some success with...
Collapse
 
ben profile image
Ben Halpern

I really needed the section on colors. This is really brilliant.

Collapse
 
alexfogaca96 profile image
Álex Fogaça

Being able to put on paper these things that affect your experience is really great! I always tend to doubt my intuition as "hmm.. it seems difficult to read, but I don't know anything about colors" :v

Thanks again!!

Collapse
 
milkstarz profile image
malik

This is a really great post!! I always share the CRAP principles with new developers when getting started designing anything.

Thanks for making this guide, definitely gonna share

Collapse
 
j0shyap profile image
Josh Yap

Ali, the last few things saved in my pocket app have been your content! Really appreciate all of your work as a budding developer overwhelmed by resources. Hope I can hear your talks in person someday and get to meet you.

Collapse
 
aspittel profile image
Ali Spittel

Thank you so much, that means a lot!!!

Collapse
 
jeremy profile image
Jeremy Schuurmans • Edited

Agreed. This is really great. The checklist is fantastic and I'll definitely be using it in the near future!

Collapse
 
tux0r profile image
tux0r

Fira Sans is a sans-serif font, hence its name.

Thank you for the article, Grommet was new to me. :)

Collapse
 
aspittel profile image
Ali Spittel

Good catch thanks! I originally had Fira Code then moved it over. Oops!

Collapse
 
bitwombat profile image
Bit Wombat • Edited

I'm not seeing the text shadow in the example image... am I missing something?

Would be useful if all examples' outputs were the actual HTML/CSS instead of an image so I could check for myself and also change the parameters!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
aspittel profile image
Ali Spittel

Thanks! Good catch!

Collapse
 
natamykhailova profile image
Mykhailova Nataliya

Very great course. Choosing a type of website to develop remains.

Read an article about types of website and what idea you should enclose in them and you will choose yours weblium.com/blog/types-of-websites...

Collapse
 
sudiukil profile image
Quentin Sonrel

This is brilliant Ali, as always, thanks :)

I needed that kind of article, even though I don't suck at it, design is clearly not my strong suit.

Collapse
 
yemolai profile image
Romulo G Rodrigues

Whoa! This is an amazing extensive article. I loved it! :D

Collapse
 
karltaylor profile image
Karl Taylor

I had no idea about word spacing! Thanks a lot

Collapse
 
muhfaridzia profile image
Muhammad Farid Zia

Awesome, thanks 😀

Collapse
 
yaser profile image
Yaser Al-Najjar • Edited

Nice list... for the colors I love using this tool, makes it easier for me to pick colors fast: color.adobe.com/create/color-wheel/

My favorite "styling" framework: bulma.io

Collapse
 
ochoadev profile image
Luis A. Ochoa R.

Such a great post. Thank you Ali!

Collapse
 
oumancode profile image
Julio Vieira • Edited

Thank you, this is awesome. I'm loving it!

Collapse
 
rehmatfalcon profile image
Kushal Niroula

Color is something I always seem to mess up. Thanks for the article. Nice write up!

Collapse
 
gergelypolonkai profile image
Gergely Polonkai

That’s an awesome list, thanks for putting it together!

Also, change the double hashmark to an asterisk, and you have an Org checklist (for Emacs fans ;)

Collapse
 
rhymes profile image
rhymes

Thank you, thank you, thank you for this :-)

Very useful!

Collapse
 
dechamp profile image
DeChamp

Great article!!! It was simple and to the point. Thank you.

Collapse
 
rolandixor profile image
Roland Taylor

Clap, clap, clap.

Collapse
 
juankortiz profile image
juankOrtiz

Colors allways seemed like a dificult thing to resolve. Great advices, thank you.