Speaking of web design, for the last 4 months or so I’ve gotten sucked into it due to necessity. And it's taken over my life but I'm climbing out of it. During that time I bookmarked some useful links – I’ve put them in categories below for you. You can completely ignore what I have to say in each section and just go to the links if you like and you will probably not be any worse off
My feeling about design is that it has a bigger role in web marketing than some think. If you’re doing SEO, or maybe the better phrase here is SEM, then your design will affect your site’s content, its stickiness, how its perceived by influential people who you want to help promote your site/articles/whatever, etc. Yeah content is king but you have to get people look at your content. And a site with a crap design is probably going to turn off some people you want to impress.
The difference between many blogs out there and mine – which has only been in existence for like two months and has a steady steam of 8 visitors a week – is that my articles look great before you even read them. That’s because I pay attention to the design. The typography, the use of images, and so on gives them a sleek, inviting look. I just need to get off my butt and market them already.
Now for the affiliate marketing world, design might not matter as much where ad-ridden sites are the norm, but for more long-term sites it probably does.
Disclaimer: I know nothing about ecommerce. Heck, I barely know about design. So I have no idea what works in the ecommerce world.
Design Theory
There are a lot of articles out there if you Google them. Some great books too. So I would go with that approach. In addition to theory, looking at well-designed sites helps too if you’re good at spotting patterns.
But there is one important principle that I do want to mention: visual hierarchy.
This is where a lot of websites fail imo. They have too many things on the homepage competing for eyeballs but there’s no hierarchy. And of those sites that do have a hierarchy, they often have one that’s far from optimal because they give priority to things that don’t matter much. Getting the hierarchy right can mean a big difference in % of users clicking on the buttons you want them to click on.
Here are two good articles that explain visual hierarchy well:
http://designshack.net/articles/grap...-in-web-design
http://webdesign.tutsplus.com/articl...in-web-design/
This page has a collection of good design tutorials in general:
http://webdesign.tutsplus.com/sessio...design-theory/
And here are some design forums for general design stuff, the first in particular is good:
http://www.designerstalk.com/forums/: it’s mostly UK people, hence why the posts are colorful and lack any sugar coating
http://www.designforums.co.uk/web-design-development/
http://www.webdevforums.com/
http://www.sitepoint.com/forums/foru...Website-Design
http://tycoontalk.freelancer.com/
http://www.htmlforums.com/
Typography
Most websites have bad typography. Typography is not just the font choice, like Arial versus Georgia. It’s the size, color, line height, line length, kerning (spacing between the characters), and the relationship between different elements – like the size of the headings relative to one another and to the paragraphs. And then it’s much more. I was surprised at how big of a field it is and how interesting it can be.
Anyways, great web designers spend a lot of time on getting the typography right because it matters to the overall design. Here are some examples of good typography (imo) to give you an idea on why it matters:
http://www.elysiumburns.com/
http://trufcreative.com/
http://carsonified.com/
http://www.cloudberrycreative.com/
http://forefathersgroup.com/
http://www.jamiegregory.co.uk/
http://www.yesnurse.co.uk/
These are my observations on a few things that many sites do wrong typographically:
Low contrast (gray on gray and so forth)
Using letterpress font for anything that is more than a few words long. Makes me want to scratch my eyes out when reading paragraphs of it.
Not paying attention to the relationship among headings
Not paying attention to the “pop” of the typography. Dull typography is everywhere. This is somewhat related to contrast
Not using a white background for content-rich areas like the blog articles section
Too small of font for paragraphs. There’s no rule that says 12px font is correct. In fact, it’s often too small, yet many sites use that.
Here a couple of beginner articles:
8 factors of web typography:
http://webdesign.tutsplus.com/articl...eb-typography/
The basics of typography:
http://designinstruct.com/tools-basi...of-typography/
Web typography guide:
http://ilovetypography.com/2008/02/2...eb-typography/
How to pair fonts:
http://webdesign.tutsplus.com/articl...pairing-fonts/
This is a small sample of resources if you want to learn more – there are many more out there if you search:
http://www.smashingmagazine.com/tag/typography/
http://ilovetypography.com
http://www.webtypography.net/toc/
http://typographica.org/
Where to get fonts:
http://www.google.com/webfonts
http://hellohappy.org/beautiful-web-type/
http://www.dafont.com/
http://www.myfonts.com/
http://www.fontsquirrel.com/
A neat tool that will let you analyze the font of a website you're visiting:
http://chengyinliu.com/whatfont.html
Logos
My recommendation is hire someone good unless your site is a cheapo one that isn’t a long term venture you care much about or where branding is not a big deal.
Logo design really is another world. Many good web designers even admit they can’t do logos because it takes a special skill.
If you want something that’s just good enough, then yeah you can make one yourself using a good looking font and maybe a little image/icon to the left of the words. Or you can hire someone off one of the quasi-slave-labor freelance sites for like a dollar an hour. But you’re most likely not going to get quality. I’ve seen the portfolios of those designers. They’re very bad and are basically just clip art. And the crowdsource spec stuff is bad too compared to what you would get from a real logo designer. You can use this site for cheap DIY logos:
http://graphicriver.net/category/logo-templates
Here is a link to a page that has 60+ logo design tutorials if you want to take a stab at creating your own:
http://www.smashingmagazine.com/2009...and-resources/
These sites have some great logo designs and show you what's possible if you want to spend the $$:
http://www.1stwebdesigner.com/inspir...-logo-designs/
http://dribbble.com/tags/logo (top notch designers who are only allowed to join by invite)
http://logopond.com/
http://www.deviantart.com/
Pictures
It’s surprising to me how much of an impact one picture can have on a web page. I guess one reason for that is there isn’t that much real estate above the fold.
You can use
this FF add-on to see what any site looks like without its images, if you want to better see how images and design work together. The tool is good to use in general if you want to manipulate web pages you come across.
Anyways, pictures are very important. Not much else to say really.
Layout
Layouts were the trickiest for me at the beginning, and still are. So I looked at lots of sites and WP themes to get an idea of what layouts are being used and what works. A typical layout nowadays, depending on the industry, might look something like this:
Header:
a. Logo
b. Navigation menu
c. Ribbons/tags
d. Social media buttons
e. A border
f. Different color/texture than rest of the site
g. CTA button
h. Phone/address
Body above the fold:
a. A carousel
b. Or a big image, with some text next to it
c. Or a bunch of text organized in different ways
Body below the fold or beginning to go below the fold:
a. Maybe some boxes describing your services/products with some icons
b. Maybe blog articles
Footer
The Entire Page:
a. a container that holds the content separate from the background
b. or a full width, open design page instead
If I need inspiration for a section, I do a Google search. So for example, if the top nav menu for a blog I’m designing just doesn’t look good, I Google other blogs or use search terms like “blog design inspiration” or “website design inspiration” or “navigation menu examples.”
In the end though there are not that many layouts to choose from. Look at a few hundred websites and you’ll start to see a pattern in layouts. You don’t want to get too avant garde because you’ll risk annoying your users.
If you’re stuck in a rut and looking at web designs in your industry/niche isn’t inspiring, then these links might help:
http://uxdesign.smashingmagazine.com...design-trends/
http://dribbble.com/tags/website
http://blog.crazyegg.com/2012/02/14/...n-inspiration/
http://siteinspire.com/
http://www.1stwebdesigner.com/
http://www.webdesignerdepot.com/
http://designshack.net/
UX
You probably know what UX is. If you don't, then think of the difference between going to Disneyland and going to the state fair. Disney feels magical and gives you that positive experience that you really can’t get anywhere else. The state fair gives you a feeling of an urgent need to wash your hands. How does Disney do it? By playing on our psychology through the use of design, etc. Same thing with websites like Old Navy, Coke, Apple, and so on. They create this sense of excitement in their users.
Anyways here are some UX resources:
http://ux.stackexchange.com/
http://52weeksofux.com/
http://uxdesign.smashingmagazine.com...er-experience/
http://blog.usabilla.com/
http://uxmyths.com/
http://uxmatters.com/
Usability
You guys know what usability is, so point rehashing it. I’ll say that it seems that convention is pretty important here. If users today generally expect a logo to be at the top left or top middle, or a nav menu to be across the top or left, then you probably want to design that way unless you have a compelling reason not to.
Some resources:
http://www.useit.com/
http://www.sensible.com/
Want to do some user testing? Here is a list of the major tools on one page:
http://uxdesign.smashingmagazine.com...testing-tools/
Illustrations
Chances are some of the sites that you think look great have illustrations. Unless you can draw, you’re better off hiring a pro. And from what I’ve seen, their prices aren’t cheap.
Last Word
If you don’t have a background in graphic design, realize that people who are good at it often have a degree in it and/or years of experience doing it. While we were playing poker or learning SEO or whatever, they were obsessing all night long about getting drop shadows just right. I personally don’t have the inclination to learn all the nuances or become a pro at Photoshop because I’m interested in marketing and there’s only 24 hours in a day.
However, I think the time spent doing it at the beginning is a great education and will put you ahead of others in the web world. Look at the websites of small businesses in your city. You’ll likely see that 95% of those sites hover between bad and terrible. By subjecting yourself to the torture of learning design, you’ll separate yourself from the unwashed masses
Plus you'll be better at outsourcing design stuff if you know about it.
Edit
One last thing. One way to get ideas for graphic design is to think of a color you like. Then go to a site like Dribble and use the color selector they have. Then you can see great, cutting edge designs in those colors. Or if you see a design you like on Dribble, look at the color palette listed on that page and choose a color from there and it will show you designs in that color.
And speaking of color,
here is a very handy site I use for color schemes. So, if I have a color on my site I like, I then enter the hex # and it generates other colors and I then use those colors for the rest of my site, sticking to like 3 or 4. It's a great way to spice up your typography because you can then use different colors for your fonts, yet have them all work color theory-wise.
Also if you want ideas for color palettes,
this is a neat site, although I find Dribble more useful because it links me to designs.
Last edited by derosnec; 04-16-2012 at 01:34 AM.