This morning I got up early to enjoy some coffee and morning reading time before the kids woke up.  When the time came, I got them up, and fixed them some breakfast while they got dressed for the day.  My wife double-checked their outfits, as I have a tendency to be more lenient in what goes with what.

As the bus picked up the kids, and my wife left for work, it was time to get down to business.  I worked for a few hours on a website concept for a client, and made a few adjustments on a banner design for another client.  With my laptop in tow, I headed over to visit a few leads and describe my services, and how I might benefit their business.

At around 1:00, I met with a buddy for lunch to discuss how business was going, exchange ideas, and network.  I excused myself at 2:00, to head home where I spent a couple of hours answering emails, reading informative and inspiring blogs, and improving my skills in a new technology (which is currently Adobe Flash).

4:00 came around and the kids came running in.  They grabbed a snack (an apple, right?) , and plopped themselves in front of the PlayTendo 360.  It was at that time that I logged out of the computer, turned off their video game system, and went out front to shoot some hoops with them.

***********************************

Okay, so this didn’t really happen, but I would like it to.   I am in the process of figuring out what makes this happen.  I’m meeting great people these days, reading some great books, and finding some great inspiration.  The consensus that I’m getting is–there’s no reason why this can’t happen.

In an effort to become better at web design and markup, I have decided to create a sample website for a fictitious catering company. I have incorporated some new (to me) ideas into this page, as well as continued to develop some coding skills that I had previously known. All-in-all, I learned a few things:

1. Designing before markup makes life easier. I approached this project by marking up a basic layout first. I continued to add elements as I felt necessary, but towards the end I realized that I wanted to scrap the whole design and start from scratch. Next time I will lay out the site with Photoshop, adding and deleting items as I find aesthetically pleasing, and then figure out a way to code it all.
2. Keep your headings, even if you replace with images. The Carrie’s Catering title at the top of the page is a graphic, but there is also an h1 in there too. The reason why I had to keep the h1 tag was because it is essential for SEO and accessibility. The method I used to replace the h1 with a graphic was to supply a background image via CSS, and intent the text -9999 pixels off of the screen. The problem with this is that a print preview doesn’t show any text or image, as background images are not printed by default. To correct this, I created a separate stylesheet for printing only (media=”print”) that reversed the negative indent. There is a much more in-depth discussion of this procedure as well as a selection of different methods of accomplishing it at A List Apart.
3. Consider creative background options. When I showed my wife the site on my widescreen monitor, she wondered why there was so much flat color on the edges of the page. I explained that it was to accomodate for people who are still using 800 x 600 monitors, and after I resized the window, she understood. However, I began to think that there might be some better options out there other than leaving the majority of the screen a boring flat color. As far as I can tell, there are three options:
   1. Use JavaScript to determine the screen resolution of the viewer, and create a stylesheet that compliments that resolution.
   2. Use more interesting textures that tile in that background space. A good example of textured whitespace is at Bart-Jan Verhoef’s site.
   3. Have content divs that float next to each other and resize dynamically based off of screen width. This technique can be used to spread out the whitespace that is created on wide monitors.
4. Use high-quality images when appropriate. Again, my wife pointed out that the “wedding,” “corporate events,” and “private parties” buttons were too boring. At this phase of the site, it isn’t even clear whether you should click on those pictures or simply appreciate them as a creative list of what the company does. I should have added text above them to make it clear what the pictures are for. I also should have included a photograph on each one, to make them look more exciting.

In preparing for my graphic design final tonight, I was trying to memorize the “5 stages of the design process”. As a web developer, I naturally wanted to apply these principles specifically to website design:

1. Research. When designing a site, several major questions need to be addressed. What functionality must be provided in the site? Does the organization or individual have a color scheme already, and if not, what would they like their color scheme to say? Is the site to be edgy, modern, grungy, clean, classical, professional, etc?
2. Creative Thinking. If you get to chose colors, play around with different combinations. Does custom artwork need to be generated? Browse other sites with similar goals, pick up good ideas and avoid bad ones. Surf stock photography and vector image sites for ideas to toss in. Go for a jog and think.
3. Roughs. Start sketching ideas feverishly. As quick as they come to you, draw them out. Do not stop for reflection. Try to come up with a wide variety of sites. Several aspects of each will stick with you.
4. Comps. Refine the best of your roughs into, say, three quality sketches or Photoshop layouts. These should be quality enough to present to the client (or your grandmother, whoever the site is for).
5. Final. Produce the finished product based off of the comp that your client liked best.

If you are designing a site for yourself, follow this procedure as well. If you are designing a site for your grandmother, follow it still. Get in the habit of professional design procedures, and your work will show the effort.