Skip to content
loading...

I need help in Web Design 😭

github logo ・1 min read  

Ok, I need to make a folio website. But the problem is: I am rubbish at Web Design. Emphasis on design by the way.

I can use CSS fine enough if a customer already has a planned design with colour schemes and all, but I find it incredibly hard for some reason to create my own designs.

So basically I need help in learning the designing aspect of making a website, I can do the back-end fine enough, just not the front-end.

I'm really bad when it comes to colour schemes and what colour goes with what.

So, if you have any articles, books, websites that could help me understand the designing part of websites, that would be great. Thanks!

twitter logo DISCUSS (9)
markdown guide
 

Hmm, from reading your other comment it sounds like you might not know CSS super well. My suggestion there is to make sure you understand the box model. From there read up on the display property. These two things should help you with your general site layout. Make sure you understand the differences between a "display: block" element vs a "display: inline" element vs a "display: inline-block".

As for general design tips, web flow has a ton of great articles to help get you going. In their "Ebooks" section I'd recommend their Web design 101 book.

As for color schemes, you'll get a feel for it. People will say there are rules, but generally you have some idea of what is aesthetically pleasing. If not stick to the basics. There are some basic color schemes you can make use of, and remember every color scheme can include black/white and all the shades/tints between the two. You can also use a color generator like coolors.co/.

Finally, you don't have to reinvent the wheel here. There are common design patterns that most websites make use of. Part of what makes so many web designs great is the familiarity of them. For example, navbar is always at the top, content in the middle, footer at the bottom. User info is in the top right, website logo is in the top left and clicking it takes you to the "home" page, etc. Try to stay true to these patterns until you're more comfortable breaking the rules.

 

Hey Jordan. Thanks for the tips, I think I've got a good enough understanding of the box model. It's just colors and layout that I can't get around. Most websites I've done in the past are block colors and don't look very professional.

So I'll check out those links and hopefully soon I'll be sharing my website on here.

 

I guess the next step is to determine if you actually want to expand into web design/front end, or if you prefer to focus on the back end.

If the latter, there are a number of options for quickly and easily bootstrapping a themed site like squarespace, WordPress, Jekyll, and more.

If the former, I'd recommend picking one of either react or angular and working with some of their more maintained component libraries like those for material design, for example. Those will often include palette swatches to get started quickly, and then you can continue to learn valuable front end skills as you go.

 

Thanks, I'll try bootstrapping, cause I want to stay in the back-end of things. I think this meme just about sums up CSS for me:
img

 

Yeah my suggestion is really just to use something like squarespace to get up and running quickly, or a static site generator with a template like Jekyll.

The benefit of the latter is you can deploy and host it yourself which you can use as extra ammo on your resume.

 

Just take a look at this video(it has 2 parts). It's Ryan Singer(from Basecamp) doing some design work from start to finish. It's a great resource if you want to understand, how to think about design before you go off coding the HTML. Link: youtube.com/watch?v=4rxTyX2utIg&t=...

 
 
Classic DEV Post from Sep 23 '19

Pay your rent from open source πŸ’Έ

hello world! πŸ‘‹ This is my first #discuss thread and I want it to be on something relevant...

JCowie profile image
16 Year Old Programmer/Web Developer/Aspiring Cyber Security Expert and the Lord of Linux.