End of Project reflection

Today marks the end of our website making module.
I started out the module knowing nothing about HTML and now I have broadened my horizons and now know about several aspects to HTML designing. I can successfully construct a website with simple coding, style sheets, tables and div tags.


In the end we decided to make our website using div tags which made it easier to place images and text in a position that we had previously designed. We did try using tables after it was suggested to us as it used less code but we found that we all knew exactly what the code was for and where it was on the page so we shouldn't change it and confuse ourselves. I think it worked out better, mainly because we all knew exactly what code was used for certain bits of the website.


I feel my contribution to the project was good, in the beginning I spent a week just making different designs to present to the team on the Thursday. One of these ideas was taken and developed by opinions that the whole team made. The project was a whole team effort as we were able to bounce ideas of each other and improve on other people's ideas, especially for the home page. As for the coding, we found using online tutorials and practising different ways of using it. The practise was definitely beneficial and perfected our website more. 


My favourite part of the project has to be designing my individual pages, I had a lot of ideas that I wanted to use but settled on a train ticket as it was something completely individual to me and different to the other pages on the website. This will make it stand out to the viewers and hopefully make them remember my pages and the information on it! The worst part of the project was implementing the coding and figuring out how to solve problems that it caused. Although this felt satisfying in the end, it was a big pain and made me feel like I was never going to fix it and my links were just not going to work!


When creating the printed artefact, I took into consideration the main theme running through our websites, tube maps. This is why I have created my leaflet based around the idea of a map using a tube map with our page names and other groups body parts on it. I wrote a bio where the key is just to introduce people to the leaflet and let them know about the information I was going to discuss. I think it was a big risk putting most of the main information on the back but in a way it's nice because it isn't too in your face and people can read it without feeling forced to.


Overall, I have enjoyed the work I have done and am sad that it is over, I also feel like in the module I have learnt the most out of all the modules.

Presentation Day

This afternoon we presented our website to Phil and Cassie which was a good opportunity to see our website working altogether and present our work exactly how we want it to be seen. We were all very nervous before the presentation, mainly the idea of presenting but I was more worried about some of the links not working and not being able to show some pages.


Before the presentation, we put all the files onto one computers and found that some of the links were not working and some were presenting pages into the iframe. We thought that we were going to have to check through everything again and make some more changes an hour before the presentation. We then tried it on everyone's computers and found that some links worked and others didn't but they were all different. We decided that the files were just a bit temperamental and put everything onto a CD to present. Surprisingly, everything worked perfectly a part from one link which was only to a diagram. 


We each did our sections of the website taking the full 20 minutes allocated to us and at the end we received some positive feedback and nothing drastic on the website to change. Our concept was understood and liked which is probably the biggest success as everything around the website is based on this.


I'm glad the presentation went well and it is a huge relief for it to be over, now I am just perfecting little things ready to hand in tomorrow.

Preparation for the Presentation

I have been doing some preparation for the presentation ready to discuss with the team tomorrow when we meet up. I decided that i'm going with a strategy of directly answering the brief in the introduction which should hopefully hit the marks.


As for my individual pages, I decided that I should state how my subjects relate to the spine, trains and the Thoracolumbar section of the spine. I will then explain how they all link together and how they can link to other people's pages. After doing this I will take them through my 3 pages using some of the key points as examples for the kind of text that I have in the pages. I think this should last me about 5 minutes which fills up my allocation of the presentation.


Hopefully the presentation preparation will continue tomorrow and we will have time to practice the order and other aspects of the presentation before the actual thing at 2pm.

Adding Sounds

A couple of weeks ago it was suggested that we include some train sounds onto our website.
So today Georgia and I went in search for some sounds and coding to put on the website, 


<embed src="Trainsound.mp3" autostart="true" loop="true" hidden="true" volume="50%"></embed>


We found this piece of coding but it did not work when we put it in. For some advice on this we asked Pete who told us exactly where to put the coding. We found some appropriate sounds so we now have sound on our website! It's a train on a journey which ties into my pages in particular, but is also in keeping with the rest of the website.

Team meetings are always successful

Whenever we meet as a group I always find that we make good decisions and really test our design.
Today we decided that the design we have at the moment,

should be changed to this design:

After a second opinion from an expert in the area we decided that the title looked unbalanced on the page so we changed to the meet where the edge of the iframe is. We also thought about changing the box so that those pages that scroll across have a more finished look. This is the approach I am taking with my pages and I think they look more professional placed within this box.

Second idea for the leaflet

Today I was brainstorming ideas with my mum as she has to create a leaflet for her diploma and wanted my help to get some ideas. We were looking through leaflets and I came across this one:

It reminded me of a map which gave me the idea that I think I am going to use for my own leaflet. I thought maybe I could design a tube map with the spine parts and other human body parts. I thought this would be a nice big illustration for the front with the proper information on the back of the leaflet.


Firstly, I had to figure out how it would fold using A3 as the leaflet was only A4. After a few tries I found a way that would work like the other leaflet. I am now in the process of designing the map and the back of the leaflet. 

I've nearly finished all the writing for my individual pages, although I do need to add some more information and edit some not as useful information out. I have been working on the everyday journey section and making some images in Illustrator to go with the text as finding images to match the statistics would have been hard.


Here is an example of what I have created:

The statistic was that there was an increase of 40% more passengers with only a 10% increase in trains. I think this image I created gets this message across clearly and is a visual representation of the statistic.

Hopefully finished the webpages!

Tonight I have finished coding and putting together my pages of the website, what a huge relief!
Here are some screen shots that will be used in the navigation plan to show how my 3 pages look:

Problem with the iframe

For the last few days I have had problems aligning the text in the iframe properly so that it aligns in the actual webpage. At the moment it looks like this:

With 2 days until the deadline this is not good.

So tomorrow I am going to try and fix this by inserting some tables using what I learnt in the HTML lessons. Hopefully this will allow me to arrange the text where I want and not be restricted by the iframe boundaries.

I have printed and folded the artefact which is out of the way now. The only things left on my to-do list are finishing the HTML coding when it is fixed and finding/making some images for the Everyday train journeys section.

The Last Discussion Day

Today was the last formal discussion day for our websites.
Phil wasn't in today but we did get help from Mark which was particularly useful because it was like having a new set of eyes on our website. In a way he sort of acted as an outside critic, he didn't know anything about our concept or design so his advice was really useful.


It made me realise that the route I was going to down for the website was more providing the information. I think I had forgotten that it is meant to show visuals and be quite artistic, so he gave me a few ideas of what I could do to bring these ideas back. Like last week some little changes are going to make a huge difference to the website. It made me remember how useful advice can be, think i've forgotten how to take advice nowadays!


So now i'm thinking more about what's going to go in the iframe, Mark did not like the idea of us using iframes purely for the future. Apparently it affects people with visual impairment, so I might test my pages on my dad when he hasn't got his contacts in. I might test my pages of the website on a few people thinking about it, will be good to get some feedback to post on here.


Now it's 6 days to go before the hand in, I'm really feeling the stress of finishing this and how frustrating HTML is! Tonight it has taken me an hour to realise something that I probably should have realised in 2 minutes - I thought it was time for a break and now i'm back working on it and feel more positive. I actually had a dream last night that it was the presentation day and we'd forgotten to put links to the other pages of our websites so everyone could only see one page of each section. I think i'm thinking about HTML too much! Today was a good chance to see where everyone else was at too, most people were only just filming their video which we have had done for a few weeks now which made me feel better and realise how organised our team was.


Also, after last weeks discussion with Phil we decided that we needed to re-create some of the effects that we put into the video. So we have been experimenting with different crumpling effects, tea stains and photoshop edits. In the end we have all agreed on this style:

Now we are deciding whether we want the crumpling effect inside the iframe, some of us like it and others don't. But we have said that if it doesn't suit the design then don't use it, I say that whatever is in the iframe is our own design so we should do what we want. I think it will create a good variety of designs within the website which will make it look more interesting.

Peer Review Day

Today we had a peer review where we put together what we had done so that the rest of the group could give feedback. The main aim of the day was to get feedback of our designs but it was also a chance to see how people used and reacted to our websites - where they clicked and their frustrations with the layout.

Some of the feedback was positive but there was also some negative points.
"Looks like a public toilet"
This was quite nasty, but still gave us an idea of what people thought about our website.
Other comments were more useful as people seemed to be confused about how our pages linked together and the transition of the whole website.


After the session ended, we decided that our original design needed to change as it was too big and clumsy for the webpage. We decided to have a conversation with Phil where we decided that we needed to change the size of the links as they were overpowering and it was suggested that we think about having a gap on both sides of the iframe like Facebook. We also decided to create a banner using the station titles found in tube stations. I think these changes will make our website look more professional rather than something put together using simple HTML. These small changes have definitely boosted our confidence as a team and we've got a steady direction to head in. This is the idea for our new website layout:

After we decided on the new layout, I felt like our group was a lot happier - We had a direction to go in that was definite, not an unsure design. So I have a feeling we're going to be picking up the pace a bit and really getting on with the project for the last two weeks before the deadline. I think this session was really needed to get us straight and i'm very happy with the result of it. 

Making the video

Today we finished the filming and editing for the video, it was started yesterday by the rest of the team because I could not make it. They had made a good start on the video and there was still plenty for me to do the next day. We decided to get it done early so if anything was wrong with it we had plenty of time to change it without doing it last minute.


I think it was a good idea to put an effect on the video like the old style information videos we found on Youtube. We used the same sort of voice over for our film in order to get across a 'fun feeling' to it.


I think it has turned out really well and was a good group effort.

Deciding which route to take

Today over Facebook, we decided which route to take on our HTML code.
After exploring the internet for extra help we decided that a simpler way to arrange text and images would be by using Iframes and div tags.


We decided against using style sheets and tables as our designs are the same apart from our information in a box on the page. 
When trying the tables on our webpages it was obvious that our website design is too complicated as we need to place links in a certain place rather than in a row on a box. We decided that the table design would be suitable if we used a regular box shape website but as we want to make our design more unique, we feel that this way is a better option.


 The iframe would allow us to put a HTML page inside a HTML page, it would also be able to scroll up and across which is useful for the design that I have in mind.


The HTML lessons have prepared us for this coding well, even though we have not gone with one of the options given, we are prepared for our own method of coding.

First ideas for the Printed Artefact

Here is the first idea I have for the Printed Artefact. I wanted to create a long leaflet reflecting the idea of my design in the website. The front end is a train and the end is a spine which should indicate the connection between the two. Below the design is how it would be made from a piece of A3 paper, it would have to be folded in a certain way and would be very complicated to make.

The Group Action Plan for Easter

OVER EASTER
Experimentation of coding using tables, CSS and other tips found on the internet.
Research content for individual pages.
Think about the designs for individual pages.
Research areas around the printed artefact.
Design printed artefact.


TUESDAY 26TH APRIL
Meet to make the video.


WEDNESDAY 27TH APRIL
Continue making the video.


THURSDAY 28TH APRIL
Present visuals, artefact and video to peers on discussion day.


We will be keeping in touch with each other over Facebook during the holidays where we can post ideas and pictures to get feedback from the others in the team.

Promoting Portland

Today we had another one day project to complete with a made up brief set by Phil. This day was to make us think of interesting ways of creating a printed artefact with 3 folds. The brief was to find out interesting facts about sea fishing areas that would make the group want to visit.

Our group's place was Portland which is an island still connected a little bit to the South of England. In the researching, I found a blog about Portland where a man had posted interesting facts about Portland that you would only find out if you had been or lived there. For instance, Portland is shrinking due to the limestone cliffs being constantly eroded. The the place is also invested with rabbits. There is much superstition around them too as years ago people working in the quarries thought they were bad luck as they built lots of warrens on the island which could cause it to collapse. Some of this superstition was used in the Wallace and Grommet film which would instantly make people interested in Portland - Well I believe so anyway!

Firstly, we were going to use origami to create rabbits and display the information on there, but after I had made several different versions we realised that the information just wasn't going to fit on. So after that, we decided to use the fact that there was a famous Lighthouse in Portland which then led us to choose a lighthouse shape that folded 3 times as the final design. I wasn't keen on this idea, or the design of the brochure because we were doing the design of the content at the very last minute and I felt very pressured to finish it on time. So I was slightly unhappy with the result, but maybe we should have managed time better during the day, maybe less time for lunch?

All the artefacts placed on the map where they are located

Our leaflet of Portland

The feedback sheet for our team

Another good win for the spine team, and a good opportunity for us to work together and practice our team skills. I definitely think these are improving as we are getting to know each other more - what people's strengths and weaknesses are. This will be useful for when we are making our website and deciding what happens.

Wall in the Studio

We have started placing images and our work onto a section of the wall in the studio. We thought this would be a good idea to show some of our work to other students and be a reference to people looking at our work. We can now point them in the direction of our wall for them to instantly get an idea about our website.

Tables

In a computer session we learned about tables and how they can help structure websites better. It allows you to put text into different sections of the page. This would be really useful for our website as it will help control where we put things which is something that I was worried about doing.


When I was creating my mini website at the end of the session using the skills we had learnt, it looked so professional. I didn't think our websites could end up looking this professional! It put my mind at ease and made me excited to actually make the website!


I went to an earlier session today where I was with the rest of my group, I found this to be more useful as we could all help each other if something didn't work when we tested it in the browser. I don't know anyone in my group which means I usually just struggle on, it's good team work practice! 


I know it isn't the best looking website, but it is a start into the learning curve.

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: