I’ve been designing web sites for about nine years now. In that time, I’ve made just about every mistake known to man, but I learned more than I ever could have reading some book or taking a class. I’ve gone from a Front Page rookie to a wily PHP designer and hit every bump in between. I’ve tried ASP, ASP.Net, PHP, HTML, XHTML, CSS, CGI, java script, action script, and just about every language you can think of. And, over time, I’ve developed a simple method for creating stunning web site designs faster, easier, and more fun that most people could imagine. Now, I feel obligated to share with you the method I wished I’d had when I first started out those nine long years ago.
How NOT to Think About Web Design
It’s important to always start off with the right kind of mindset when taking on any project and designing web sites is no different. One of the biggest road-blocks I encountered on my journey is my own fear of “getting dirty” with the code. For the first four years, I was purely a Front Page guy… never daring to venture into the code unless I absolutely had to It wasn’t until I became absolutely frustrated with the limited nature of the software that I slowly inched my way into learning some HTML.
And, let me tell you… from the very first day, I’ve wished I would have been more brave sooner. Learning code is easy, because it’s so logical. Most programming languages, especially today, operate off simple common sense and logic. And, once you begin to learn some code, you realize how much more you can do knowing just a tiny bit of code.
So, my first piece of advice is to NOT do what I did. Don’t spend years frustrated by a software program that will never give you the control you’re looking for. If you’re serious about being a web designer or designing truly professional web sites, learn the code. It’s simple, it’s easy, and even a basic knowledge of a couple programming languages allows you to do much more than you ever could with any software program.
Now onto the cheat sheet…
Step #1: The Pre-Step
If you’re like me, your first instinct when you come up with a new idea is to immediately rush to the computer and start working. Not so fast, my friend. One of simplest and most effective steps you can take to make your life less stressful is to take a moment and simply draw out the layout of the design you see on a piece of paper.
It might sound stupid and frivolous, but it makes such a huge difference. It’s as if the mind suddenly focuses once you put your idea on paper. By putting it on paper, you define exactly what elements you want to have on each page, what the overall look and feel should be, and you give your mind a specific and focused direction in which to aim.
No matter how silly it may or may not seem, draw out your design first!
Step #2: Lay Out Your Files
If you’re using current web design standards (and you should be) then every site you build will have a similar set of core files: 1) header.php, 2) footer.php, 3) sidebar.php, 4) style.css and 5) your individual content pages (i.e. index, about, contact us, etc.). Go ahead and create these files right off the bat. You know you need them, so just create them, and include them in a index.php file (Note: if you’re not sure what I’m talking about here or how to do it, see the resource box below).
This gets the core functionality of your site out of the way, that way you can focus on designing and you can test your site live to see how it looks.
Step #3: Build Your Page Layouts
Here’s where you’ll need to decide exactly what elements the pages of your site will have and where they will go (we’re not worried about what they look like, yet). What will your header look like? Will it have multiple columns or just one? Will you have a navigation bar at the top or in the sidebar? Will you have a sidebar? What about your footer? Where will it go? What kind of elements will it have?
This is where you lay out the basic structure of your site – kind of like building the walls of a house. You’re not painting and hanging up pictures, yet – instead, you’re making the blueprint that determines how it all comes together. Lay all this out first.
Step #4: Conduct Basic CSS Styling
Now, that you’ve got your “walls” up, it’s time to start to add some insulation and drywall and see how it all looks. In other words, you’ll want to do some very basic styling. Get your divs lined up how you want – the right heights and widths, their basic layout and shape.
A little trick I use is to make all my main divs (which should usually be header, content, sidebar, and footer) a different color, so I know which div is which when I look at it in a browser and I can see if everything is lining up how I want it to. In fact, I’ll leave these colors applied throughout most of my design work, so I can see how everything is coming together.
Step #5: Build Your Design Elements
This is where you’ll spend the majority of your time – and, you’ll spend it in Photoshop (or whatever graphics program you use). This is where you create your background images, logo, bars, headers, and so on. This is where most of the creative work actually takes place.
Build your design elements, test them, and get them exactly how you want them. Don’t move on from here until you’ve got it exactly how you want it. And, of course, you may decide to outsource this portion of your designing, but, at least if you do, you have a much more clear idea of what kind of elements you’ll need – which can save you time, money, and frustration.
Step #6: Check Browser Compatibility
I test my designs in Firefox as I build them, so inevitably I have check to see how Internet Explorer renders my site. At this point, you want to stop and do this for the major design elements you’ve built so far. There’s nothing more frustrating than building an entire site only to find out it causes Internet Explorer to have a heart attack.
It might seem tedious, but trust me… stop here and check. You have a lot less code to work through and if you handle the major issues now, it typically works out to be less work you have to do later.
Step #7: Integrate Web Technology
Now, you’ve got your major design elements down, you have your site mostly in place, and it’s time to add in your major technology elements. It’s important to do this now before you do anymore CSS styling, so you can see how that technology will integrate into your site. If you’re building a WordPress Theme (which you can do following this same method) this the point when you would integrate the WordPress PHP code into your design.
Step #8: Advanced CSS Styling
At this point, you should have your site mostly built structurally… now, you can begin to finalize your CSS styling. Another thing to keep in mind is that this stage never really ends. I’m always tweaking my sites here and there. The great part is with CSS you can style elements very specifically and get them exactly how you like them.
Step #9: Validation
Oh yeah… validation. For some people, this might be optional, but, for me, it’s not. Building a site that validates is the sign of a professional web designer. Not to mention, it’s rumored that Google pays attention to this. It’s really not that hard to do and, typically, on takes me a half an hour to hour to knock out. It’s well worth the time in terms of reputation, credibility, and search engine rankings.
Wrapping It All Up
Well, that is my cheat sheet and the exact method I use to design web sites. It took me about five years to get it down to a science like this, but it was worth it in the end. Of course, we’re not able to cover any one topic in too much detail here, so if you’d like to learn more about web design, be sure to check out my resource box below.
John Morris is a web designer, developer, and builder and the creator of JohnMorrisOnline.com where he teaches aspiring web designers and internet business owners the most effective methods to learn web design. If you’d like to learn more about web design tricks and techniques, check out John’s web design tutorials… free at JohnMorrisOnline.com
w5online
copro
i-revo
planete-fournil
salestube
ddm-friends
blogote
oikos-international
expohip
stayfocusd
unitconversion
eisp
uecard
sbi
as-studio
manlymanco
jasoncosper
mzcmc
javerdel
hyundai-autoever
guamvisitorsbureau
jeweledplatypus
miyaben
cbmie
arroba
volvoaffinity
iperiusbackup
cam
bundesprogramm
censordodge
grizzlybeatz
manitobah
parcopan
freshdesignblog
lelesadoughi
urnex
swkt2cwe
prodepa
kanda
sonalksis
studentnews
gaya
angelika-schwaiger
openbay
respeecher
bychari
748949
happyhomepets
ludlowassemblyrooms
websleuths
flooret
kingnct
winauth
nidatraining
italian-web
roggensteinelektronik
luettgen
sportsbetreviews
secondharvestnwnc
hidden-london
funtopics
thebrandbuilder
sowosky
cc-28
lavoixdelain
klub-drug
cnfpia
ufabetwin
saforum
gag-koeln
westportlibrary
a6699
picmonic
meticulousjessmarketing
propzy
nipgroup
omdgear
dmall
lion-rugs
222
741402
fsjuou
softronics
suitebriar
tangjiu95
eplabdigest
primomarcos
superlabs
evermee
urbanremedy
pargas
upgrade
free-spins
51
poland-export
mywebar
dac4
xinguangyin
montbell
mwstore
desaparecidos
abajillianrecipes
thismamaloves
blog-edu-40
techlightweb
re-dzoi
delour
pferdesportwestfalen
216
sparqtools
rhodecode
cle
rakugo-kyokai
cruisesonly
thewheelspecialist
dsbj
apat
npumd
verygames
projektomania
gites-de-france-isere
elpasozoo
ateneodemadrid
orocrm
infinityelearning
zktff
241252
timesinfor
taprootplus
gehwol
weigj
matthewtapp
mspworldconference
6180018
sunflowermaids
wiredtiger
flatcar
teeshirt21
cadysneakers
diputados
hardwareonline
smsphoneleads
digitaltechnologyguide
engineforex
revizija
architektenservice
xenonfactory
nsrv
11017
vhs-ol
mennonitebrethren
0pk
xehopdongvungtaugiare
odeoncinemas
ahec
awdp
pr
reuseit
emediaefx
manganelo
harrietlerner
cwhonors
iop
