Navigation Issues

It was my aim when starting to build my website that I would build the frame of the entire site first and would then start to bring in content. This gives me a frame that I can reuse easily and quickly for every page. I'm at that point now, so I'm just going back and looking at the content within my iBook and finalising how I can divide it all up/what pages I need etc.

In my iBook (what this website is based off) I have 4 chapters. Within each of those there are sections , and within those are pages (describing each section). My original plan for this site involved creating 11 pages (a page per section). However, on my home page I planned on having the main navigation links (under the main logo) not to link to any internal pages but to link to different places on the same page. This has left me with an issue that's been at the back of my mind the entire time I've been building this site - how do people link to the internal pages? Initially the plan was to have links within the text on the home page that links to them. However, I want to make the website as easy to use as possible, so why would I introduce another step in a users journey to finding the information they need?

Ideally, the links at the top of the page in the main navigation should link to the equivalent chapter pages within the website as that's generally what a user expects to happen when they click to them. To me it seems unnatural for them to attempt to navigate to information and for them to essentially only be taken half way there.

I do not want to introduce drop down menus into my navigation, it just does not seem necessary. Besides, I already have a nicely designed way of arranging information on the page - the 'tabbed', different coloured sections on the page.

I have spoken with a few peers about this and how they think I should arrange information and the general consensus seems to be reduce the amount of pages. There are already several pages within each section that I have merged together simply because standing on their own does not really equate to enough information on one page.

Plan:
-  Main navigation links (below logo) will link to each chapter page.
-  Each chapter page (e.g. "What is a Volcano?") will be split up in similar fashion to the home page, with each section being a different colour.
-  The sections on the home page will contain a summary of each question answered in that chapter, as well as images and some "did you know" facts. There will be links here to navigate to the internal pages too.
-  The sections on the home page will not be 'required reading' but it shall be made clear that they are there (they are tucked beneath the fold of the page so aren't necessarily immediately obvious). They should be thought of as 'teasers' as to what can be discovered within the website. They will also contain links to certain pages and areas within those pages.

Todays Progress: Internal Links, Content Spaces and Making My Life Easier

Today has been another good day of developments on my site. Mainly I've been working on creating the colour content sections that appear below the main, central banner.

I had a few issues when creating this.

I keep forgetting to close the <div> tags.
No doubt, one of the most common issues I've had with simply building this site in general is my habit of making typing errors, constantly. For this, though, I've found Google Chrome's Developer Options very useful.

When trying to create an entirely new container (below my existing one) to start framing out each content section I was having problems with it actually appearing where it was supposed to, and myself and several classmates just could not work it out. All of my tags were correct, I'd used the correct CSS where applicable, my 'classes' seemed okay and the HTML (for the new container) was entirely correct too. This was frustrating and I honestly thought it was just a case of the browser/html file itself getting confused and "perhaps if I just leave it, it will work itself out!".

I opened up the Chrome Developer options to view the code from a different perspective and use their 'find' options to hover over my site.

Thinking I'd be greeted with two containers in the code - my existing container and the new ones I was trying to create, I instead saw this:

Just one container.

Turns out I'd forgot to end 5 <div> tags. Therefore I hadn't actually closed my previous container and was just adding things inside it and not realised.

As you can see in the code above, none of those <div> tags I had opened for each Box (e.g. 'box four') did I actually close. Smart. 

Closing all of the tags fixed my problem, resulting in a new separate container and completely solving my problem.

Solving this has allowed me to create the 4 content sections on my one long home page. I am yet to add the 'arrows' that divide each section, but have inserted the two columns I need in each (as defined in my plan) and inserted some text just to pad it out and get the gist of where all my content will be.

Once I'd done this, I started to add the internal links. The idea is that the user clicks on the links in the navigation bar at the top and is skipped to the appropriate area on the page. This was a lot simpler than I anticipated. All I did was give each section (chapter 1: yellow etc) an ID (which they had already) and each button in the navigation put that id for the href="ID". This does not include any animation (e.g.  a smooth scroll) so for now this is a quick fix that works. I'd like to look into implementing a more slick, smooth motion. 

Making My Life Easier

Even though it's just a small point, I just wanted to mention what I've been doing in my code to ensure that I don't get lost in it. I am in no way an expert when it comes to HTML/any web language, so this has helped to make sure everything is spelled out to me and I know where I am - comments. 

<!--- <insert comment here> -->

I've used comments everywhere in my code to create little headings and subheadings that divide it all up into specific sections. This way, if I need to change something in the navigation bar I do not need to read all of the code to try and find it, I just have to look for the comment. Something small, and certainly not a new discovery (and not even the most appropriate use of the feature), but it's helped me hugely.

(comments in green)

Media Queries and Design Adjustments

Tonight I started working on Media Queries.

Even though we are required to use the Skeleton Framework for our website, a large proportion on whether or not our site is responsive is dependant on 'media queries'. I've never, ever worked with them before, but I got a general gist of the idea of them in class through listening to other people.

I understood that in a way it is applying CSS to certain elements at certain points depending on the size of the page. In the basic index.html we were given to work off of a layout.css file was attached, with the following in:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

From what I understood from here I gathered that within each { } I would put the information for how I'd like an element to display at each point. To gain a further understanding I watched this video:

To explain my new-found understanding!

@media only screen and (min-width: 480px) and (max-width: 767px) {}

'only screen': 'screen' is a media type. Other media types include: print, handheld devices, TV's and projectors. My code defines that this media query is only for screens.

min-width/max-width: This is a media-feature. It does not have to be a 'max' height or width, it can simply be width or height, as well as elements such as colour. 

max - upperbound

min - lower bound

{} : This is where you write your CSS that defines what each element should display like (or if they display at all) at each breakpoint.

Breakpoint: Where a new style kicks in. 

Getting to grips with this inspired me to do something a bit more complex for my site. I started to consider how I could simply my design for when it hit the mobile version - the smallest width. Looking at my existing design, I noticed how cluttered it was. Quite a prominent aspect of the desktop version is the slideshow just under the navigation bar. It is not an element of my site that is 100% necessary - it's there partly for aesthetic benefits. Because of this I came to the conclusion that for the mobile version of the site it was disposable. Removing this slideshow allowed me to trim the length of the (already rather long) central banner. 

Left: Original Banner

Right: New Banner

Implementing this has made me make use of what's now a very useful selection of code:

display: none;

Tells the browser not to display an element (if the page is at a certain size)

display: inherit !important;

Tells the browser to 'inherit' this element and display it. I used this to essentially exchange out the original banner with the new banner.

Combining this with my navigation for the mobile device, my site now displays like this (on mobile). 

You can also see above that I've made the decision to change the colour of my home button to a grey that fits in with the colour scheme (the same grey was used in my iBook). 

I decided to change the colour from red to grey as my chosen red was the exact same red that is featured very heavily in the main, central banner. As you can see above, I have coded the media queries to position the home button halfway over the top of banner when in the mobile state, so having the button and the banner the same colour just did not look good.

New Buttons:

I've kept the same principle of having an over (left) and up (right) state to give a little boost to the users experience.

Navigation Adjustments

Now I'm back from Barcelona I've hit it hard on the physical development of my site, and the first task to accomplish was creating the navigation system. This has to be robust and work efficiently and it's something that in my case can, if I'm not careful, become very complex. 

This was my initial proposed Navigation bar.

Where it says "option 1" "option 2" etc is each of the buttons that would be used for the navigation of the site. They do not have drop-down menus attached to them but will link to the appropriate area of the page that speaks about that category (they will have appropriate names).

2 issues:

1: The central banner is very reliant on size and proportion, and very little room is left for slightly longer Chapter names for each button. On the mobile version of the site these buttons will appear tiny, too. 

2: I had zero clue on how I would build this. I had designed in (purely for aesthetic reason) a dark grey 'ribbon' that runs behind them all, and I'd no idea on how to execute this. The design was more complex than necessary.

I referred back to some original designs and saw a sketch I had made where there were two rows of buttons with two buttons on each. I liked this as it allowed me to have a bit more room to include a longer title for each chapter but didn't mean that the navigation bar took up too much space. A major worry of mine was having to stack each navigation button one on top of the other. The central banner already meets the fold of the page and is very long, the last thing I wanted was to make it even longer.

You can see how I have changed the navigation bar above. This is not a final design (I haven't added any text at all) and I am still trying to finalise the actual style of it. I'm considering removing the 'backs' of the ribbons as they are so tricky to line up with the central ribbon itself. 

As I said above, I was reluctant to change the navigation boxes so that they stacked one on top of the other. Considering the mobile site, though, the buttons are going to need to be as big and as clear and easy to use as possible. If you consider the size of an iPhone screen, the buttons above (2 on one row) are not really quite big enough to enable easy use. The design of the mobile version of the navigation bar has allowed the buttons to stack one on top of the other to ensure ease of use. The buttons still have an 'over' state of changing to yellow. (Whilst on mobile, this does not apply, it's essentially a 'down' state).

Initial Design Development: Mobile

I've been sketching in my sketchbook trying to work out the direction I want to take my design. I understood I needed to apply a similar design style to which I used in my iBook (as they've got to match and be seamless between each other) but my issue is that since then I've 'moved on' from that design and when I go back to look at it I can identify a ton of things that could be improved with it! What I decided to do, then, was go back and look at the original graphic I created (from which all other graphics were inspired and created from) and have a look at how I could take elements from it.

- Ribbon wrapped around an element (in this case it's a volcano)

- Red against the sea green background

- Shape of the volcano (I like its uneven, loosly cartoon style)

I decided to take these elements and try and incorporate them into one design (initially for mobile). I had a look on Pinterest from some inspiration of ribbons. I wanted to see the different styles, see if there were any conventions with their use and just generally have a look how they're used. I found this particularly useful image (below) and used it to inspire my sketches. You'll see in my initial designs below how they have played a part.

http://www.pinterest.com/pin/341710690449661469/

I took three potential designs that I felt were most successful and started to develop them more in illustrator.

Option 1

On paper this looked pretty good...on screen, not so much. A lot of the issues I'm having is the restrictions on my actual ability to design. For me it's sort of like drawing - I know what's in my head but it's the execution of the idea that isn't quite as good as what's in my head. Whilst I'm getting much more advanced on Illustrator and my ability to execute my ideas is improving, I don't feel that this design really works the way it is. It looks a little odd with how sharply the sides of the 'Volcano' drop off and I don't think I'd be able to include much of the stuff coming out the volcano due to the shape of it. If I make the shape any wider then the illusion of the ribbon wrapped around it won't be there, and if I make the peak of the volcano any lower it will ruin it's shape. 

Option 2

I do quite like this one, especially how uneven the ribbons wrapped around it are. I like how it allows the edge of the volcano to gradually move off of the page down to the corners, but it doesn't really allow me space for a logo. I am interested in making the logo quite a prominent feature, and this doesn't allow that. The colours are good, but the lack of red doesn't really relate to my iBook as much as I'd like it too.

Option 3

Out of all my designs, this is my favourite. I love the shape of the logo and the text within it, and I think the colours work well together. I'd like to rethink the colour of the text within the logo though, as it's the same as the red background at the moment. This design has allowed me to think about the possibility of having the red background stretch down and down and to have content 'attached' to it all the way down.

For a bit of fun, and also to have a look into the proportioning of elements within my design against a mobile device, I mocked up this design onto an iPhone. This also allowed me see what elements of my design may be cut off by things out of my control (e.g. on an iPhone, the search bar at the top protrudes into the screen, as well as the back/forward/navigation buttons on the bottom. The actual size of the viewing screen is significantly trimmed compared to the size of an iPhone screen)

Initial Ideas & Wireframing

To get an idea of how I am going to layout my iBook and how it may look on an iPad, a made a few wireframes. These were more for me to experiment further and gain more understanding on the layouts that I could pursue within the dimensions of the iPad.

Here I pursued one of my initial drawings from my sketchbook. It's a basic layout, with room for 4 images (one that's a lot skinnier and longer) as well as 3 rows of text below the smaller rectangular images. Then with an arrow to click to the next page. I'm going to have to look into the navigation of iBooks and whether or not that arrow is actually necessary, as my experience and analysis of them so far has been that it's not, and you just swipe. 

I then experimented with how an image would be viewed. If an image is clicked, much like on a lot of websites, it will appear bigger with a dim background to highlight it. Then with an X to close. I also like the idea of being able to click anywhere around the image (just not on it) to close it. Again, I need to start looking further into the restrictions of the program I am using.

Decisive Chapters, Sections & Headings

As I've been doing general research into the topic of 'Volcanoes', I've been trying to work out a way of arranging all of that information into specific chapters, sections & headings.

To start it all off, I brainstormed everything I had researched on the topic, any questions I wanted to ask etc.

Digitalisation of my existing Hand-drawn Brainstorm

This covered a lot, so I started to break it down into specific categories. I want to aim towards having at least 4 chapters, so I created 4 questions. I can add more later if I see fit.

▸  What is a Volcano?

This question gives me room to explore the varying types of volcanoes, as we'll as move towards a more 'science' route in the explanation of how they're formed.

▸  Why do they erupt?

Again, from this question I can delve deeper into scientific explanations. There's room for me to use a lot of diagrams and interactions (e.g. animations) that will help explain why they erupt, as well as scope for me to link Volcanoes to other Natural Hazards (Natural Hazards = A subject covered by A-Level students).

▸  What damage do they cause?

Good opportunity for interesting demographics and statistics, as well as animations and videos/interviews from previous explosions and/or peoples experiences.

▸  Are there any famous Volcanoes or Eruptions?

There are a ton of documentaries on Volcanoes, so this will allow me to go in depth on several well known Volcanoes (e.g. Yellowstone National Park) and bring in content from external sources that monitor current active Volcanoes. Good scope for me to explore the history of Volcanic Eruptions and how they've shaped the planet we live on today.

I felt as if these questions gave me a good opportunity to create an iBook that was well rounded and covered a lot of ground within the subject of Volcanoes. If I decided to use these as my Chapter's, after an Introduction chapter and ending with a Conclusive chapter, I then needed to decide the subjects within and start to consider headings & article names. 

Digitalisation of my existing expansion on chapters

Above you can see how I have expanded on each chapter. There looks like a lot, but there's an average of around 5 sections within each Chapter. Each of these sections can now have their own page (or 2....or 3...) and will form my iBook. 

Then I turned all of these chapters and sections into documents, divided by folder by chapter name to make it easy for me to access and import information. As I fill each document with information I will build the content of my iBook page by page. Within these documents I can also apply styles to the text to differentiate between Headings and Subheadings etc. 

Each folder is numbered by the order I'd like it to appear in the iBook, as well as each section within those (see image below). Part of the brief is to create a narrative, and the questions that I initially came up with before I expanded into these sections are designed to run on from each other - a natural progression. They're also titled so they can be skipped to straight away - it's not necessary to read the entire iBook in order for a section to make sense. What I'd like to do, also, is have one page in one chapter (e.g. "What else erupts from Volcanoes?") link to a page from another (e.g. "Volcanic Ash"), to direct the user to a different page in order to find out more information.

The Ending

The ending of my film is something that's been bugging me.

I do not want to end abruptly.
I want to "wrap up" the story, in some way.
I don't want to create a whole other tangent of the story.
I don't want to take up too much time and detract time from telling the actual narrative.

In my presentation to the class, where I pitched my idea, I proposed the question "What direction should I take it?". I asked them to tell me the way they thought would be most successful, and they liked the idea of incorporating a failure into the narrative. I liked it too, but I then I thought about how I could do it. Previously on here I've spoken about my worry of over complicating things, and I've got this worry again. Some of my ideas require me to shoot extra footage, and some can be applied straight away.

Here's a few ideas I have:
- The sounding of a doorbell, and a shot of a panicked face and a wide shot of a still messy room.
- Wide shot of a tidy room, relieved face, lighting a candle, sounding of a doorbell.

- The hoover approaches the screen very closely (I already have this shot), and at the closest point there is a dip to black. You can hear the sound of the hoover dying out, heavy breathing and a clock ticking, and after an appropriate pause, the sound of a doorbell ringing or a door knocking.
- The sounding of a doorbell, and a medium shot of feet running and suddenly stopping - a pile of clothes is then dropped, to signify panic and failure.

At the moment, I am leaning towards the idea in bold. I'm drawn to the way it will tie in with the beginning of my film (e.g. the black screen), and will give focus to the sound effects and scope for me to experiment with sound and the feelings they portray further. As well it tying in with the beginning, it will also leave a slight cliff-hanger - even though above I stated I wanted to "wrap up" the story. This leaves it open and could leave you wondering (e.g. did they do it in time?).

Also, I want to avoid any opportunity for rubbish acting...

I'm most certainly not the most dramatic and emotional actor. I don't want to include any more shots containing bad acting...as that's just going to detract from the message I want and not have a positive effect on my film. 

Developing Understanding & Initial Ideas

In order for me to come up with more ideas and understand the task further, I broke down the brief some more;
- 30 edits - (30 cuts), must be dynamic, will be fast paced
- 15-20 seconds - an intro and end screen is optional, but is in addition to the 20 seconds.
- A 'journey' - travelling, accomplishing a task, emotionally
- Storyboarding - need a variety of shots to build 30 edits
- Sound - sound effects, no soundtrack, royalty free

I then started to think about the types of journey that I could have, under the category of an "everyday action". These included Food (ordering food, baking, being at a restaurant), actual physical journeys (to college, work, going on a run, going home), Cleaning (tidying, against the clock, getting it perfect) and Getting Ready (e.g. doing hair/makeup).
When I thought about how I could produce these ideas, I started to see a problem with some of them. I felt that the ideas that involved ordering food, baking, making tea, applying make up etc would confine me to the one spot. For example, the ordering of food would literally involve someone on the phone talking, and applying make up would restrict my variety of shots to of someones face and close ups of each piece of make up. I didn't like how this would restrict me, and felt it would probably result in a film that wasn't very interesting because the subject wasn't in the first place.

Then, when I looked further into shooting an actual, physical journey, I realised it would do the opposite of restricting me. There are so many important "checkpoints" to cover on say, a journey to work or college, that I'd end up having just a few shots for each. I felt it would spread the story and shots out too thin, and wouldn't allow room for me to experiment with more interesting shots - they'd just be the standard, basic shots required to just portray a sense of the story.

This is what is now drawing towards the "cleaning" category, because it will allow me to work within one room and explore that room with a variety of shots. I may think of another type of story that I could contain within a room, but I'm now going to start storyboarding/doodling a few ideas for shots and brainstorming some shots I could use in each of these categories to see if I could make any of them work.

Thinking about communicating a message

I reached a point in the design of my front cover where I felt as if I were finished - all of the required info was on the page and I had designed pretty much exactly what I had drawn on paper - but I wasn't comfortable with the strength of the message my cover was giving off, and the root of the problem was the background I had chosen.

The most difficult part of this project has not been the intricate detail I went into on my attempt to get the newspaper looking some-what realistic, it's been choosing a suitable background to both fits in with my neutral, retro, colour scheme but does not clash with the very prominent grey fencing and features imagery that can be seen on my design (does not fall behind the newspaper). I originally settled for the following picture:

I was drawn to this picture as the positioning of a fence in front of it would look reasonably realistic, and because of the car. I could envision how I could position it - have the car just below the newspaper, positioned off centre. The thought of having a car on the front cover meant it would relate to the book slightly.

After I imported this image, I saw another.

The shape of the sign on the right hand side is something typically American, and I knew that if I featured on the front of the cover it would communicate the idea of "America" and therefore give the audience a clue on where the book was set. So I tried importing this image as my background. I didn't really like it. I wasn't a fan of the colours, and in order to position the sign where I wanted it I had to enlarge and reposition it so much the rest of the image didn't look right - as my intentions were to have it wrap around the entire cover. 

I went back to the first, and applied a quick image trace to it. The look this gave was something I really liked, so I decided to run with it. I applied an image trace to the second image, which turned it into a vector, and pinched the sign from it and placed it into the first, next to the car. I then created a quick shadow to match the car and turn it to a colour that suited. This is what the result was:

So I settled for this for a while.

Once I reached the point where I thought I was finished, I decided that it was the background holding it back from being a successful cover that portrays the message of the book. The background was giving off the vibe that the outsiders was set in dirt tracks, dusty roads, in the middle of nowhere etc, which is not the case. Whilst the American sign and the car give clues to the country it's set in, it became a toss up between communicating the location of the book or the theme of the book. Yes, I had a knife in the centre of the page, but I didn't think this communicated the idea of "gang culture" strong enough. I thought about where gangs are usually set - and where the Outsiders is set, in Tulsa, and decided to try a city-scape scene. 

I found a 1960's skyline, and used the pen tool to trace it. 

After this I adjusted the size of some of the towers and applied the "roughen" effect to it. This makes straight lines slightly uneven, and matches the rest of my design (this effect is also applied to the logo, the newspaper, the lines on the newspaper etc). 

I really did like the colouring of the sky of the background I had originally settled for, so I decided to stick with it. 

The city scape obviously communicates a big-city vibe, so combined with the knife in the logo it strengthens the message of Gangs and gang culture. Then, with the fencing in front, it suggests an idea of those that are "the outsiders" are divided from the bigger city/the rest of the society, and that a gang culture is part of the reason of this. 

This city-scape also wraps around the entire book, so the back cover does not look as plain as it was before and gives the design a more complete feeling. 

Developing the Newspaper

Without a doubt, the most difficult, complex and frustrating part of my design was getting the right look for my newspaper. Below shows how the newspaper developed over time, and explanations on some techniques I used and the reasons behind my decisions.

Once I got to this point, I was stuck. I loved the layout of the newspaper and how the title and the blurb were incorporated, but hated the attempted "rip" effect around the edges. It just didn't look believable, and no amount of drop shadowing or "crumbled paper" textures were going to make it look realistic. So, I started again. I drew out my initial shape on a new document.

I thought about how a piece of paper tears - how it's not perfect, not in a straight line etc.

After this I thought about what sort of feel I wanted my newspaper to have - old, weathered, battered, ruined in the weather, in a run-down environment. A piece of paper blowing in the wind and rain does not stay perfectly flat( especially a piece of ripped paper) -  paper naturally curls when it's wet. So I designed some page curls. 

I decided to go further, and design in some tears within the actual paper. They can represent bullet holes, and this adds another layer of a sense of danger for the person viewing the cover.

The idea of being able to see through the paper and see the fence and background adds another sense of depth to the design, adding to the realism.

Next up was textures. 

Torn paper texture, destroyed paper texture.

I really feel that the added paper folds and tears has helped strengthen the destroyed/battered feeling that my design needs to give off. The textured also age the newspaper, which helps me portray the era the book is set in too (not specifically, just the it is not current-day).

Background Experiments

I am finding what to feature in the background, behind the fence, on my book cover quite tricky. So, I decided to just see what colours/imagery may work, and experiment with a few different images behind it.

The idea of featuring just black and white imagery, and then using red as the colour that pops and highlights important things (e.g. in the logo, the title, the blurb) seems like it may work, So I may experiment further with that. 

My aims for the "background" is to convey the location and the era the book is set in. Because of this, I am also drawn to the very first example - with the typical american sign in its recognisable shape. If I went with this, I'd want the sign to be in a very run down, "desolate" looking area, to really convey the Greasers and the part of town they live in. I don't want to show anything too built up - e.g. a majorly fancy skyline - because it will communicate the wrong ideas about the book.

I could also run with the idea of featuring a sunset, as they are something spoken about and focused on in the book. But, I'm concerned that showing a sunset can soften the mood and will detract from the idea of violence etc that I am trying to portray. 

Another thing I need to consider is the colour of the background and how it works with the grey fencing. The fencing is a grey, and there's a lot of it, and there seems to be a fine line between shades of a colour that do and do not work with grey. I do not want to highlight the grey too much, but at the same time I do not want it to merge with the background too much as it becomes confusing and not very pleasing to look at. 

Further Design Development

Since my last post I've developed my design a lot further in Illustrator.

I started to work further on the newspaper article aspect of the design, so I started with drawing lines where I wanted to simulate text for the articles.

The reason I have chosen to draw lines rather than write in fully fledged articles is because I do not want to overwhelm the page with too much text. I am slightly concerned with, though, the amount of the lines there are going to be on the page - what with the fencing in the background too - so at this point I started to consider their opacity and how prominent that are on the page. I want them to be obvious and look realistic, but not too much so they clash with other parts of the design. 

Whilst it's not too easy to see it in the small screen-cap, I made a decision to not make every single line the exact same length. I did this because I felt having each line start and end at the exact same point made it look as if there were just a perfect rectangle of lines placed on the page, and by very slightly offsetting them it made the design look a bit better and more true to a newspaper. 

Penguin provided the text that needed to be featured on the back of the book for the blurb. Because of my newspaper idea, it made sense to me and looked good to fit the blurb within the newspaper as if it were an actual article. I decided not to align and format it like the surrounding articles, and use colour to make it much easier to read. I chose red as it will match what I am going to feature on the front cover, as well as red having certain connotations (e.g. violence, blood etc).

All of the lines that I drew for the article are just created with the line tool on Illustrator, so are very easy to manipulate and change the shape of. Again, to create more of a realistic feel, I decided to simulate each individual word with the lines. I felt like it broke up the page a bit more and preferred the look of it. 

The article is at a slight angle as I wanted to make it look slightly offset and "edgy" on the angle, as if the paper had been ripped in a carefree way. You can see in the above screen cap how it will wrap around the entire book, over the spine. The addition of a paper texture over the article is an attempt to give it another aspect of realism, although I would like to add more prominent tears, rips and page curls to strengthen the idea of the paper being slightly ruined/destroyed. 

This is as far as I've got so far for where the book title is going to be featured. I started to experiment with the idea of a logo that is stamped over the top of the article, but I'm struggling on how I'm going to convey all the messages I want to in it. I want to include a knife, as I like the feeling that it will portray and I have an idea to have the only colour aspect of the front cover to be the red blood on the knife. 

I like the look of the slightly jagged edged circle, and want to develop this further. I'm really inspired by the retro logos that I researched in a previous post, specifically the ones below. 

Above is what the design looks like so far, without a background. I really like my use of red so far, and I want to incorporate it further on the front cover.