To Jump on a Bandwagon

Let’s cut to the chase. The big players (MSN, Myspace, Windows, ABCnews, etc.) are all using blue-themed websites. Skies are blue. Water is blue. Blue Gatorade is blue, and so is archrival and nemesis blue Powerade. Slime Volleyball’s background is blue. Even my favorite color is blue. (Note: bluegrass is not blue, despite the misleading name)

I want to be with the in-crowd. And so I began the quest for a redundant blue webpage.

I started off with an all-encompassing wrapper, in order to wrap everything up. I also made a container to contain the content and navigation, and a content box so that my visitors would be content. My biggest challenge was choosing different shades of blue. After mere seconds of deliberation I felt ‘deep ocean blue’ was the best color for the background. I applied an original and underrated technique – the gradient. Powerful and underused. (I kid I kid).

Despite being a joke website, it actually turned out very nicely. I even went as far as to give it a slogan from Sloganizer. I know, I went out on limb for that one, but I think in the end it was totally worth it, man.

Sad but true

My web design class is a bit of a joke. No one knows anything about web design save for me and a friend of mine. In fact, the person that knows the least about web design is the teacher.

But at least the class gives me practice. Our latest ‘project’ is that of the “Preservation Society of Rural Texas”, a fictional organization made up (probably stolen, actually) by our teacher. He plays the part of the client, wanting a website for his organization. Our job is to come up something with that meets the demands of his ‘society’. It is probably the closest assignment to real freelancing or company-based web design we’ve done, of which I am grateful.

I started off with my empty code template, and began the wireframing process. In class we had to produce storyboards for each page, which was a huge waste of time because each page was basically going to look the same as the others. Each page would have the initials ‘PSRT’ up top, along with the slogan. Then there’d be the content box, and on the left side would be a sidebar for navigation and then finally a footer below. The home page would be slightly different, with a quick header designed in Fireworks at the top of the page. Minutes later and I had a design I felt very comfortable with, a design that would work well most importantly.

Next I added in the actual header, and some filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Oh, oops, that was supposed to go into the content box. Anyways, after the text I began adding colors, much to the dismay of any of my color-blind blog readers. Sorry, guys. To everyone else:

The website is already ‘good’ enough for my classmates to gawk at it, so I guess it isn’t too bad. But I’m not too excited about my website being different shades of human waste.

This hurts my eyes

The internet has often been compared to an ‘information superhighway’. I thought of a different analogy. The internet is like my dirty room. My room contains half-empty bottles, dirty cereal bowls, books strewn about, clothes in awkward places, and wads of paper in places where I am forced to question how they got there. Not unlike the internet, I’d say. In the realms of web design, what does all this talk mean? Some sites are just very low quality. They’re dirty, unclean, unkempt. I bet they’re fun to make though.

I started off with my regular web design time-saving template. Then I picked matching colors, designed a basic layout, thought of a theme for the website, and wrote a little bit of content.

Next, I threw all of that in the trash. I began to put together a site that resembled a clown school gone awry. I made sure to use colors that didn’t match, the mark of any good website. Together, the colors formed ‘Wacky Fun World!’, a name I felt was appropriate to the overall feel of the site. Oh and by the way, here was what I laboriously churned out after careful consideration to positioning, structure, color, and quality content.



Not bad, huh?

Pagination Domination: Reiteration

Clever title, eh? I thought so too. This is part two of Pagination Domination, a particular style of navigation that I’ve incorporated into a new website I’ve designed. The fruits of my labor will be explained and shown below.

Where did we leave off, anyway? Oh yes, we had a wireframe - a boring, bland wireframe, but a wireframe nonetheless. I don’t know about you, but I am not too fond of shades of gray. It needed to be kicked up a notch, so I headed over to ColorSchemer. After browsing for what was probably too long, I did manage to pick out a set of colors that I felt would work nicely in conjunction with the site theme. I quickly decided colors for each section of the site (i.e. the lightest color on the template for content) and a few copy-and-paste’s later my design had been brought to life.

Colors are often the central part of a design, but they are not the final part. Text and image effects are important too. Bearing this in mind, I set out to experiment with fonts and background effects. While the earlier phases had gone very smoothly, it was at this point that I started to hit the road bumps. These road bumps eventually became road blocks, as like a true nerd I was torn between two fonts for the header. While it may seem like it isn’t a big deal, you’re right. Upon that premise, I randomly picked one and continued on my way.

I felt a logo was needed to help accentuate the presence of the header. With a bit of experimentation into Photoshop I was able to come up with a rough idea for a logo – several boxes that correlated to the pagination-style navigation I had in place. After a brief conflict with colors I reverted back to ColorSchemer to settle upon another color theme for the logo.

After formatting the logo into the header, changing the text, and mixing in a gradient here and there, I was finished. Overall, the design work was very easy compared with ways I’ve done it in the past.

I will definitely be wireframing and ColorSchemer’ing in the future.

Pagination Domination [part 1]

"Pagination Domination" is an idea for a website that I derived from FOX network’s "Animation Domination", a two-hour segment of new shows. Pagination is a web design term where, well, I can best explain only by example. Look at the navigation on Ellis Labs, where the current page button stands out from the rest of the links. I have never done a pagination-style navigation before on a website, and I knew I wanted to try it. Plus, I had recently learned of a new technique for planning the layout of a webpage and I wanted to try my hand at that too. At this point, I knew there would probably be only two possible outcomes: I would cry myself to sleep at night, haunted by the hideous monster I had created, or I would rejoice to the angels of web design. I wasn't too fond of the first choice.

Planning

The planning phase began yesterday afternoon. My first step was to head directly over to Dynamic Drive's CSS library, to pick up a free pagination example. Wow, that was a lame first step, wasn't it? I can only agree, but I do have some defense here – it was my first time and I needed a bit of a push in the right direction. So take that.

The next step was to make a copy of my template, a folder with only two mostly-empty files. But these files are a huge time saver for me, as most of my websites begin with me typing the same exact thing each time. The template I have created (continue to tweak) has set up most of the beginning work for me, so I can dive right into getting the harder parts out of the way. I would recommend this practice to anyone who builds multiple websites or plans to in the future – saved time is saved money.

After inserting the pagination code into my blank template files, I began the new technique I namelessly mentioned in the introduction: wireframing. This is something I’m sure most web design professionals have been doing for years, but I've just now picked up on it and in hindsight, it does work well. This is where elements of a website, such as the header, footer, content boxes, sidebars, logos, etc., are just roughly sketched out via an image editing program. I decided I wasn’t going to use Photoshop for this though, and would instead code everything directly into my template. I don't think it was necessary for me to attempt to draw out a website I would not even be publishing online. After some simple editing, I came up with this:



Tune in on Monday for part two of the design!

Link of the Day

Today’s Link of the Day belongs to SEORat.com – “A new way to track Web 2.0”. I could try to explain, but their introduction puts it nicely: “SEORat is a website that monitors, tracks and displays several different types of backlink related information for any given web site. The purpose of SEORat is to actively monitor sites rather then having to do manual lookups on other websites.” Check it out!

Site Update

Now, I'm not a huge fan of cliches, but I'm about to pull one out.

Quality over quantity.

Yes folks, I regret to inform you webdivine will be switching to an every-other-day blog, so you will no longer be able to expect updates every day. This is for the good of the site. I can't churn out worthwhile articles every single day, so to remedy this I will create my blog posts over two days.

This will begin tomorrow, so check back tomorrow.

Weekly Site Spotlight

Time for the... Weekly Site Spotlight!

This week's spotlight goes to: EnergyRace - "Make a Difference. Measure it here."





I'll be using the 4 C's grading scale for this one.

Creativity: 8 (nice little wavy top thing eh?)
Cleanliness: 9 (very clean!)
Color: 9 (decent mix/blend)
Code: 9 (logical and whitespace used well)
Total: 35/40

Not bad! Beats out last week's site spotlight by only one point.

Link of the Day

Ah, yes! Behold WebDivine's newest web design related feature: Link of the Day. In every post from now on (yes, until the end of time), I will be showing off a web design or web development link most deserving of the title of "Link of the Day".

I decided to start it off right, so I decided to choose a highly-qualified site.