The document provides details on designing a website for horror media. It discusses layout examples from other horror websites and proposes a layout with a scrolling main body of text flanked by links. Color scheme, logo, and banner designs are presented focusing on orange, black and purple tones with a Jack-O-Lantern motif. The final proposed layout places the banner at the top and links below within grids using CSS and images for backgrounds.

1. Web Design and Structure Portfolio MEDS 2007 Greg Moss P09254354

2. Design Brief I am designing a website about horror media. The site will mainly be based onfilms, but will also be incorporating literature and TV shows. The site needs a clear identity, and will need several links. The site needs a page for; news, articles, lists, profiles, reviews and links to other web pages.

3. Website Examples Bloody-Disgusting.com has two sets of links across the top, showing its depth of content. The colour scheme is clearly black, read and silver. This gives the site a clear identity, which is emphasized by the banner at the top of the screen. The font reflects the content of the site also. The news stories are displayed chronologically in a blog format, which allows the user to scroll through them without disrupting the page layout. However the website does have too much going on, with the adverts disrupting the look of the site. Another drawback of the site is that it does not measure 640 pixels across, meaning some of the content on the right hand side is cut off on most monitors.

4. Website Examples Allhorrormovie.com has a very effective minimalistic layout. The main story is displayed on the left, with links to recent stories on the right, and more options further right of them. The websites main content can be accessed by links across the top. The minimalistic layout works well but sacrifices site identity. The header font is standard, and the black and white colour scheme could be used for any website.

5. Website Examples Best-horror-movies.com has a very similar colour scheme to Bloody-Disgusting.com. The different shades of red and black have strong horror connotations, making them a good, if predictable choice. Yet again the main stories are shown in the middle, and the user can scroll down through them, with main links being down the left, and less important links being down the right hand side. The layout does however look a bit empty on the right hand side. I initially thought it was for technical reasons, however the two big right borders down both sides, for this purpose. This makes the empty red space on the right look pointless.

6. Website Examples Fangoria.com utilises the black and red colour scheme that proves so popular on horror websites. All the links on this page are across the top, allowing easy access, and users can scroll down to see the news stories. There is a lot of empty space on the right hand side, which affects the overall layout of the site. However Fangoria have implemented advertising a lot better than Bloody-Disgusting.com, if anything it adds to the page. Fangoria have their logo across the top like all the other sites, and they have their own font which helps create their identity.

7. Page Layouts This layout has room for links down both sides, which makes the page symetrical. However users are not used to links being down the right hand side, making the layout unconventional. Tumblr has started to use links down the right, but it is still uncommon. The main body of text would be scrolling, similar to Tumblr, and also Bloody Disgusting, allowing for an endless amount of information. However the layout does make the main content look cramped.

8. Page Layouts This is a minimalistic home page, that would display the main article in the middle, with other articles surrounding it. This makes the page more of a splash page than a main layout, and the pages with articles on would look different. This adds an extra click to the process of finding what you want. The layout however looks squashed.

9. Page Layouts This layout is minimalistic and easy on the eye. However much like the previous layout it would function mainly as a splash page and increase the number of clicks required.

10. Page Layouts This layout is similar to 411mania.com, with links being displayed across the left and top of the screen. However the positioning of the rest of the page looks uneven. The main body of the page is not located centrally either.

11. Page Layouts This is the layout I decided on. It displays the information similar to the way Tumblr and Bloody Disgusting do, with a scrolling main body of text for the page content, with a header at the top of the page and site links directly beneath it. This layout is simple and uncluttered. This makes the information stand out.

12. Colour Schemes I chose a few base colours that had strong connotations with the horror genre; red, black, purple and orange. Different combinations were put together to see which would look best, before I settled on orange black and purple, as these bring up images of Halloween. I omitted red from the colour scheme as then the site would look too similar to other horror websites.

13. Logo Ideas It is important for a website to have a logo in order to create its brand image. Following the colour scheme decision, I chose to incorporate a Jack o’ Lantern into the design, due to its connotations and again making it just a little bit different to other horror websites. I then found a selection of horror fonts, and wrote the name of the site over a generic Jack O’ Lantern image to see which ones suited the site. The website also needs a banner, which would include part of the background image and would be displayed at the top of each page.

14. Logo Ideas Font used: Bloodsuckers

15. Logo Ideas Font used: Cold Night

16. Logo Ideas Font used: Creepsville

17. Logo Ideas Font used: Holliter Spike

18. Logo Ideas Font used: Homicide Effect

19. Logo Ideas: Font Font used: Kreepshow

20. Logo Ideas Font used: Mars Attacks

21. Logo Ideas Font used: You Murderer

22. Logo Ideas: Colour I settled on the font Kreepshow, as I felt it retained the horror theme but wasn’t as intimidating as the other fonts.The font was manipulated using Photoshop to provide it with a glow surrounding the text. The next step was to try different colour combinations from the colour scheme on the finished text to see what the best combination would be. I predicted the black with orange outline would suit the Jack O Lantern motif best, and this is the font colour I finally went with, but provided are the other combinations I tried.

23. Logo Ideas: Colour

24. Logo Ideas Colour

25. Logo Ideas: Background

26. Background The above background is the one I chose for the website. The background fits into the colour scheme, and the oranges from the Jack o Lantern can be sampled and used in the final logo, replacing the generic orange colour used in the text ideas. Which you will be able to see in the next slide.

27. Final Design: Logo/Banner

28. Draft Web Layout Above is the draft for the web layout. The white background on the text sticks out too much, but if changed to black the content would merge with the background. There are two ways around this, either simply adding a border to the content, or what I will attempt first, replacing the black background with the logo.

29. Draft Web Layout This shows the background with the logo pasted on, instead of plain black. The right hand side looks good, but the text on the left hand side looks out of place. I shall try to flip the image so what is showing on the logo on the right also appears on the left. Borders will need to be added also around the links and the main content to define them more.

30. Draft Web Layout This shows the background with a symmetrical background image, and white borders in the right places. The main content was not quite in the middle, so I changed that as well. The only possible drawback I can now see with the site is the black background at the top, however it keeps it looking simple and separates the header and the rest of the site. The text used is the default Photoshop font Myriad Pro. This is a simple readable text which is important for the user. This font may not be available on all computers though, so the font Georgia may be substituted for it if there is no workaround for this.

31. Website Measurements The site will be built on a default 640 x 480 page. The banner will be 580 pixels across, with 30 pixels of black background either side. The banner will be 70 pixels high, with 10 pixels of background above it. The link bar will be 500 pixels wide, with each link being 82 pixels across, with a 1 pixel border between them and at each end. The link boxes will all be 35 pixels deep. A black background will take up 70 pixels either side of the link table, and 640 x 25 pixels underneath. The remaining 360 pixels in height will be the height of both the main content box and the backgrounds either side. The central content box will be 438 pixels across, and the background will be 101 pixels across either side of the content box. The headline in the main content box will be size 18, and the rest of the text will be size 12, which is also the size of the links.

32. Implementing Design into HTML and CSS The web design can easily be constructed using grids in html. The background would be inserted as an image, with a grid across the top for the banner to be inserted as an image. The links will be placed underneath this, in six separate grids, one for each link, with the surrounding area being created through the use of padding and grids with a black colour fill. The links will change colour when highlighted, this will be achieved by using the hover tag. Each grid on the page will have a 1 pixel white border to allow it to stand out as shown in the image. The space for the sites main content will be one large grid, with the headline being created by using a text header. This will be achieved through understanding and application of the box model, which will allow me to make all the boxes the right size. I will use CSS to apply the different formatting to the links, the main content, and the headline above the main content. This will allow me to implement the different fonts with ease. What I anticipate will be the hardest thing to implement is the scrolling main body of text. This can be accomplished by setting the size of the box, and setting it to overflow in a div tag. Each link will link to a page with the exact same layout, the only difference will be what the box is filled with on each page.