If you’re like me you probably think that sketching out your design or making site maps is a complete waste of time when developing a website. But in my experience as a web developer, I’ve discovered (the hard way, as usual) that you can’t just dive right into it. You have to actually follow a process. It really is a great time saver and helps you to create a mental picture of what you’re actually doing. And that’s ultimately what will help you learn and build better sites in the future.
So here is the process that I follow:
Overview
- Brainstorming
- Planning
- Doing
- Testing
- Reviewing
Brainstorming can be done in so many different ways. But for me, the number one way to make mental breakthroughs…is by riding the subway. Yup. I kid you not. I don’t really get it, but it works for me. Figure out what works for you. Here are some ideas:
- Browse the web
- Go for a walk
- Go to a bookstore and flip through art magazines
- Browse your old projects
Planning is the most important step. If you don’t do this part, you’ll end up getting lost in your code’s logic and structure (or lack thereof, ha ha). Figure out your strategy. Write out what you’re going to do. Use a dry-erase board. Sometimes starting over and cleaning up your code is the best way to go. Make a site-map or blueprint telling where each of your links are going to go and which pages you’ll have access to. Wireframes are another good tool when building your site. They’re basically skeletons of your projected design, all laid out for you to see.
Doing is a lengthy step.
- Gather all your content.
- Set up your folders and files (be consistent and smart with your naming conventions).
- Resize your imagery (lowest possible file sizes without sacrificing quality).
- Mark up your code with HTML & CSS (get the basic structure working).
- Add functionality using JavaScript (you can follow my magic process for each of the more complicated scripts too, oh yeah).
Testing is the step that causes the most number of expletives to spew from my mouth. Because your site will be viewed on a number of monitors, browsers, and devices, you’ll have a bit of a journey ahead of you. Make sure to test your site on as many different platforms as you can. Just because it looks great in one browser doesn’t mean it will in another. Internet Explorer, I believe, is still every developer’s nemesis.
Not everything will work the first time…or the tenth. Get that in your head.
When trying to problem solve, it is important to actually pay attention to what you’re doing. In my greener years of web development, I would flip between the browser and Dreamweaver at the speed of light making slight, stupid changes and hoping for the best. But it’s better to sit back, take a short mental break, and actually think about what you’re doing. What did you do wrong? Here are some of my favorite tools:
Try another medium (such as paper, dry-erase board, textbook exercises).
- Speak your logic/code aloud or with a friend
- Firebug (you can download it here for free)
- www.w3schools.com
- www.jquery.com
- www.lynda.com
Reviewing your work is a good way to help you learn for future projects. Remember…
- what didn’t work in your project and avoid it in the future
- the methods for how to solve certain problems
Now get to work.