Self Study Stunner

For a substantial amount of time I’ve been yapping on about how important the summer will be for undertaking some self study. As there is a generous 3 and a half months off college, it is simply too big an opportunity to miss doing some interesting new projects, without feeling under the cosh of impending deadlines.

Since college ended a couple of weeks ago, I have been doing some projects to try and keep my skills sharp, while adding some new abilities to my web designing toolbox. After the last website I made for the A7 assignment, I have wanted to gain more experience with CSS, as I could see its potential.

My chosen project was to create a website for my online racing team (geeky, I know) which would use some of the techniques I didn’t have chance to use on my Ambient World website. I initially started with a few basic sketches (which I have tried to do a bit neater!), just so I could get my head around what pieces of the site needed to be where.

To be totally honest, I didn’t do all that much designing. I wanted to find out how I would cope with designing “on the fly”, much like the ex-students do in their real jobs. My initial roughs can be seen above.

My design consisted of a header, horizontal navigation, and 2 columns – one for the content, and one for any links that were relevant to the content of each page. I knew from the start I would be using the ‘faux columns’ method, as this is a technique which I did not get chance to use on my Ambient World site.

Faux columns are basically a horizontal background image split into blocks for your columns, and then it is tiled vertically down the page. It still amazes me how Heath-Robinson this technique is, and how it is the only effective way to do column designs easily.

Once my background was in place, setting up my divs was fairly straight forward, as I could use similar code to what I had used in my Ambient World site. This time however, I decided to float them rather than use absolute positioning. This method is supposed to be better, and it worked a treat once all of the sizes had been set up correctly.

For my navigation, I looked for a tutorial, and found out that this was also very similar to my Ambient World website. This time however, I found that showing the active page could be done in a more streamlined way, as the ID part of the CSS could just be called active, and could be added via the class=”active” command of the button which would be highlighted.
For my text I had decided to use classes, as styling text in the divs would override the h1 and h2 tag’s size attribute. This worked well, and I used Arial for a simple, clean and uncluttered look.

As I wanted a news page for my website, I needed to search for a simple method where I could add news to the page without having to mess about uploading pages. My research lead me to a program called CuteNews. This uses PHP to draw information from a file on the server, and place it into your webpage. I had to install this feature into a folder in my hosting, and then put a reference to it in my HTML. This was easily achieved, and adding news was simple. However, this was not styled into the correct texts, so I had to add some HTML to the templates which the software provided. After a little bit of playing about, I managed to get my text to style in the correct way, and it now matched the styling of the rest of the website.
Now that all the structural elements were in place, it was just a case of putting content and pictures into my website. For the ‘Teams’ page I put a faded border onto the pictures, which was the same colour as the column. This subtle effect makes the images blend into the page, creating a more cohesive, and in my opinion, more attractive look. For the gallery, I made the thumbs so that they showed an oblong section of the full size shot, and again used the faded edges (or selection > border 10px > then fill in PS). I then put all the images together by just using HTML. This creates a simple but effective looking gallery, without having any complex CSS or Javascript.
My website was, on the whole, pretty much complete. All I needed now was a domain for it, which I had bought on my hosting company’s site. It was pretty simple to get it pointing in the right place, but I still find all the hosting and Cpanel side of things a bit perplexing. I think it’s something I’ll just have to dive into and get my head around, as I’ll be using it more and more in the second year.

There were now just a few small elements to implement. I wanted to find out how websites got the little icon to appear in the favourites list, and found this tutorial, and this Photoshop plug in which would allow me to do this.

One of the last things to do was also one of the most important: validation. I did this by using the link in the web developer’s toolbar, and thankfully there were only a few small things to fixed, like unclosed tags and pieces of CSS without closing brackets. I chose to use the blue w3c logo on my site to complement the design, and they are proudly displayed on the front page. If you click them, it will take you to the validation page and will (hopefully!) say that the website is validated.

My website is now complete, and is available to view here. I think it is a big step up from the website which I only created a few weeks ago, and goes to show just how quickly you can pick stuff up if you apply yourself to it. Validating my site is also an important milestone, and should set me up well for the summer assignment. I’d be most grateful for any constructive criticism which you have.

Over the next week I am planning on doing some small pieces of print design, and also making a start on the summer assignment. I am hoping to create some simple postcards, as a trip to the Sculpture Park the other day highlighted the amount of design which goes into making a postcard in terms of positioning of the picture, using bleed on the front picture, and where the various elements on the rear are situated. I’ll keep you posted on them as I make progress with these designs.