The URL is http://www.gracefest.org.uk/
I email the website to someone else who uploads it on my behalf. I am hoping that he will have done this by the time this project is assessed. As soon as it is uploaded, it will appear on the above URL. Currently, it hosts the old Gracefest site.
I email the website to someone else who uploads it on my behalf. I am hoping that he will have done this by the time this project is assessed. As soon as it is uploaded, it will appear on the above URL. Currently, it hosts the old Gracefest site.
I feel that this end of year Major Project has allowed me to develop my skills as a visual communicator considerably. Most notably, I have developed skills significantly in the software I am able to use, as well as the way that I use software. This is applicable to Flash, Dreamweaver, InDesign and even Photoshop.
I am now able to execute simple procedures in Flash to produce simple animations for things like interactive adverts. I developed further independence by largely learning how to use this by doing video tutorials, something I also started doing for After Effects. I did however learn to seek help from tutors and technicians. I knew how to build HTML websites in Dreamweaver from the Future Technology project, but I applied this knowledge to developing skills in CSS, which I also largely learnt from video tutorials. By challenging myself to build a CSS site, I was able to produce a much higher quality site than I otherwise would have done. I also incorporated InDesign into this project, something I learnt from the Visual Exploration project at the beginning of the year. Additionally, I had to use Photoshop to edit images before placing them in Dreamweaver. Therefore, I see this project as a culmination of skills from the last year.
The major project has given me an ideal chance to work on a live project. I was able to combine my extra-curricular activities with course work by doing Gracefest promotion work.
Although I drew up a schedule at the beginning of the project, it was very rough as I did not know how long it would take to learn software like Flash. If I had known the timings more accurately, I believe I could have used the time more efficiently, which would have allowed me to push boundaries even further. I intended to use After Effects in the project at some point but this did not happen- mostly because there was no need to use it.
I looked at many different websites before I started designing the website, particularly festival websites, however I did not look at a wide enough range of sites that I could have gained more ideas from. Despite this, I needed to be ambitious but not unrealistic in what I could do. I like the Flash splash page of ‘The Secret Garden’ website, but I doubt I would have been able to create such a page in my site on this project as it was the first time I had used Flash. There were technical problems, but these were expected and I was able to work them out.
In conclusion, I believe this project has rightfully been the most successful project I have undertaken this year by far. I have developed skills considerably and pushed myself in several areas, while working on a live brief. The project has acted as a springboard into the second year where I hope to learn how to use more software more effectively so that I can improve my practice.
I am now able to execute simple procedures in Flash to produce simple animations for things like interactive adverts. I developed further independence by largely learning how to use this by doing video tutorials, something I also started doing for After Effects. I did however learn to seek help from tutors and technicians. I knew how to build HTML websites in Dreamweaver from the Future Technology project, but I applied this knowledge to developing skills in CSS, which I also largely learnt from video tutorials. By challenging myself to build a CSS site, I was able to produce a much higher quality site than I otherwise would have done. I also incorporated InDesign into this project, something I learnt from the Visual Exploration project at the beginning of the year. Additionally, I had to use Photoshop to edit images before placing them in Dreamweaver. Therefore, I see this project as a culmination of skills from the last year.
The major project has given me an ideal chance to work on a live project. I was able to combine my extra-curricular activities with course work by doing Gracefest promotion work.
Although I drew up a schedule at the beginning of the project, it was very rough as I did not know how long it would take to learn software like Flash. If I had known the timings more accurately, I believe I could have used the time more efficiently, which would have allowed me to push boundaries even further. I intended to use After Effects in the project at some point but this did not happen- mostly because there was no need to use it.
I looked at many different websites before I started designing the website, particularly festival websites, however I did not look at a wide enough range of sites that I could have gained more ideas from. Despite this, I needed to be ambitious but not unrealistic in what I could do. I like the Flash splash page of ‘The Secret Garden’ website, but I doubt I would have been able to create such a page in my site on this project as it was the first time I had used Flash. There were technical problems, but these were expected and I was able to work them out.
In conclusion, I believe this project has rightfully been the most successful project I have undertaken this year by far. I have developed skills considerably and pushed myself in several areas, while working on a live brief. The project has acted as a springboard into the second year where I hope to learn how to use more software more effectively so that I can improve my practice.
Although I think that the internet is now, and will be the future, hard copies of documents are still largely necessary amongst many groups. I have not ignored this through the promotion work for Gracefest.
The website is just one element of a wider promotion, but they are all interlinked. I have designed and distributed flyers, posters, booking forms, information sheets and information packs. The website is the portal to Gracefest for those who have not received information through the post, or need extra copies.
The information pack was designed after I held consultations with 22 youth leaders from across the area, who were all asking broadly similar questions and raising similar concerns. I compiled an information pack that details all the important information in a downloadable and printable format. It is a large document though, so I produced an information sheet that could be printed and distributed more easily. The information pack has therefore not been printed in bulk, but is available for those concerned about intricate details.
I asked the printers (Paperworks Harrogate) for 500 copies of the information sheet which were distributed to 320 Anglican churches across the Diocese. The remainder went to other churches in the area- notably the Methodist and Roman Catholic churches and youth groups. They were double sided with a poster on the other side.
I have recently sent an order for 1000 flyers to Paperworks, this time in black and white to save money. They will be printed in standard blue 160gsm paper. On the back will be booking forms so that people will be able to send booking forms straight back.
I have designed hard copy promotional material in InDesign and Photoshop, which I converted to PDFs for download from the website. Therefore, although it does not make up a core part of the project, they are indeed still part of it.
All of the hard copy work is uploaded to the website for download, and all the hard copy information directs people to the website.
The website is just one element of a wider promotion, but they are all interlinked. I have designed and distributed flyers, posters, booking forms, information sheets and information packs. The website is the portal to Gracefest for those who have not received information through the post, or need extra copies.
The information pack was designed after I held consultations with 22 youth leaders from across the area, who were all asking broadly similar questions and raising similar concerns. I compiled an information pack that details all the important information in a downloadable and printable format. It is a large document though, so I produced an information sheet that could be printed and distributed more easily. The information pack has therefore not been printed in bulk, but is available for those concerned about intricate details.
I asked the printers (Paperworks Harrogate) for 500 copies of the information sheet which were distributed to 320 Anglican churches across the Diocese. The remainder went to other churches in the area- notably the Methodist and Roman Catholic churches and youth groups. They were double sided with a poster on the other side.
I have recently sent an order for 1000 flyers to Paperworks, this time in black and white to save money. They will be printed in standard blue 160gsm paper. On the back will be booking forms so that people will be able to send booking forms straight back.
I have designed hard copy promotional material in InDesign and Photoshop, which I converted to PDFs for download from the website. Therefore, although it does not make up a core part of the project, they are indeed still part of it.
All of the hard copy work is uploaded to the website for download, and all the hard copy information directs people to the website.
I intended to use the Major Project as an opportunity to push boundaries and learn new software. I am aware that Flash has limited use, and its popularity is declining somewhat. However, I felt that I needed to add a dynamic element to the site, as well as learn more about how other programs can plug into Dreamweaver.
Like CSS, I learnt simple Flash by following online tutorials on YouTube, as well as seeking help from tutors at college. I quickly became used to the interface and was able to produce a banner.
The storyboard above was my original plan, however I've discovered it is a little ambitious! I need more time to develop skills in Flash before I'm able to work out more complicated animations, but I have been able to use the motion tweens to create an animation sequence where elements fly onto the stage.
I have created two banners, both relatively similar. These can be seen embedded on the final website. I have resolved a few technical problems I had with the Flash banners. The first was that it snapped to 900px wide on every Dreamweaver page. I noticed that all elements did this when I added them, so assumed there was an overarching command to go to 900px wide. I found this in '*' and deleted it. The second problem was that the banner did not appear when I previewed the page on other computers. There was simply a small bit of script missing that needed inserting into the CSS page.
One technical problem, which is also a design problem, is that the banner is not clickable. I discovered that it was not possible to make Flash banners clickable in the same way images are clickable. Dreamweaver also wouldn't allow me to use hotspots over it. The solutions to this problem seemed rather complicated, so I have had to accept they are not clickable unfortunately.
Like CSS, I learnt simple Flash by following online tutorials on YouTube, as well as seeking help from tutors at college. I quickly became used to the interface and was able to produce a banner.
The storyboard above was my original plan, however I've discovered it is a little ambitious! I need more time to develop skills in Flash before I'm able to work out more complicated animations, but I have been able to use the motion tweens to create an animation sequence where elements fly onto the stage.
I have created two banners, both relatively similar. These can be seen embedded on the final website. I have resolved a few technical problems I had with the Flash banners. The first was that it snapped to 900px wide on every Dreamweaver page. I noticed that all elements did this when I added them, so assumed there was an overarching command to go to 900px wide. I found this in '*' and deleted it. The second problem was that the banner did not appear when I previewed the page on other computers. There was simply a small bit of script missing that needed inserting into the CSS page.
One technical problem, which is also a design problem, is that the banner is not clickable. I discovered that it was not possible to make Flash banners clickable in the same way images are clickable. Dreamweaver also wouldn't allow me to use hotspots over it. The solutions to this problem seemed rather complicated, so I have had to accept they are not clickable unfortunately.
The main elements of the site are complete. I encountered one major problem, but discovered CSS was much easier than I thought it would be! The only major problem I found was that I couldn't work out how to get a three column site.
After a bit of googling around, it became clear that this was a common problem in CSS. I worked it out by 'cheating' a little and floating the left and central column left, and the right one right. The central column was floated left with a margin the same width as the left column to get round the problem.
I have also added a footer; something I hadn't intended to do originally. The footer closes off the site at the bottom and gives framework to the site so it doesn't float unanchored on the page. It also provides useful contact information on every page that may have otherwise been hard to find.
After a bit of googling around, it became clear that this was a common problem in CSS. I worked it out by 'cheating' a little and floating the left and central column left, and the right one right. The central column was floated left with a margin the same width as the left column to get round the problem.
I have also added a footer; something I hadn't intended to do originally. The footer closes off the site at the bottom and gives framework to the site so it doesn't float unanchored on the page. It also provides useful contact information on every page that may have otherwise been hard to find.
I found this tutorial on YouTube. It is helping me to get going in CSS, but the site tutvid builds is vastly different to what mine will look like, so I am having to adapt his tutorial quite radically to what I want.
CSS is not build using tables, but it has user-created elements that are either fixed in place, or floating left/right. CSS rules are created for each element, and these apply over the entire site.
To create the background, I have created a 13x13 pixel tile in Photoshop that will be repeated across the site.
During my tutorial, I presented the designs above and why I liked/disliked certain ones. Joe Gilmore approved of the design I had chosen, but also expressed his like for the green colour scheme on the grey series. Knowing the nature of Gracefest myself though, I stuck with my decision. The next step is to build the site. I know I'm able to build HTML sites as I have done two before; one about future holidays and another for Gracefest- the current site.
The current site is alright, but that is about it. It is somewhat boring and bland, and the quality of the images varies greatly. Many elements do not line up, and the thing that annoys me most is that it sticks to the top left hand corner of the screen. I find this frustrating as there are a range of screen sizes out there, so I ideally want a site that can be centred and fill a page.
After voicing these concerns in both my crit and tutorial, Joe mentioned that HTML tables are not really used any more, but CSS is the primary method of web design. I will attempt to build the site in CSS, because I believe I should push myself and learn new technology rather than sticking within a known comfort zone.
The current site is alright, but that is about it. It is somewhat boring and bland, and the quality of the images varies greatly. Many elements do not line up, and the thing that annoys me most is that it sticks to the top left hand corner of the screen. I find this frustrating as there are a range of screen sizes out there, so I ideally want a site that can be centred and fill a page.
After voicing these concerns in both my crit and tutorial, Joe mentioned that HTML tables are not really used any more, but CSS is the primary method of web design. I will attempt to build the site in CSS, because I believe I should push myself and learn new technology rather than sticking within a known comfort zone.
I have done extensive experimentation, broken conventions and pushed boundaries. Originally, I was leaning towards the brighter coloured designs with the mustard yellow backgrounds. However, design five demonstrates the strongest elements of the blog look while taking on board the colourfulness of the mustard yellow series. It has a clean and fresh appearance, it's friendly and doesn't appear too 'childish'. But equally, the grey series did not convey the themes of Gracefest well, and as stated before, was better suited to a more mature audience. So taking these points into account, I have settled for the below design.
I particularly like the pink striped background, which draws it's colour from the mountainscape at the top. They add an edge to the site and bring a subtle buzz to the site.
This design will allow me to learn simple Flash, as I intend the banner embedded on the right to be produced in Flash. I would also like the header to be rendered in Flash.
I particularly like the pink striped background, which draws it's colour from the mountainscape at the top. They add an edge to the site and bring a subtle buzz to the site.
This design will allow me to learn simple Flash, as I intend the banner embedded on the right to be produced in Flash. I would also like the header to be rendered in Flash.
I have modified the last design as shown below. The most notable change is the addition of a 'features' column that eats into the main copy column. This makes the text much more legible and adds a stronger visual element to the site. The text 'Christian Aid' and 'Sounds of Salvation' are mounted on backgrounds whose colours are picked from the banner that heads the page, giving continuity of design throughout the page and a uniform colour scheme.
I have experimented with colours and layouts a little more, simply to exhaust the possibilities. I've found a way I could accommodate content in the design below, but again I feel the aesthetic of the site would be better suited to an older age range or a different use.
The final experiment I have tried is to use the mountains- or 'triangles' in a different way. I have taken samples of them and duplicated them diagonally across the whole page. It gives a very dynamic and to an extent, a psychedelic feel to the site. I also like it because it is slick and clean.
The final experiment I have tried is to use the mountains- or 'triangles' in a different way. I have taken samples of them and duplicated them diagonally across the whole page. It gives a very dynamic and to an extent, a psychedelic feel to the site. I also like it because it is slick and clean.
I think that the mountains create a strong visual identity for Gracefest, especially as they have already been used in some of the promotion that has been sent out. However, it is healthy for the experimentation process to try some designs without them.
If I were to add the mountains back in, a result such as the one below could be the outcome. I like the toned down colours and the fine white baseline that echoes the font. I love this design and think it has a real aesthetic to it, and a cool yet confident feel to it. However, I do not feel it represents Gracefest that well; nor do I think it appeals to the 14-21 year old age range (or at least not the lower end of that spectrum; our focus).
This design is visually engaging, but how well does it accommodate information? I have added text in several positions to see how it might work. I do not feel it gives enough structure for the text, so I think if I were to go through with this design I would need to use it as a splash page built in flash, with the elements moving to the top/sides in order to make room for content on the main site pages.
If I were to add the mountains back in, a result such as the one below could be the outcome. I like the toned down colours and the fine white baseline that echoes the font. I love this design and think it has a real aesthetic to it, and a cool yet confident feel to it. However, I do not feel it represents Gracefest that well; nor do I think it appeals to the 14-21 year old age range (or at least not the lower end of that spectrum; our focus).
This design is visually engaging, but how well does it accommodate information? I have added text in several positions to see how it might work. I do not feel it gives enough structure for the text, so I think if I were to go through with this design I would need to use it as a splash page built in flash, with the elements moving to the top/sides in order to make room for content on the main site pages.
The design below is rather similar to the previous, but I've changed the font from 'Pointy' to 'Neon' for two main reasons. The first is simply to try a different font. The second was to look for a cleaner, more muted font that suited the grey colour scheme better. I have also added a reflection. I think this adds an interesting visual effect, but it certainly disrupts the content below the header.
I have produced several designs as shown above, and although they each have their advantages and disadvantages, the structure remains largely the same with the standard headers, footers and columns. Perhaps most websites follow this convention because it is the easiest to use and most recognisable, however is it the most visually engaging? To break this convention, I have produced a family of designs that take a different approach to websites.
This is the first of the new designs. It is the most 'undeveloped' of this series, but I have taken a radical step of abandoning the bright colours and adopting a much more sober approach. The menu has also moved to a right alignment, with disjointed lines to draw borders.
This is the first of the new designs. It is the most 'undeveloped' of this series, but I have taken a radical step of abandoning the bright colours and adopting a much more sober approach. The menu has also moved to a right alignment, with disjointed lines to draw borders.
I have laid out several possible website designs, all covering different themes and ideas. The first to show is a series of designs that are based upon a blog. I have created several versions of this, experimenting with the colours, positioning and outlining. The design is clean and simple, but is very structured and therefore facilitates a limited amount of information. I also do not feel it allows for enough dynamism in the design; an element of key importance in my opinion.
I therefore took this design and modified it significantly to create a new design, shown below. This design is much more advanced and more complicated. It looks more like a website than a blog, but the blog element can still be seen in the blue-highlighted section in the centre. A patterned background could be repeated easily across the screen, as could a banner for the header. This design allows for a greater amount of information.
One downfall of the design so far is that the optimum line length for text is grossly exceeded. It fails to attract attention and comes across as rather 'wordy'. A possibility therefore is to create a new column where features can be placed. This have two advantages as it would narrow the central column as well as facilitating more information space. An example of where this has been done is on the Guardian website, which can be seen in the 'Organising Information' post.
I therefore took this design and modified it significantly to create a new design, shown below. This design is much more advanced and more complicated. It looks more like a website than a blog, but the blog element can still be seen in the blue-highlighted section in the centre. A patterned background could be repeated easily across the screen, as could a banner for the header. This design allows for a greater amount of information.
One downfall of the design so far is that the optimum line length for text is grossly exceeded. It fails to attract attention and comes across as rather 'wordy'. A possibility therefore is to create a new column where features can be placed. This have two advantages as it would narrow the central column as well as facilitating more information space. An example of where this has been done is on the Guardian website, which can be seen in the 'Organising Information' post.
Although on the face of it the below design would appear as relatively similar to the previous one, this design actually has very different origins. Unlike the previous that was based upon a blog, this stuck to the conventions of standard HTML websites much more. I have added the improvements that I added to the last one to this such as the column changes, but a notable difference of this design is that the underlying structure is hidden. There are no boundaries to be seen; simply a continuous yellow background. This has been done in an attempt to integrate the banner with the rest of the page better- note how the background feeds into the banner by adding a new layer.
This design is the most colourful of the designs, but perhaps the yellow is overbearing and 'engulfs' the page somewhat. There is no white space in which the design can breathe. The ultimate example of where the importance of letting designs breathe can be seen on the Google homepage. Both the logo and homepage are icons, having changed little since it went online. The key to Google's success over rival search engines is arguably its clarity and ease of use. Despite having changed little, it remains clean and fresh, with the colourful logo catching the eye. At the moment, I do not feel that the Gracefest logo anchors the page.
This design is the most colourful of the designs, but perhaps the yellow is overbearing and 'engulfs' the page somewhat. There is no white space in which the design can breathe. The ultimate example of where the importance of letting designs breathe can be seen on the Google homepage. Both the logo and homepage are icons, having changed little since it went online. The key to Google's success over rival search engines is arguably its clarity and ease of use. Despite having changed little, it remains clean and fresh, with the colourful logo catching the eye. At the moment, I do not feel that the Gracefest logo anchors the page.
An average website. It's relatively easy to use and find the information you need to find, but the layout is hardly awe-inspiring. Clearly, the designers are going for the grungey look, but it looks rather unfriendly and is undermined by the use of Trebuchet MS on the slideshow feature, as well as for the general text. Having said that, the website is indefinitely better than the Reading website- a truly dreadful piece of work (notice how the banner is identical down to the sillhouettes- someone has simply photoshopped the name!).
The thing I really like about this website is the way the wrapper integrates with the background through its translucency. I have yet to figure out how to do this in HTML, but it improves the visual quality of the site when used well immeasurably. Additionally, I like the palette of colours used, and think that the font works very well with it. There are also quirky little features such as the arrows from the navigation bar to the page, further helping the site to 'join up'. At the bottom is a picture slideshow that can be scrolled through.
This is a high quality website where I am struggling to find criticisms. If there is one trivial criticism, it could be that the image feature in the centre of the page does not add much to the site as it is not a photo, but it doesn't contain content either. In terms of function, it is pointless. But on arguments in terms of form, it adds a new dimension to the site.
This website has a feature I'd like to incorporate into my site. This is the flash element at the top that is integrated perfectly into the background. There is a nice font used; perhaps Century Gothic. It's interesting to note that the font sites on the boxes that it is a header for too.
Other colours aside from green are light and faded, which works well as it emphasises the green. If there is a criticism of this site, it could be that it is necessary to scroll on every page. A disadvantage on the line up page is that there are no names with the images. I expect this is done on purpose with the aim of hightening the aesthetic, but it provides little help to people who do not recognise an artist/band.
Antic Banquet is the only festival site I have found so far that is built using PHP. I have yet to learn how PHP can be used, but I can tell that this site has not optimised that well. It may as well have been built in HTML as the site layout is essentially based upon tables throughout. It's not a 'bad' website persay, but it certainly doesn't break any barriers. The image qualities appear very low, and the font is awful. Interestingly, 'antic' sounds rather like 'antique', which suits the site well!
Google is now the world's largest corporation- bigger than McDonald's, Coca Cola and Microsoft. And what is it essentially? A search engine- a window with just 33 words on it. Google is worth around $150bn USD- that's $5bn per word! And I believe it is this simple fact that makes it so succesful- the absolute simplicity of the site.
Unlike other search engines, Google has kept it's homepage clear and clean; the latest addition is for extra information to fade in after the main search has appeared. Compare the page in 2001 with today, and the resemblance is extraordinary when most things in cyberspace are transforming daily.
Subscribe to:
Posts (Atom)
