Style Sheets

Today we learned about 3 different types of style sheets that we could use in our HTML coding so that it is more advanced and can be altered easily.


The first one uses the body section of the tag, and can use bigger fonts than simple HTML which would be a good advantage. There are other new things that can be added such as line height, letter spacing and margin.


The second one is placed in the head tag which keeps all the coding in one place at the top and the writing below in the body tag - this allows the creator to easily edit the coding without having to scroll and search all over the HTML. With this style sheet it has similar new advantages like the first one and is referred to as an "embedded style". However a difference in this style sheet is you don't use speech marks to encompass the colour or size of the font. For this style sheet, you can copy and paste it under a new tag <H1> where a second line of text can be created in a different style.


The last one seems to be more complicated than the other style sheets as it links documents together. If i'm being honest, this one confuses me slightly and I don't like the style of it. I would prefer to use either the first or second one and will probably test both with the styles I want before deciding.


At the end, Pete gave us a little example of how to change the links so they look a little better, this was a good encouragement as the blue underlined links look really unprofessional. 


This week we had a peer review day which acted as sort of a deadline for us to work out our continuing theme and designs. Having a Facebook group with the others in the group was definitely useful as we were able to show each other work and get comments on it straight away. We also used the chat as a way of talking real time and bouncing ideas off each other.

Peer Review Day

Yesterday we had to show the rest of the group all the visuals created on Photoshop, all colour schemes and some of the writing that would appear on each of our pages. I printed off everything we have done so far so that others could see the development that we had undergone for the final design.

For the last few days, we've all been comparing ideas and what we were thinking of doing for our own pages over our Facebook group. I felt that we needed to talk about ideas and gain opinions on each others work so that we could make important changes before we showed the work today. Our ideas so far are to each have the same left hand navigational system and border but with different colours which represent the tube line - This will make each of our designs different and unique.
We even managed to generate new ideas the night before, from this I was able to create another sample of a page to show today. Here are the samples of our latest ideas we came up with, incorporating station tiles into the design using my first individual page idea of using a train ticket and displaying the information and pictures inside:

This design used white bricks in the background with the opacity changed
so it blends in.

This one uses the distinctive green tiles found in a station in London, there
is no opacity change which makes the design look garish.

Our peers said that the idea of the tiles in the background was better than the original plain white background and agreed that the green was too much in the background for the design.

When they were commenting on my page, they described the red theme of my page to clash with the train ticket in the main section. I never really noticed the clashing before and am going to choose a different colour for the final design. They also commented on the clever idea of using a sideways scroll bar, this made the page seem more journey-like.
The other idea was to make it seem like the viewer was watching a train journey, the images and text would scroll through the window using some HTML coding.
Here is the sample that I showed today:

My peers seemed to prefer the other idea, as it would be hard to get this looking professional which I definitely agreed with. I think I will be sticking with the other idea.
Today has really helped us develop our design, hearing feedback about what needs doing and how people see our website was really useful. All the feedback that they have given us will definitely be used, since these are the people who are going to be looking at our website, it cannot be poorly designed otherwise people will not stay and appreciate the rest.

Considering designs with Stations?

A few weeks ago it was suggested that we incorporate the themes and ideas of stations into our designs. We have been thinking about how to do this and decided that maybe using the bricks in the background to make it look like a station.


We have taken inspiration from these photographs:

We are thinking about having a different station each as every tube station in London has a different design theme. We will play around with ideas and see what the outcome is.

For the website, I have come up with a few ideas to show to the team tomorrow for us to discuss. I think this meeting before Thursday will be a good opportunity for us to discuss the  main theme and colour schemes. This is what I have so far:

 Hopefully from this, we will be able to decide on a design that we can use on all our pages. Or develop it further to work for everyone.

Spine Team Facebook Group

We received a phone call the other day about our poster being shortlisted with another in the competition!
I actually didn't think our poster was going to get this far but looking at ours and the competitions, I can see why they have chosen them. Both posters follow the brief, they include orange and black and show that it is a fashion show. Ours has followed the brief more by using continuity and the same fonts they requested but still, I am proud. Now it is up to people on Facebook to decide which poster wins, I'm going to make sure people vote for ours but I do think it is fair that the public decide as they are the people who are going to see it.

Speaking of Facebook, I like the fact that our group has its own Facebook group so that we can ask questions and share ideas. It's almost like having our own little discussion group without everyone else seeing.

Even got our own symbol saying Spine Team on it in an underground sign style. I feel like our group works really well together, this showed in the poster competition and I am very happy with our work and ideas so far!

Choosing a Logo

Today we decided on a logo by using the Facebook group to show designs and ideas.
Here is the logo in progress, the first one is using a regular font and we decided that the font didn't work in the design as it was too rigid:

The second logo was created using the London Tube font which is used on the London Tube system. I think this will be a font that is used for the whole website which will show continuity. The whole team decided that this logo looked better and it will appear on all our pages.

Web Graphics

Few simple rules about Web Graphics:

1. Always a low resolution - 72dpi RGB
2. Always test on a PC and MAC
3. JPEG are photographs as there is no transparency
4. GIF is anything without photographic content as there is transparency
5. When creating an image on photoshop the cm should be changed to pixels
6. When saving, save file to web
7. Make sure it is saved in the same area as the other HTML documents

If I follow these rules when creating Web Graphics, they should turn out alright.

Our Spine Team have come up with a few ideas for the homepage and our own pages. Now we all know what subject areas we will be looking at which means we can now concentrate on our own designs as well as contributing to each others.

Yesterday we took part in a one day project/competition with a client to produce an advertising poster and flyer for a Fashion Show. The fashion show was organised by TwistedFashion.org to promote fair-trade clothing. The winning group would have their design published around Coventry promoting the event.

First of all, we were asked to listen to the client introduction and make notes - These notes would then be used as part of the brief. I think this was a good idea as it made us listen to the client and pick up on things we felt were important - which is a good skill to have as a graphic designer.
I worked with my Spine Team, which was a good training for us as we were able to bounce ideas off each other and work as a team in preparation/continuation of our group project. We came up with the idea of using the man from the fair-trade logo and changing it into a woman. For the project, we could not use images off the internet or copyrighted images. This was a huge change for us as we easily go on the internet and use pictures in our designs without even knowing. It felt almost like having a handicap in the design process, which is weird to say. However, it was a huge lesson as when we get into the industry we can't use other people's work.
We decided to draw the simple shape in Illustrator, which I did. The team all felt that I had done a good job which made me feel better because previous attempts at Illustrator did not go down very well. Here is the outline I drew:

We wanted the figure to look as though it had been sketched without drawing it and scanning it into the computer. Drawing the figure on illustrator allowed us to easily remove the background so that we could work with it on Photoshop for the poster and flyer.

The rest of the team got on with the poster design, all of our inputs were taken into consideration and everyone got a say in the final design. We wanted to continue some of the design features from the previous poster so people would recognise it was the same event. Here is the previous poster:

We looked at this poster and discussed the main aspects we liked the most, this included the important information in bigger letters and the way the information was set out. In the brief, the client stated that they wanted orange to appear on the poster so that when people looked at it, they would be able to tell it was their poster design. Later on in the day, they decided that we could chose whatever colours we wanted after someone asked why they chose orange. We decided to stick with it, as it was part of the brief and the client may feel that ours had more continuity about it. We wanted to adapt ideas from the poster and make them into something new. 

After the poster was designed on Photoshop I made the flyer by re-arranging the information slightly and using the woman figure more. The poster and flyer both looked like they were for the same event which was the main idea. I feel like I had a good input into the designing and outcome, I felt that everyone else's efforts were on par with this and we made an excellent team. No-one slacked off and the job was done on time.

This is the final poster design:

This was our final flyer design:

We found that when we printed the poster off the first time it turned out very dark, we think this was due to the background being to dark and orange. When the team realised this I changed the background of the flyer to make it much lighter and a more grey colour, I also adjusted the lighting of the figure which made the flyer a lot more fresher looking. If we had time, we would have altered the poster's brightness a lot more but we had to meet the deadline and show the client the design on time. I suppose they could get a better idea of what we could do from the flyer, and if we won, we could edit the poster to have the same bright feel as the flyer.

All in all, we had a good day, it was nice to work in the studio all day and spend some time with my group. I had a really enjoyable day even if we don't win the competition, and it was my first experience of working with a proper client on a project that could have some of my ideas published for the first time. It was also a good opportunity for our team to work together which will be useful for the future in designing our website together. It suggests that we're all going to help each other so that our whole website is complete.

More Advanced Simple HTML

On Friday in the computer session we learned about

Using colours, browser safe fonts, changing fonts, changing font sizes, changing font colours, alignment, simple links, scrolling texts and special characters.

In this session we learned quite a lot in one go, but reflecting on the notes that I took, each part only has a few steps to each which means we learned them in a matter of minutes.

I feel like we have achieved more in this computer session as when I opened up what we were learning in HTML in the browser, it seemed to look more like a website was coming together even though we are still at the beginning stages of HTML and have a long way to go.

The more important parts of the session have to be learning about the browser safe fonts because if we used one that wasn't safe, we could end up with some ugly looking text! The only problem looking at what we learned is we cannot have fancy titles with a nicer looking font than helvetica! 

Making Links

Today, we had a one day (well maybe an hour long) project to do which would help us to find links in a subject.

The 'Spine Team' were a group today, we had the subject - Colourful which instantly brought to mind bright colours on objects and clothes. However, we had to dig a bit deeper to come up with some interesting links. So looking through the newspapers and magazines we were able to link bright colours to Rainbows, Gay people, Fat people, Cake, Cartoons, Life, Tarot Cards, Colourful Language, Colourful fashion, Food logos and a few more.

When presenting our find link sheet, our pictures filled up the wholeeee page - No blank spaces at all which most of the other groups had. Phil said that ours looked the most interesting and colourful, but as we were going through the links, some were getting very confusing and we needed the homepage to link everything back up together. There were other groups who had done a better job at linking their ideas which was the point to the project, but ours was most visually appealing - which is the course itself so.... :)

Here is the final piece: