• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Forum moderator applications are now open! Click here for details.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

I'm a Web Developer, how do I get better at design?

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
how did this become a discussion about fonts?

But serious guys, im in serious need of a designer.. I just cant do this whole design crap, here is something I came up with today that to me looks good in theory just in reality it just plan sucks..

What do you guys think?

https://dl.dropboxusercontent.com/u/36346467/HippoZoned/index.html

You need to use less clashing colors, like that black on a grey gradient is difficult to see. Also black on grey or darker blue? Same deal.
Also using a backshadow onto a white background that happens to be part of a container looks bad.
Also moving elements that are unrelated on hover is usually a bad idea.
More defined margins would also be a good idea because the unaligned elements look messy.
The links bar is also indistinguishable from the body because they are one and the same... You should separate these.
And finally, if you look at this at high or low resolutions, the element placement becomes incredibly skewed. (I posted screenshots below)

Spoiler:


What I would recommend is to change the color scheme to have more contrast, to add more structure to the element placement, to have more defined borders between elements, and to rethink the scaling and spacing of your elements for larger and smaller screen resolutions.
 
10,673
Posts
14
Years
  • Age 30
  • Seen Dec 30, 2023
Okay, before you question my opinions, I do this for a living and have qualifications from W3Schools in 3 languages, on top of studying this as my major. But if you want to be a web developer, you need to actually be able to design. There's no two ways about it, a client is very, very rarely going to come to you with a design already at hand. Reason being, people don't want to pay two different designers to work on their site, they want to have one person to do it all. So what I'd recommend is studying the the most important parts of web design, you can't actually go into a design blind and say "yeah that looks good". There's at least 9 important principals you need to consider. Most of which are seen here. Don't bother learning to code full websites until you learn the elements of design required to do them.

Knowing the code is all well and good, but if you don't know how to use it, there's no point. Pretty much everything in the tutorial I linked above is to do with the design and not the code. Coding a website (overly complex ones aside) is only about 20% of the importance. The ability to use CSS/HTML is commonplace nowadays on the web, however the ability to design is much more sought after. Start with that page, look up some other tutorials on Google for design advice.
 

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
But if you want to be a web developer, you need to actually be able to design.

I doubt anyone has any objections to this... Because, well, this is what he is trying to do in the first place... *Points at thread title.* :^

I will say though, that seems like a good link..!
 
Last edited:

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
Okay, before you question my opinions, I do this for a living and have qualifications from W3Schools in 3 languages, on top of studying this as my major. But if you want to be a web developer, you need to actually be able to design. There's no two ways about it, a client is very, very rarely going to come to you with a design already at hand. Reason being, people don't want to pay two different designers to work on their site, they want to have one person to do it all. So what I'd recommend is studying the the most important parts of web design, you can't actually go into a design blind and say "yeah that looks good". There's at least 9 important principals you need to consider. Most of which are seen here. Don't bother learning to code full websites until you learn the elements of design required to do them.

Knowing the code is all well and good, but if you don't know how to use it, there's no point. Pretty much everything in the tutorial I linked above is to do with the design and not the code. Coding a website (overly complex ones aside) is only about 20% of the importance. The ability to use CSS/HTML is commonplace nowadays on the web, however the ability to design is much more sought after. Start with that page, look up some other tutorials on Google for design advice.


Thanks for the link, there is just so much crap that has to be taken into account when designing. If you ask me its more complicated than programming. Atleast in programming you have a goal, you know what you have to do and you have a few ways to get thre, or sometimes you just have the direct way. Either way picking up this design stuff is going to be harder than I thought. I wish I had the money to take a good design course..

I really dont understand how people can expect you to do both. The programming on a site can get pretty complicated, then they want you to design their site too? SMH.. oh well I'll get this.


EDIT: I am reading some articles that made me realize I'm going about the design process all wrong, my main problem is im trying to rush/force it..
 
Last edited:

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
Well there is value in simplicity, or perceived simplicity...

One thing you are going about all wrong is how you are attempting to go about accenting elements...

http://jsfiddle.net/aZn2a/2/

I quickly hacked this up for someone a few days ago when I was attempting to explain the "Cascading" part of Cascading Style Sheets, but it also serves as a good example of accenting. Do you see how simple the elements in this page look? And how they change when you click on one or another? What about the visual cues? when mousing over elements or clicking?

No matter how complex the interface or backend work, a good UI can make it look simple. (Which granted, this is...)

For example, this is the layout of one of my previous projects: (Somewhat outdated shot with junk test information.)
Spoiler:


Notice how elements are laid out? Spaced? Separated? (Very different from spaced.) Accented? Contrasted?

When you design something you need to draw attention away from the UI, because the best UIs are the ones that don't get in the way. You can't rush these things, it takes time to make a UI that both appears good and is usable.
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
Thanks guys for all the helpful advice and tips. I'm learning that I need to put more thought into my designs, figure out what I need and what I dont, if it will conflict with other things I need. I'm still far from actually doing anything worth showing, but I'm not making the design process similar to my coding process..
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
How is this for design guys? :D I'm very happy with this design. It took me a few hours from the idea phase to the completion stage, below is an image if you wanna view the actual working website click the banner in my sig..

part2qp.png
 
Back
Top