I’m going to talk about designing this week, not coding per se, but designing: placement, colors, procedure. Today’s article I guess I would file under “procedure,” though I hate that term, because procedure sucks even when it has its purpose. The purpose of procedure today is to save you time and make your life easier.
When you are designing your webpage/site/element/what-have-you, never ever ever START designing in an HTML editor. You START in a graphics editor, such as Photoshop or GIMP. The biggest rookie mistake is starting a design in Notepad or DreamWeaver, uploading, testing, uploading, more testing, rinse and repeat 100 or so times before you finally *headdesk*. Good grief. I did that so many times when I first started out, and all my webpages looked like crap.
So, let’s start from the beginning. There are 2 basic phases for building a webpage: designing and coding.
Just as if you were drawing, you sketch first. You find the lines, decide where elements will go, and you make the lines thicker and more permanent. You decide if you want to ink it, or paint it, etc, when all those lines are in the right place. All of that is the designing phase. Think of the coding phase as framing and matting that piece of art you just completed so that you can display it in a gallery (the internet). You don’t start sketching on the wall of that gallery, because ONLY FINISHED PIECES are displayed in the gallery. Still with me here?
Now, AS you design your webpage in your graphics editor, what you need to do is keep in mind your coding skills as you build. THINK in the terms of the coding you will be doing, and don’t design past your skill set unless you are willing to do the research to find out how to do a certain thing, or can find someone to do it for you. The easiest way to do this is to think in terms of square or rectangular shapes. The more irregular your design, obviously the harder it will be.
But I’m getting a little off-track here. Lesson number one for you beginner webdesigners is always start in a graphics editor, not an HTML editor.
March 25th, 2009 - 4:53 am
Thanks for writing this :)
It’s very useful information to know :)
Photoshop is one of my strong points so knowing that I can start a site in photoshop and then code for that is better than thinking I’ll have to code and then add photoshopped stuff to that :)
- Piro
March 25th, 2009 - 12:12 pm
I personally start out my webdesigns by doing sketches on paper. I know perfectly well how code will map to the results I want, and I don’t use a lot of graphics in my designs (so I don’t need to have stuff ready to slice-and-dice), but knowing what I want to do is an important first step. I suppose that with a liberal enough definition, a piece of paper and a pencil qualifies as a “graphics editor.”
It helps a lot to understand the CSS box model, also. Making a design around what HTML/CSS excels at is a great way to reduce how frustrating it is to get things working. Keep the layout simple, with a simple vertical stacking of basic elements, which you could further split into horizontal elements, but do so sparingly. Don’t design around a fixed screen width. Don’t have image-based borders around things. And so on.
March 25th, 2009 - 6:57 pm
You know, I’ve heard that general advice before, but always ignored it. (Granted, I haven’t designed my own website since middle school, just little tables and stuff.) But your explanation makes so much sense. Thank you!
March 25th, 2009 - 10:53 pm
@fluffy, I used to start my designs on paper too! Since I have a tablet, I just sketch in photoshop now. My next article, I THINK is going to be a summation on the differences between how HTML and CSS work–the stuff I wish someone had told ME when first started. Instead, I just *headdesk*’d my way to understanding. Shortcuts, FTW!
March 25th, 2009 - 11:58 pm
The last few CSS designs I did I started out with code instead of sketches, but that’s just because it’s so easy for me to think in code/CSS and make things come out exactly as I want them to right now.
I really do dislike starting in PS to come up with simpler designs sometimes, but it’s definitely helpful and most times necessary (like if I had to do anything professionally – in which case it’s very important as I’m actually conveying ideas to someone else).
March 26th, 2009 - 5:52 am
One thing that gets me when doing webpages in photoshop is… How big should I design it to be in PS?
1000x900px?
Whats the general standard size? If there is one.
Looking forward to your next piece KEZ.
- Piro
March 26th, 2009 - 10:26 am
Always design so it will fit in the “smallest common denominator” browser. That used to be 800×600, but it’s pretty safe to say 1024×768 now. Most people using resolutions larger than that. I personally open a 1280×1500 window in PS and start there, because I like to have gutters and margins to frame it while I’m working.
It’s important to realize that despite a larger browser size available to the webdesigner, it’s still important to keep your site “tight.” I won’t say small, because the best sites change conformation to fit ANY browser, but by tight I mean streamlined, cut the fat, etc. Always aim for the least amount of clutter and the best organization, and show the importance of elements by where they appear. The most important things should be top left, and the least important, bottom right.
Back to your question though, when I open mu 1280x1500px file, I usually start with a box 1000px wide and try to go smaller from there. Even in 1024×768, it’s good to have a margin on the sides. I don’t ever aim for a width above 1000 when I design sites.
A tip I found helpful: viewing the gridlines helps me keep large PSD site templates in perspective. I set my gridlines to 100px cut once at a 50px interval. I also press control+R for the ruler, also set to pixels. You can display your gridlines by going to view->show-> gridlines, and you can edit their display by going to edit->preferences.
March 31st, 2009 - 5:22 pm
This does seem to link to the idea you mentioned referring to the “web” of webcomics?
It is to every artist’s benefit to be able to have a site that is at least representative of the style and the nature of the comic, I’ve seen some websites that are far more attractive than the comics that present them, and others that are as ugly as the CG default template (plain text links?!) A great site can really enhance the feel and impact of a webcomic even subliminally.
For what’s it’s worth I’ve gone through (at least) 6 revisions. I spent some time drawing up some sketches with some measurements, (VERY IMPORTANT) and an idea of what I wanted where and how and learnt the skills to make it happen, but it doesn’t end there! Sometimes things work great, sometimes they blow and to be honest, sometimes I’ll look back months later with some experience and techniques and think “perhaps there is a better way”.
Checking out how other people do things is a good way to see what does work…as does this blog actually!