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.

It's flown by...

The Past

In my original blog post, the Formative Statement, I set out my goals for the future. At the time, my goals for the future were rather vague, as I only mentioned that I wanted to learn “different techniques and procedures” with new pieces of software. Since then, I have learnt substantially more than just software, which I will talk about in this post.

In the first assignment I felt that there was a lot of new information to take in, and that the process absorbing the information was a long and slow procedure. I believe this is because I had entered the course without knowing much about the workings of the internet, or the considerations to be made when designing a page. Looking back at my first website design, it looks awful in every way. Firstly, the design itself does not look pleasant, with its colour gradients and awkward layout. All that I could really take from the first assignment is that my English skills were still adequate, and that I passed it first time round due to the substantial amount of error checking which I did.

The run up to Christmas 2006 was a tough time, as we had two assignments running in parallel. I found that making the content for the web plan was a much more time consuming task than I had anticipated. During these two assignments I started to feel a lot more settled in, having got the first assignment out of the way. My web design skills for this webplan were substantially better than the first as I had put a lot more research into the layout. I believe this will be key for next year when we will be making a website for a real client.

My strategy was to keep the design simple, even if this sacrificed aesthetics somewhat. In some ways I think that I should have challenged myself more as it would have been beneficial in the long run. In the future I think I should make greater challenges for myself, as I think this way I will learn a lot more from overcoming problems, rather than just avoiding them by staying in my ‘comfort zone’.

It was during these units that I decided to use InDesign for an outside college project. This decision would end up paying dividends further on in the year, and I now believe that doing additional projects outside of college is essential for learning new skills. This has been highlighted by visits from previous students, as it allows you to build up a larger portfolio of work. I also taught myself how to use basic video editing software, and this highlighted many parts of the A4 such as image compression. As using codecs is based around similar principles, it expanded my practical knowledge of this subject.

After the Christmas break we again had to do two units at once. As I felt that my sketchpads were not up to the required standard, I focused on improving them over the Typography unit. This involved collecting more examples of design, which I annotated on in my sketchpad. This experience was key to this unit, and I felt that my skills as a designer were improved vastly by doing this. In a way looking at professional work informed my choices of layout and typography, which became evident in the final exam for the unit. As my outside projects had taught me how to put documents together quickly and accurately, I could work under the pressure of the exam time limit and produce a good end result.

During this unit I also improved on my ideas generation, as this was another area which I had identified as needing improvement. Before I had spend a lot of time just coming up with a single design. During this unit I learn that I could jot down several small designs in a short space of time, and this allowed me to supercharge the creative process. My time planning also had to improve, as being set short tasks demanded that I monitored how much time I was taking to produce a finished product. I found that braking the time down into chunks, and setting a series of mini deadlines was a method which worked effectively, and in some instances gave me some time to check for errors and improve on my work.

In the A5 builder unit I had to construct my website. I found the prospect of this rather daunting, as it was the first website I had ever built. I made a strategy of producing the site gradually, which allowed me to monitor how it worked in both browsers, which I knew could cause problems. I feel that this approach should repeated in the future, as learning CSS and Flash will be a new experience for me. I think that not over facing myself with too much too soon helped me to get a finished product from this unit which looked very much like my intended design plan did.

With the last unit of the year I wanted to take a new and more experimental approach to generating my designs. This involved taking pictures of textures and looking at a larger range of sources. I continued to collect pieces of print design which I liked, and expanded this with the research I did into album covers. I believe that if I want to make my work more professional, I need to collect lots of example of design from many more sources. This is something I must do a lot more of next year, as we will be making a website for a client and we must show a variety of designs.

In the last unit I felt that my work looked a lot more professional, especially my logo and CD design. However, the place which I improved on most was my web design and authoring. I decided to take the jump and create my website using CSS. I again took a gradual approach to doing this, as it had worked well previously. Even though I did need some help from the staff with this, I still feel a great sense of achievement at creating this website.

Doing this website has really ignited a desire to be more experimental in the future, which is what I am planning to do over the summer as self study. I think that with every piece of print design I do, or with every website I make I will see more and more improvement in the quality of the work. Throughout this year I have struggled to attain the D3 learning outcome, I now feel that I must continue to work towards this standard and beyond over the next year.

The Future

Now that I have reached the end of the first year, I know that I must not just leave the knowledge behind. As self study I will be revisiting all of the elements we have looked at since September. Now that I have the confidence to go out and try new directions, as well as evaluate my performance, I can effectively increase my experience and knowledge base. In my formative statement I mentioned that I wanted to work freelance. Over the course of the year I have changed my mind on this, as working with other people has taught me that other people’s views are crucial when designing.

As for the learning new software, I have learnt many more programs than I expected both in college and outside of college. In the second year, this will only increase, and I now know that I am fully prepared for the challenge.

For next year I only really have one goal; and it’s a pretty substantial one. This is to become more professional in every way, from ideas generation, time planning and right up to producing the final product, I want to improve them all substantially. These things are not something that someone else can do – I must take full responsibility in achieving them. To do this I will be doing more research into other people produce quality work, as well as finding more sources to work from. I found that in the A7 unit you can find some sort of inspiration from pretty much everything – you just have to go out there and explore.

I have really enjoyed the experience of college this past year. From the times it has been frustrating to the times it has been fulfilling I have found all of it has improved my as a person. Over the summer I have to prepare myself for returning in September, to take on more challenges, with more programs and with greater expectations of myself – it is a challenge which I simply cannot wait for.

As for measurable goals, I have come up with the following ones for the second year of the course:

Build an x-html/CSS website which validates using the w3c validation service.

• Reference at least one course related article on my blog each week.
• Reference at least one useful tutorial on my blog each week.
• Create a time recording sheet and use it for each assignment.
• Gain 4 merit grades over the course of the year.

Word count: 1464

Pantone Time

Production is one of the elements I look forward to most on the course, and this week has had it in spades. During self study this week, I started to put together my CD cover for the ‘Russian Spring’ album. I chose to mix the elements of nature with a hot and cold colour scheme for my CD booklet. Knowing Photoshop well allowed me to select the appropriate method to put together the picture needed.

Firstly, I created several squares of colour and then rasterized them, selected them, and then applied a gradient to them. Once this was done, I used a range of wet media brushes to add depth to the surfaces, before using the eraser tool to break up the edges. Once this was completed, I could start to merge the colours together with the smudge too, set to varying strengths depending on the effect I wanted to create. This made the colours of the skyline flow together, much like the ambient sounds on the album.

To add some sense of scale, I added a silhouette of a hillside and then added tree using one of Photoshop’s brushes. I thought that the tree should be small and that there should only be one, to emphasise the scale of the skyline. My CD cover as it stands can be seen below, as well as the inside of the booklet.
At college on Wednesday I decided to bring a CD case to see how my design looked as it would be presented to a customer or client. I’d recommend everyone to try this; it really brings your design to life and makes it look totally different. It also highlights the design challenges posed by the spines of the CD, where choosing an appropriate font is very difficult. I chose the Tahoma font for my CD, as it looks contemporary and subtle which I think suits the type of music. It also looks good at small sizes, which is handy when creating the copyright text on the rear of the CD. The rear of the CD can be seen below.

I soon discovered that my CD was crying out for a clear inlay, and this gave me the opportunity to continue the hot and cold theme I used inside the CD booklet. I also used the small window in the hinge to display the artist and title of the album vertically, in the same font used on the spine. This part can be seen below.

For the CD label itself I had limited options, as continuous tone would not look good due to the printing process. I also had a limit of 5 pantone colours to use, so I took similar colours to the top inlay (which were mainly blues) and used blocks of colour to create a digital looking skyline. I thought that giving the CD a digital look would complement it well, as the CD itself does contain digital data, and provided a contrast to the surrounding continuous tone. See the picture below for my CD design.

On Wednesday I received my fixed CSS buttons from John (thanks again :) ) so much of Thursday afternoon was spent implanting them back into my pages. I eventually managed to get them working, and much of this weekend will be taken up by the implementation of the content for my corporate identity.

There has been much talk of what the end of year ‘task’ is. I think that it will be some kind of uber feedback session on the year and the course, even though I would much prefer it to be an egg box mk2 challenge. Wishful thinking, methinks.