We're going to be adding some advertisements to the forums! If you notice any weirdness around this or spot bad/inappropriate ads, please make a thread in the bugs forum.

I suck at web design

NightslyrNightslyr Registered User regular
edited January 2012 in Artist's Corner
I'm not sure exactly where to put this; whether it should be its own topic, placed in the FAQ thread, or broken up into several topics because it's too broad. So, please excuse me if I screwed up out of the gate.

Like the thread title says, I suck at web design. I'm a fairly decent back end coder. I rock PHP, am decent with C#, and am now learning Ruby to do some RoR action. But when it comes time to turn my sweet, sweet code into something visually appealing I just can't. I mean, I get the absolute basics - header, nav, content, footer - but I can't seem to combine them into Voltron. Some examples:

http://www.thesewingdivaquiltshop.com - WIP for a client. The gaping hole to the right will contain an image, and the background pattern was originally selected by the client, but will be swapped out. The woman logo looks like a mishmash of clip art to me, but was created by the original developer and the client wanted to keep it. There's not much content to build around, as the client doesn't want to turn it into an e-commerce site at the moment.

All that said, it looks fairly craptacular to me, but I couldn't say why. I think the typography is off, but aside from knowing the difference between serif and sans-serif, I don't know what I'm looking at. It also looks smushed vertically, to me, but I don't know how to fix it.

I have two other variations, which I showed the client, but she rejected:

http://www.mpphp.com/sewing diva layout 2.jpg
http://www.mpphp.com/sewing diva layout 3.jpg

Another example is my own website. Ignore the content - I did a quick hack job on what I wrote as I was under a time limit to get free hosting. I need to go back and rewrite it so it doesn't sound stupid. Kinda embarrassing on the whole, but here it is:

http://www.majorproductionsnh.com

Again, I'm not sure how to improve it.

My Photoshop skills are probably at a beginner's level. I make layers, use guides, measure things in pixels, etc. Blending and effects are a weakness, especially since I often have trouble figuring out how to transfer/translate it into HTML and CSS. And, of course, not knowing what the different blending options - like multiply, darken, etc. - do. Masks are voodoo to me.

Then, there's just basic design ignorance. I keep reading how typography is vitally important, but nothing explaining good typography from bad. I have problems deciding on what size things (fonts, images, page elements) should be. I don't know much about color combinations.

All of the resources I've found - Smashing Magazine, A List Apart, etc. - presume some base level competency/knowledge of Photoshop or design. I don't really have any. I'm eager (desperate, even) to learn, but I don't know where to start. Please help.

PSN/XBL/Nintendo/Origin/Steam: Nightslyr 3DS: 1607-1682-2948
Switch: SW-3515-0057-3813 FF XIV: Q'vehn Tia
Nightslyr on

Posts

  • NibCromNibCrom Registered User regular
    I would check out Graphic Design: The New Basics
    www.amazon.com/Graphic-Design-Basics-Ellen-Lupton/dp/1568987706

    It covers design elements such as point, line and plane, and design principles like hierarchy, balance, rhythm, scale, texture, etc...

    Read a chapter or two a day, take some time to absorb it. Read it, don't just look at the pictures!

    The nice thing about that book is that it's kind of updated for the Photoshop age instead of talking about camera-ready art. Or just find any book you like that covers the important principles and explains it to you in a way you understand. I would focus on graphic design information right now instead of Photoshop tutorials, although there are many competent Photoshop books if you would like that sort of thing.

    You'll improve your graphic design skills by learning what sort of designs work and WHY they work and applying that knowledge to your own designs. Practice and experience. Good luck!

  • DisrupterDisrupter Registered User regular
    edited January 2012
    As a programmer who also isnt much of a designer. My tip to you is to browse template sites, or design sites that show "top 10 blog designs" etc. You can get some good ideas from there. You have to be careful not to flat out steal designs. but to be honest, a lot of designs techniques are trendy. Like you will see the same thing over and over in like 100 sites. Formats, specific graphics (like, hey ill put a curved shadow here to make it look like a piece of paper ending to seperate this content), UI etc is usually one guy coming up with something new and thousands of other designers implementing it into their own design.

    If you can start learning what is "in" you can sort of just use what you've seen to be successful. Its a fine line between stealing and getting inspiration though. I probably tend to cross that line sometimes. Like I will love a color scheme from one site and a layout from another, so bam, layout 2 plus color 1 = new site. If you do that TOO literally, you will probably just be stealing design, and thats not cool. So be warry of that.

    http://www.smashingmagazine.com/

    is a good site to see what is trendy to put in your "I'm a programmer, so cut and paste design techniques into something halfway decent" toolbox.

    For example, I went to themeforest.com and found a template that could get some good creative ideas coming.

    http://tf.dtbaker.com.au/preview/?theme=25&style=0

    The background there is simple, but it could look really good in pink instead of green, and be a good replacement of the ugly background. The way they display the blog entries should be able to give you some inspiration for how to do the classes listings instead of what you have now.

    Also be careful how you use your padding, and whitespace. Right now you have a bunch of stuff aligned perfectly to the left, no padding, its not fun to look at.

    Disrupter on
    616610-1.png
  • NightslyrNightslyr Registered User regular
    Disrupter wrote:
    Also be careful how you use your padding, and whitespace. Right now you have a bunch of stuff aligned perfectly to the left, no padding, its not fun to look at.

    In both sites, or just one of them?

    PSN/XBL/Nintendo/Origin/Steam: Nightslyr 3DS: 1607-1682-2948
    Switch: SW-3515-0057-3813 FF XIV: Q'vehn Tia
  • DisrupterDisrupter Registered User regular
    Its less of an issue in your personal site, but its still a bit poor. But it really is a major issue on the sewing site.

    I'd suggest, before designing a site, browse template sites or design example blog entries for a good hour or so. Picking apart things you like about the examples and things you see a lot in current sites.

    You will notice a LOT of similarities. For example, in the template I showed, specifically the way they had the blog title and date, with the ribbon etc. You'll see that a lot of places. It looks good though. You obviously arent going to be a trend setter in the design industry any time soon (from what I've seen, very few people are, even good, professional designers I see are frankenstening a lot of other folks "ideas" they just know how to use those ideas really really well.) so feel free to use the trends other folks are setting. It'll be a massive step up from what your doing now which is really just information on whitespace.

    616610-1.png
  • NightslyrNightslyr Registered User regular
    edited January 2012
    Cool. :)

    Yeah, visual media is definitely not my thing. Even my stick figure people look bad. :lol:

    EDIT: So, theme sites. What are some good free ones? I see theme forest above. Any others?

    Nightslyr on
    PSN/XBL/Nintendo/Origin/Steam: Nightslyr 3DS: 1607-1682-2948
    Switch: SW-3515-0057-3813 FF XIV: Q'vehn Tia
  • NanaNana Registered User regular
    I'm a big fan of the Web Designer's Idea Books:

    Here is a link to volume 2 on amazon:
    http://www.amazon.com/Web-Designers-Idea-Book-Vol/dp/160061972X/ref=sr_1_3?s=books&ie=UTF8&qid=1326952846&sr=1-3

    Basically they are big picture books of very sleek/pretty/attractive websites.

    On to the (hopefully helpful) advice:

    Do you create sketches of your websites before you start building them?
    I like to go in with a plan of how things will be laid out. It's also way less time consuming for me to show sketches of what a website could look like to a client, and get their feedback and doodles before I get into building the site.

    I also make my clients give me examples of websites they like the look/feel of before I start. I can usually see a patterns in what they show me and it helps guide the design (for example: color schemes, preferred fonts, do they like image heavy sites, or text heavy sites with creative typography, serif or san-serif fonts, preferences on image galleries..etc)

    I would ask the sewingdiva how she wants her website to "feel" Feminine? Country? Craftsy (as in arts and crafts)?
    It looks like she has a quilt & sewing store? I would maybe try to pull from that for some design inspiration. Maybe you could do something with patchwork, or dashes that look like stitching.

    Here are some websites I found that have nice design elements:
    http://www.joann.com/joann/home/home.jsp - Clean, Simple layout, Easy Navigation, Nice color scheme
    http://www.knitpicks.com/knitting.cfm - Clean, Simple layout, Easy Navigation, Nice color scheme

    http://sewmamasew.com/blog2/ - A sewing blog with a very cute craftsy look.
    http://www.diaryofaquilter.com/ - Quilting blog with a cute quilting theme, and a warm & feminine color scheme (not super professional though)

    When you are searching the internet analyze the websites you find. We all basically judge whither or not we like or dislike a website as soon as we see it. I try to think about ease of use, aesthetics, and layout when I'm analyzing a site.

    I hope I gave you some inspiration!


    3DS Friend Code: 3823-8688-4581
  • GrennGrenn Registered User
    Find a good graphic designer to work with and get them to design the look of the site if you're struggling with it. There are plenty of designers who don't code so well, or even just outsource their coding (this is what I do); so if you find someone who is good at the design aspect, then you're both going to benefit.

    Good design comes with experience, and you aren't going to get that overnight...

  • NightslyrNightslyr Registered User regular
    Nana wrote:
    I'm a big fan of the Web Designer's Idea Books:

    Here is a link to volume 2 on amazon:
    http://www.amazon.com/Web-Designers-Idea-Book-Vol/dp/160061972X/ref=sr_1_3?s=books&ie=UTF8&qid=1326952846&sr=1-3

    Basically they are big picture books of very sleek/pretty/attractive websites.

    Awesome, thanks for that! :)
    On to the (hopefully helpful) advice:

    Do you create sketches of your websites before you start building them?
    I like to go in with a plan of how things will be laid out. It's also way less time consuming for me to show sketches of what a website could look like to a client, and get their feedback and doodles before I get into building the site.

    Sometimes, but not always. I'm thinking of buying Balsamiq Mockups to help me with this.
    I also make my clients give me examples of websites they like the look/feel of before I start. I can usually see a patterns in what they show me and it helps guide the design (for example: color schemes, preferred fonts, do they like image heavy sites, or text heavy sites with creative typography, serif or san-serif fonts, preferences on image galleries..etc)

    I always do this, with varying results. Some clients are real helpful. Others tend to know what they don't like, but not what they do like. A lot of times I'm forced to wing it, show a layout to the client, and then adjust. It can get tedious/frustrating after a few iterations.
    I would ask the sewingdiva how she wants her website to "feel" Feminine? Country? Craftsy (as in arts and crafts)?
    It looks like she has a quilt & sewing store? I would maybe try to pull from that for some design inspiration. Maybe you could do something with patchwork, or dashes that look like stitching.

    I did, but I got some contradictory answers from her. "I want it to look young, because I'm younger than most quilt shop owners, but not too young. Nice, but not fancy." May as well get the directives from a fortune cookie.

    The other idea - adding something quilty to the site - is something I'd like to do, I just wouldn't know where to begin with either the design (does it look good on its own? does it look good in the layout?) or implementation.
    Here are some websites I found that have nice design elements:
    http://www.joann.com/joann/home/home.jsp - Clean, Simple layout, Easy Navigation, Nice color scheme
    http://www.knitpicks.com/knitting.cfm - Clean, Simple layout, Easy Navigation, Nice color scheme

    http://sewmamasew.com/blog2/ - A sewing blog with a very cute craftsy look.
    http://www.diaryofaquilter.com/ - Quilting blog with a cute quilting theme, and a warm & feminine color scheme (not super professional though)

    More examples are always welcome. Thanks!
    When you are searching the internet analyze the websites you find. We all basically judge whither or not we like or dislike a website as soon as we see it. I try to think about ease of use, aesthetics, and layout when I'm analyzing a site.

    I think I do this pretty well. I actually do a fair amount of site critique over at PHP Freaks. My problem - and it's always been this way for me with visual art - is not being able to translate the awesome ideas in my head into reality. Even when I try to practice what I preach, it always comes out subpar. Part of it is abstract - what is good design? what is good typography? - and part of it is technical - how do I make that cool looking logo? what size should by buttons be? CSS positioning w/ floats and absolute positioning.

    Are there any technical (i.e., Photoshop, CSS, size-standards, etc.) resources you (the collective you) can point me towards? If I can have a better grasp on my tools and how to use them, maybe the design mental block I have will disappear, too. Being able to look at an existing theme and say "Yeah, I can do that," or, "I see how they did that" would help me a lot, I think.

    PSN/XBL/Nintendo/Origin/Steam: Nightslyr 3DS: 1607-1682-2948
    Switch: SW-3515-0057-3813 FF XIV: Q'vehn Tia
Sign In or Register to comment.