| I've been designing web sites for about nine years | | | | This is where you lay out the basic structure of your |
| now. In that time, I've made just about every | | | | site - kind of like building the walls of a house. You're |
| mistake known to man, but I learned more than I | | | | not painting and hanging up pictures, yet - instead, |
| ever could have reading some book or taking a class. | | | | you're making the blueprint that determines how it all |
| I've gone from a Front Page rookie to a wily PHP | | | | comes together. Lay all this out first. |
| designer and hit every bump in between. I've tried | | | | Step #4: Conduct Basic CSS Styling |
| ASP, ASP.Net, PHP, HTML, XHTML, CSS, CGI, java | | | | Now, that you've got your "walls" up, it's time to |
| script, action script, and just about every language | | | | start to add some insulation and drywall and see how |
| you can think of. And, over time, I've developed a | | | | it all looks. In other words, you'll want to do some |
| simple method for creating stunning web site designs | | | | very basic styling. Get your divs lined up how you |
| faster, easier, and more fun that most people could | | | | want - the right heights and widths, their basic layout |
| imagine. Now, I feel obligated to share with you the | | | | and shape. |
| method I wished I'd had when I first started out | | | | A little trick I use is to make all my main divs (which |
| those nine long years ago. | | | | should usually be header, content, sidebar, and |
| How NOT to Think About Web Design | | | | footer) a different color, so I know which div is |
| It's important to always start off with the right kind | | | | which when I look at it in a browser and I can see if |
| of mindset when taking on any project and designing | | | | everything is lining up how I want it to. In fact, I'll |
| web sites is no different. One of the biggest | | | | leave these colors applied throughout most of my |
| road-blocks I encountered on my journey is my own | | | | design work, so I can see how everything is coming |
| fear of "getting dirty" with the code. For the first | | | | together. |
| four years, I was purely a Front Page guy... never | | | | Step #5: Build Your Design Elements |
| daring to venture into the code unless I absolutely | | | | This is where you'll spend the majority of your time - |
| had to It wasn't until I became absolutely frustrated | | | | and, you'll spend it in Photoshop (or whatever |
| with the limited nature of the software that I slowly | | | | graphics program you use). This is where you create |
| inched my way into learning some HTML. | | | | your background images, logo, bars, headers, and so |
| And, let me tell you... from the very first day, I've | | | | on. This is where most of the creative work actually |
| wished I would have been more brave sooner. | | | | takes place. |
| Learning code is easy, because it's so logical. Most | | | | Build your design elements, test them, and get them |
| programming languages, especially today, operate off | | | | exactly how you want them. Don't move on from |
| simple common sense and logic. And, once you begin | | | | here until you've got it exactly how you want it. And, |
| to learn some code, you realize how much more you | | | | of course, you may decide to outsource this portion |
| can do knowing just a tiny bit of code. | | | | of your designing, but, at least if you do, you have a |
| So, my first piece of advice is to NOT do what I did. | | | | much more clear idea of what kind of elements you'll |
| Don't spend years frustrated by a software program | | | | need - which can save you time, money, and |
| that will never give you the control you're looking for. | | | | frustration. |
| If you're serious about being a web designer or | | | | Step #6: Check Browser Compatibility |
| designing truly professional web sites, learn the code. | | | | I test my designs in Firefox as I build them, so |
| It's simple, it's easy, and even a basic knowledge of a | | | | inevitably I have check to see how Internet Explorer |
| couple programming languages allows you to do much | | | | renders my site. At this point, you want to stop and |
| more than you ever could with any software | | | | do this for the major design elements you've built so |
| program. | | | | far. There's nothing more frustrating than building an |
| Now onto the cheat sheet... | | | | entire site only to find out it causes Internet Explorer |
| Step #1: The Pre-Step | | | | to have a heart attack. |
| If you're like me, your first instinct when you come | | | | It might seem tedious, but trust me... stop here and |
| up with a new idea is to immediately rush to the | | | | check. You have a lot less code to work through and |
| computer and start working. Not so fast, my friend. | | | | if you handle the major issues now, it typically works |
| One of simplest and most effective steps you can | | | | out to be less work you have to do later. |
| take to make your life less stressful is to take a | | | | Step #7: Integrate Web Technology |
| moment and simply draw out the layout of the | | | | Now, you've got your major design elements down, |
| design you see on a piece of paper. | | | | you have your site mostly in place, and it's time to |
| It might sound stupid and frivolous, but it makes such | | | | add in your major technology elements. It's important |
| a huge difference. It's as if the mind suddenly | | | | to do this now before you do anymore CSS styling, |
| focuses once you put your idea on paper. By putting | | | | so you can see how that technology will integrate |
| it on paper, you define exactly what elements you | | | | into your site. If you're building a Wordpress Theme |
| want to have on each page, what the overall look | | | | (which you can do following this same method) this |
| and feel should be, and you give your mind a specific | | | | the point when you would integrate the Wordpress |
| and focused direction in which to aim. | | | | PHP code into your design. |
| No matter how silly it may or may not seem, draw | | | | Step #8: Advanced CSS Styling |
| out your design first! | | | | At this point, you should have your site mostly built |
| Step #2: Lay Out Your Files | | | | structurally... now, you can begin to finalize your CSS |
| If you're using current web design standards (and | | | | styling. Another thing to keep in mind is that this |
| you should be) then every site you build will have a | | | | stage never really ends. I'm always tweaking my |
| similar set of core files: 1) header.php, 2) footer.php, | | | | sites here and there. The great part is with CSS you |
| 3) sidebar.php, 4) style.css and 5) your individual | | | | can style elements very specifically and get them |
| content pages (i.e. index, about, contact us, etc.). Go | | | | exactly how you like them. |
| ahead and create these files right off the bat. You | | | | Step #9: Validation |
| know you need them, so just create them, and | | | | Oh yeah... validation. For some people, this might be |
| include them in a index.php file (Note: if you're not | | | | optional, but, for me, it's not. Building a site that |
| sure what I'm talking about here or how to do it, see | | | | validates is the sign of a professional web designer. |
| the resource box below). | | | | Not to mention, it's rumored that Google pays |
| This gets the core functionality of your site out of | | | | attention to this. It's really not that hard to do and, |
| the way, that way you can focus on designing and | | | | typically, on takes me a half an hour to hour to |
| you can test your site live to see how it looks. | | | | knock out. It's well worth the time in terms of |
| Step #3: Build Your Page Layouts | | | | reputation, credibility, and search engine rankings. |
| Here's where you'll need to decide exactly what | | | | Wrapping It All Up |
| elements the pages of your site will have and where | | | | Well, that is my cheat sheet and the exact method I |
| they will go (we're not worried about what they look | | | | use to design web sites. It took me about five years |
| like, yet). What will your header look like? Will it have | | | | to get it down to a science like this, but it was worth |
| multiple columns or just one? Will you have a | | | | it in the end. Of course, we're not able to cover any |
| navigation bar at the top or in the sidebar? Will you | | | | one topic in too much detail here, so if you'd like to |
| have a sidebar? What about your footer? Where will | | | | learn more about web design, be sure to check out |
| it go? What kind of elements will it have? | | | | my resource box below. |