Where to learn web design?

Hello,

I already know HTML and CSS. I would like to learn how to create attractive layouts in Photoshop, so I can lay them out with code.

Are there any good books or online tutorials that would help me with this?

Thanks!

Hi,

Sitepoint have a number of book on UX:

https://www.sitepoint.com/premium/books/designing-ux-prototyping

And a good book on sketch (good tool for wed design): https://www.sitepoint.com/premium/books/jump-start-sketch

If you are a member of sitepoint you get access to all our books so could read all of these books.

Cheers.

2 Likes

I would suggest you to start with youtube video tutorials.

I would be very careful about using Youtube tutorials.
Many are very poor quality, teaching out-dated and bad practices. With little editorial control over them, anyone can declare themselves an expert and post a tutorial.
I say this because I have seen many beginners in the forums here struggling or creating terrible code having picked up bad habits from poor Youtube tutorials.

3 Likes

You can find all the information on the Internet. You need to explore several sources.
You can see them in the article - https://icons8.com/articles/online-education-study-web-design/
I hope it helps you.

How exactly does this process work? I am unfamiliar with UX.

I want to know the process of web design before doing any code.

Thanks for your help!

I would spend fair amount of time surfing the Internet and find websites that make you say, “Wow!”

Get an idea of what is out there, different layouts/designs/techniques that people are using. Figure out your “groove” and then go learn how to do what you like.

If you wanted to learn to dance, you would be wise to first learn the different types of dances and what you are trying to accomplish before taking dance lessons.

If you are 21 and want to meet girls, learning polka might not be the way to go…

1 Like

The current way to make layouts is with Flexbox and Grid.

Learn about Flexbox here: https://scrimba.com/g/gflexbox

Intro to CSS Grid: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/