My Web Design Cheat Sheet – 9 Tips to Make Designing Websites Faster, Easier, and More Fun
It’s important to always start off with the right kind of mindset when taking on any project and
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
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
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