• 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?

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
As the title say, I'm a developer(programmer) I'm looking to make some cash on the side from templates, but my designs always look old and dated, stuff you could design with html tables. I want to modernize my design skills without actually copying other designs. I can draw, but I can only draw others ppls work. I have trouble coming up with original art, and the same seems to be happening with my designs.

So What I'm asking is do you guys know any sites, books, articles, anything to help me improve my design skills and become a better designer.
 

Pichu2Pikachu2Raichu

Yep, that's me
310
Posts
11
Years
Mate, first tables <tr.> are getting old now but are still widely used. Believe me I am a expert on HTML. ;)

Might I recommend you try going to a web based web design school. And most of them are free, just Google it. I don't use them so yeah....

As for helping you with designing, look for fresh inspiration by thinking about what people HAVE NOT done already, that's how I go about designing my websites, and I have a few good CSS ideas too.
But this is the one thing I can't help you with :( if you ever need help with HTML, PM me.
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
Mate, first tables <tr.> are getting old now but are still widely used. Believe me I am a expert on HTML. ;)

Might I recommend you try going to a web based web design school. And most of them are free, just Google it. I don't use them so yeah....

As for helping you with designing, look for fresh inspiration by thinking about what people HAVE NOT done already, that's how I go about designing my websites, and I have a few good CSS ideas too.
But this is the one thing I can't help you with :( if you ever need help with HTML, PM me.

Thanks I'll try your suggestion, I dont use tables myself anymore. I switched to using only css, I am good at HTML5 XHTML, XML, CSS, PHP etc.. lol basically I can develop my butt off but my design skills well they are like im a 60 year old man lol. I dont want to hire a designer for my freelance work so I need to get at least moderately good enough...

can you tell me more about what you mean by "web based web design school", and how would it be free. is it a site like w3schools?

If so I dont need programming help, just design help..

here is an example of one of my crappy designs
Spoiler:


I like the simple design, i just think the design is dated. Also I think a homepage should be more than what I have there, I should beable to tell the visitors more about the site, give them more options, eyecandy, and other links all while keeping the design clean and I just cant seem to do that.
 
Last edited:

Pichu2Pikachu2Raichu

Yep, that's me
310
Posts
11
Years
Thanks I'll try your suggestion, I dont use tables myself anymore. I switched to using only css, I am good at HTML5 XHTML, XML, CSS, PHP etc.. lol basically I can develop my butt off but my design skills well they are like im a 60 year old man lol. I dont want to hire a designer for my freelance work so I need to get at least moderately good enough...

can you tell me more about what you mean by "web based web design school", and how would it be free. is it a site like w3schools?

If so I dont need programming help, just design help..

here is an example of one of my crappy designs https://dl.dropboxusercontent.com/u/36346467/temp/index.html

ROTFL, that site is blocked at my work Proxy server is like NA-AH hahaha (I hate it)! Ahaha lol.

Yeah use ya <DIV> tags nowadays, links back to the CSS :D

As for helping you with designing, dont even try, I suck at helping others at designing. And no it's not like w3schools, it's using HTML5 at the mo and is currently in the Chrome experiments list. You might have to look hard for it.
 

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
Heyas KingCharizard...

Making good designs is really less about the content, and more about user interface design principles. For example, how one would encourage or explain certain actions if there were no text. (Visual cues, icons, etc...) Or common locations for UI elements of different types.

If you wish to modernize your design skills, you'll need to think about how a user will look at the site. For example, how wide do you think a user would like to read content that is filled in your page? What kind of content do you think people would expect, and where? What would be most familiar to your grandmother?

I recommend you familiarize yourself with the concepts listed here: http://en.wikipedia.org/wiki/Principles_of_user_interface_design
This is also a good article: http://blog.teamtreehouse.com/10-user-interface-design-fundamentals
And another: http://uxdesign.smashingmagazine.co...od-user-interface-design-in-web-applications/
And this is a pretty nice reference if you get stuck: http://ui-patterns.com/

Design is an art, so can't really treat it like development. You will find yourself using many of the same concepts other sites do, this is because you want your design to be intuitive, and one thing that people find intuitive is familiarity.

Also looking through what you've linked I noticed this:
Code:
<!-- I use id's because it makes my naming conventions more strict and I think it makes my code cleaner -->

I also noticed a similar message at the top of your CSS, which is primarily filled with ID selectors, so I presume that is what you were referencing? You'll need to be careful if you keep this mentality since you can really shoot yourself in the foot if you set the same ID for more than one thing. (Could really screw up JavaScript element references in libraries like jQueryUI for example.)
 
Last edited:

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
@Archenoth

Very good links, I especially loved the smashing magazine article. But I always love their articles. Nice advice too. While I know the philosophy "If it ain't broke don't fix it" I dont want to just follow and copy the intuitive designs that work well for others. I feel my work should be unique, it should feel like me. It should stand out on its own and when someone sees it they say I know who made that. Kinda like when others look at the way you code they can sometimes tell who wrote it.

I understand its not gonna happen over night, I am willing to put in the time and effort but I dont really know where to start I guess. The links you've provided are a good start and they have been informative. So thanks.

About the Id's and the naming conventions I use, I don't like the idea of a name being allowed to be used twice, I feel it's sloppy. I understand the risks with using Id's instead of classes but I still plan to use Id's. If I make a mistake in my code, its because I got lazy or sloppy.
 

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
Very good links, I especially loved the smashing magazine article. But I always love their articles. Nice advice too. While I know the philosophy "If it ain't broke don't fix it" I dont want to just follow and copy the intuitive designs that work well for others. I feel my work should be unique, it should feel like me. It should stand out on its own and when someone sees it they say I know who made that. Kinda like when others look at the way you code they can sometimes tell who wrote it.

I share this sentiment... But I think you're getting me wrong here. Guidelines to a good UI are things that I definitely recommend you to try to apply. But even if you follow those, it really doesn't limit your own creative abilities or coding style. Granted it can mean more work for you if you wish to stay within a particular set of stylistic choices within your code, but these rough edges are often a sharpening block for you to develop a more defined and efficient coding style.

It may be a lot of work depending on your style to make tweaks and modifications to your layouts though. Sometimes it's actually easier to try to work out your interfaces in something like Photoshop, then building it in HTML. That way you can see how elements can be positioned, and what they will look like with minimal effort. (Presuming you utilize layers heavily of course.)

I understand its not gonna happen over night, I am willing to put in the time and effort but I dont really know where to start I guess. The links you've provided are a good start and they have been informative. So thanks.

No problem..! There are quite a number of UI design articles and blogs out there, the things I linked you to are a good start, granted, but reading up on practices and then applying them is the best practice you can get. And I mean literally going through blogs and articles, point by point, and trying to utilize everything they suggest on something at least a few times in a few different ways.

The next time you hack up a little test project or want to try out some new JavaScript code, try making a good interface around it. Wonder how to use a new API? Test it out and give it a good interface. Do this with everything.

If you are dedicated, you will become good at it in no time..!

About the Id's and the naming conventions I use, I don't like the idea of a name being allowed to be used twice, I feel it's sloppy. I understand the risks with using Id's instead of classes but I still plan to use Id's. If I make a mistake in my code, its because I got lazy or sloppy.

Classes and IDs are used for very different things. Classes are things that you can use anywhere for style or code functionality purposes, whereas IDs are definite anchors to particular elements. How you separate your CSS between the two is a large part of making modular CSS. For example, I commonly have highly general CSS classes that I can add to things, like an "error" class that will turn text red, or if it is a particular type of element, to draw a little warning sign next to it. Another common one is "loading" which will change the background with a pulser animation to indicate something is in progress.

That way if there is an error in validation, the only thing I have to do is get a handle on the element and add the class "error". Also if I am waiting for an AJAX call to return I can set the "loading" class when it starts, and remove it when it's done.

You can automate an awful lot with CSS classes, because you can use them to reference hierarchies too, so you can have a selector for "div.someclass div.content" to act on anything that was below that element with the class. This means you can make huge graphical changes with a simple adding or removing of a single class from an element.

Don't neglect tools if they prove useful. :P
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
Classes and IDs are used for very different things. Classes are things that you can use anywhere for style or code functionality purposes, whereas IDs are definite anchors to particular elements. How you separate your CSS between the two is a large part of making modular CSS. For example, I commonly have highly general CSS classes that I can add to things, like an "error" class that will turn text red, or if it is a particular type of element, to draw a little warning sign next to it. Another common one is "loading" which will change the background with a pulser animation to indicate something is in progress.

That way if there is an error in validation, the only thing I have to do is get a handle on the element and add the class "error". Also if I am waiting for an AJAX call to return I can set the "loading" class when it starts, and remove it when it's done.

You can automate an awful lot with CSS classes, because you can use them to reference hierarchies too, so you can have a selector for "div.someclass div.content" to act on anything that was below that element with the class. This means you can make huge graphical changes with a simple adding or removing of a single class from an element.

Don't neglect tools if they prove useful. :P

Very good points, especially the error one.

Another thing I've been considering is following photoshop tutorials about template design. Even though its copying it can give me a better feel for interface/ui design. My project I've been working on now is making a registration/login system with form/processing to log into a simple page. Nothing extreme just enough to design a good login/registration system. Mainly so I can focus on the design.

Anyone else have any helpful advice or links?
 

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
Very good points, especially the error one.

Another thing I've been considering is following photoshop tutorials about template design. Even though its copying it can give me a better feel for interface/ui design. My project I've been working on now is making a registration/login system with form/processing to log into a simple page. Nothing extreme just enough to design a good login/registration system. Mainly so I can focus on the design.

Anyone else have any helpful advice or links?

Cool beans. I say go for it..! The more you know, the more you can make your own style a good one.

As for other advice, I can't really say I have too much for just things in general, but I can certainly help out if you want to ask me about something in specific. The only real advice I can say right now is, if you haven't already, get familiar with IRC. It is one of the best places to get help on pretty much any coding topic, including CSS and design. And if IRC fails you, a well-worded and unique question on StackOverflow will almost always get a good answer.

Though I must ask...

Since this is a login system, will this include any server-side coding? Because if so, you should also take a look into proper cryptography for storing passwords. It pretty much boils down to multi-hashing with a salt, because it is incredibly easy to bruteforce most types of hashes.

This little bit of PHP code is often the type I like to use (Often with some variation, sometimes even a loop for a hash factor to make it scalable.):
Code:
function password($password){
  return md5(sha1($password . $this->salt) . $this->salt);
}

$salt is a constant string that no one will know except for you, the developer. And $password is the password you wish to hash.

Either way, good luck..!
 
17
Posts
10
Years
  • Seen Apr 20, 2013
Take a look at the major websites such as Google, Facebook, etc and you'll notice they all usually stay along the same lines - that is, that they all keep things extremely simple with subtle designs. Most notably, they use light colors for most of the elements on the page with an accent color.

Eg. On Facebook, everything is light grey / white / light blue, with a Dark Blue header and Dark Blue buttons as accent colors.

On Google, it's quite similar, light greys, whites, and a blue accent color with a dark header.

Also, try to keep it consistent. If you use rounded corners, make sure you don't throw in square boxes which may throw off the design (unless you intended to square it up a bit in some spots).

Best of luck!
 

droomph

weeb
4,285
Posts
12
Years
Okay, I'm not a "professional designer", but I have to say that I'm kinda experienced, having made a couple pages I'm proud of.

So I may not know the ins and outs of this business, but I just look at it this way - what would you customers or people using this want? Do they want Times New Roman 404 text on a white background? Or do they want something sleek and simple?

Start off with this - find a…"sleek" font.

-----

This is not sleek. It's default, and kinda boring.

…okay, I don't know what's so bad about it. But it's just not "special" and doesn't have THAT feel.


This is my personal favorite. Sans-serif fonts in general fall into this category.

This is for older computers - if you're a cutting-edge, high-res website, this is probably the worst thing you can do to your website. However, it's best to use if you know for sure that smaller, low-res monitors will browse your website most of the time.

This is a good example of a "sleek" serif font. I don't know why, but it just looks, I guess, manly?

Every font has its own feeling. Choose which one speaks to your website's goals the "best".

-----

Then, move on to the boxes around it. Do you want it round, or do you want it straight corners?

Then the background. Search up on Google, and find some pictures. Make sure to keep down the website you took them from, because if not, you'll run into a lot of legal trouble. But besides that, what do you want to have on the background? If not to use them explicitly, at least to give you an idea of what you want.

Lastly, remember to update often. Every time you add a new line or text box, remember to check it out in the context of your website. That's why I like to work in a desktop app so much - you just need to click it once, and it refreshes for you. Although for a program, it's different, but still.

…that's about as much as I know.
 

Archenoth

The arch foe
467
Posts
12
Years
  • Seen Nov 6, 2020
This is for older computers - if you're a cutting-edge, high-res website, this is probably the worst thing you can do to your website. However, it's best to use if you know for sure that smaller, low-res monitors will browse your website most of the time.
Yeah, I'd actually advise you'd avoid Comic Sans MS. Many people rage when they see that font.

Then the background. Search up on Google, and find some pictures. Make sure to keep down the website you took them from, because if not, you'll run into a lot of legal trouble. But besides that, what do you want to have on the background? If not to use them explicitly, at least to give you an idea of what you want.
If you have an idea of what you are going for for a background (Like maybe some small dithering texture.) it's usually pretty easy to quickly hack up one in Photoshop or GIMP...

If you are looking for a background that emphasizes on shapes or lines, vectoring is a very useful skill to have too. (With Illustrator or Inkscape.)

Usually taking things off the web unless they are specifically marked as "stock" is a bad idea unless it's for a single page deal like an article.
 
Last edited:

droomph

weeb
4,285
Posts
12
Years
how did this become a discussion about fonts?
Fonts are actually a very big part of design. They convey your attitude towards the site better than the actual content that they're spelling out.

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

Start with a box filling your entire content area. Make it something you like.

Then, think of every individual box you need to carry out your intended tasks.

Then, keep on perfecting each of those boxes.

I don't know if this helps, but basically, just take it step by step.
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
Fonts are actually a very big part of design. They convey your attitude towards the site better than the actual content that they're spelling out.



Start with a box filling your entire content area. Make it something you like.

Then, think of every individual box you need to carry out your intended tasks.

Then, keep on perfecting each of those boxes.

I don't know if this helps, but basically, just take it step by step.

TBH I dont even know what your talking about, did you look at my design? Is that what your talking about.. now im even more comfused.. This is why I hate designing stuff, give me a coding task any day and I'm happy
 

droomph

weeb
4,285
Posts
12
Years
TBH I dont even know what your talking about, did you look at my design? Is that what your talking about.. now im even more comfused.. This is why I hate designing stuff, give me a coding task any day and I'm happy
Yeah, I did. And to be honest, it wouldn't have mattered.

Design is basically a huge box, with many smaller boxes. If you focus on each of the pieces (boxes), it gets a lot less complicated.
 

KingCharizard

C++ Developer Extraordinaire
1,229
Posts
14
Years
i get what ur saying but that doesnt really help if you dont know how to position those boxes, how to make them look their best together, your way to me me just confuses me more nd make it harder
 
Back
Top