Page layout task 3

Page LayoutTask 3

Patrick Gouldsbrough

I noticed that the Facebook page that was in the content section contained ‘broken arrow’. From there, I differentiated Broken Arrow from the rest of the bands and ranked them as the headliners. For this reason, I made the title 30 pt, bigger than the rest of the text, plus, I made the font different to the bottom part of text. As well as this, I used the block capital tool to make it further stand out from the rest of the text, a function which I wanted to carry out.

As for the support acts, I wanted to make them stand out, but not as much as Broken Arrow, the headline act. I did this by maintaining the block capital tool, but I reduced the size of the text, so it wouldn’t take attention away from the location, fibbers, or the headliner.

The date, time and price was, for me, the next level of hierarchy in the layout. For this reason, I decided I wanted it to stand out, due to it been a question of people coming to the event. Since I had already altered the size of the text on the top part of my layout, I wanted to alter the colour of the font instead. I changed the font to Blue, so know you could differentiate between the acts and the date of the event.

The last bit of information this layout had to include was social network addresses. This, I decided, was the least important piece of information that would be included in this layout. For this reason, I didn’t want it to stand out, instead, I wanted it to only just be noticeable. I went with the red font, due to the Blue font of the date been key and therefore standing out from all other text on the page. A smaller font was selected, this made it look readable, but look insignificant, which I wanted. A more restrained font, Minion Pro, was also selected for this section of text, which shrunk the text down further.

This bit of text was the last to be added, due to the positioning of it been in question. At first, I thought it should be added with the date and price, but then changed my mind. I realised that the place in which the event is on, should be the most important piece in the hierarchy. I started by making the font bigger than the rest of the text, a size of 60 pt was adjudged by me to be the right size. A Blue colouring was chosen also, because I wanted to differentiate between the location and acts, while I also felt it was far enough from the date and price to be the same colour. Unlike the ‘Broken Arrow’ text, block capitals weren’t used. I didn’t select this tool because I felt the 60pt text and the change in colour was enough to make it evident that this text was the most important hierarchical feature.

Layout #1

Layout #2The font and the size of the font differentiates the main headliner from the support acts. Even though in my other layouts, Fibbers is at the top, I wanted one with Broken Arrow at the top, due to people potentially familiar with Broken Arrow been enticed by the feature.

Even though I haven’t changed the size of this font, I felt that the font change would highlight the differentiation between the two types of bands; headliner and support

The line of the date, as well as price and location are featured on this line. I decided to put a more restrained font on the text, as well as reducing the size of the text also. On reflection, a bigger font should have been used, due to the location been key to the success of an event, therefore, it must be clear to see.

The social network addresses are further reduced in size, compared to the date and location. This was mainly because this information was the least important, hierarchical wise, on the layout. The font has also been additionally restrained in terms of creativity, which helps clearly split this section and the line above.

Layout #3For this layout, I decided to take an unconventional approach to the hierarchical layout design. Instead of putting the key information at the top, I put the least important information at the top, while I made the rest of the text enticing to the consumer, which then made the least important information unclear.

The striking text, coupled with the size and different colour, makes this piece of key information stand out, despite not been on the top of the page layout.

The white space between the headliner and the support acts make this layout one of the easiest to differentiate between. However, the text is not lined up, so it makes the whole layout look unprofessional and finished to a low standard. If I repeated this layout again, I would makes sure all three bands are in line with each other, instead of been scattered around.

I decided for this layout, Fibbers didn’t have to be at the top, but instead it could be near the bottom. To be visually the most important hierarchical object then, would need it to stand out. I used Green, a colour that I didn’t use for any other text on the page. However, as you can see from the image on the left, the size of the font, along with the lack of boldness, makes it look like one of the least important elements of the layout, thus ranking this layout ineffective.

As stated on previous layouts, the date is a key part of the layout and therefore high on the hierarchical layout order. It’s for this reason, this layout, once again, must be ranked ineffective. The text isn’t clear, which is bad for a layout like this, due to people needing to know the time and date of this event. The quirky angle it’s positioned on also doesn’t help, if I did this layout again, this would be changed.

The price on the right hand corner of the screen is more noticeable than the date and time, which is not right on the hierarchy. While the price is key, the date is more important and should be in a bigger font, which this layout doesn’t show.

Layout #4For this layout, unlike the previous one, I returned the Fibbers text to the top of the page. Also, unlike the previous layout, I made it clear and easily readable for consumers. I did this by colouring the font in red, a different colour from the text below. This will ensure the audience differentiate between the two. A larger font of 60pt was also added to my font (Bauhaus 86) to make it stand out from the rest of the text on the layout.

Broken Arrow, decided as the next hierarchical feature for the layout, was in a bigger font than the support acts, as well as a block capital tool been in use as well. As for the support acts, a smaller font type and a standardised boldness was used. This was intended to make it easy for a consumer to tell the headliner and the support acts apart.

As decided in a few of my previous page layout efforts, the date and price was the next piece of information on the visual hierarchy list. The Green text makes the text stand out from the rest of it, which is what I wanted, to a certain extent. However, the size and boldness of the font makes it look insignificant, compared to the text above it, ranking it an ineffective page layout. The quirky angle in which it’s positioned makes the product unprofessionally made and is an industry sign of cheaply made products. The positioning also allows the right hand space to have some empty white space.

This text, amongst other portions of text on the page, is not centrally aligned. This then leads to the page layout looking unprofessional and therefore it doesn’t fulfil it’s purpose, to inform/entice people.

The Red text should contrast well with the white background, but due to the size of the font, it looks like small print on the bottom of he page. However, this piece of information is at the bottom of visual hierarchy, so should be the lest noticeable feature, which it is.

Layout #5In this task, the use of shape was not permitted, therefore it made it very difficult to make the layout aesthetically pleasing to the consumer. However, after looking at a few music event posters, it became clear how I could make shapes with the words. At first, I had fibbers all the way round the border of the layout, however, felt it took away from other elements on the page. As for positioning, I decided that the two pieces of text could be side by side, as long as the font colour was different on both bits of text. The red, Black and Blue contrast well, while both pieces of text are clear and look creative, unlike my other layouts thus far.

The fonts of the support acts were bigger than the font for Broken Arrow and Fibbers, but due to the shapes of the above text, this text still looked lower down in the visual hierarchy. As well as this, due to the word shapes looking unusual when next to each other, fibbers had to be moved down, which then caused the support acts to be changed from the initial centrally aligned text. However, I feel the text looks more effective like this, while a quirky, unprofessional position isn’t taken here, like layout 2 and 3.

Staying with the same font colouring, the date and price were the next bits of text to be added on this layout. The reduction in the font size has led to it been evident that this is less important than the support acts in the visual hierarchy, but more important than the social network addresses.

The social network information was shrunk down further in font size. This made it the least noticeable piece of information on the layout, which is should have been, according to my visual hierarchy decisions.

Layout #6The red colouring, compared to the multi-coloured lettering, along with the blue colouring, stands out from the other text. The bolder and capitalised tools also help this piece of information stand out, as well as the pt48 font Bauhaus 86 font. The only criticism of this piece of text is the positioning. It’s not centrally aligned, thus compromising some of the professional qualities of the layout.

The multi-coloured lettering of the headline and support acts is maybe a bit too bright for what I was trying to achieve. I wanted this part to be equally striking, compared to the fibbers text, but I think it steals the majority of attention from it instead. While the text of Broken Arrow is clear, due to the size font, some of the lettering of the support acts is difficult to read.

Due to the bright colouring of the above text, this text doesn’t get noticed as much, which I didn’t want, due to this piece of information been a key hierarchical feature. Despite the font been a reasonable size and the colour been different from the above font colouring, the multi-coloured fonts would have made any colour and size text look insignificant.

Out of all the layouts so far, this one allows the social network section to be easily readable and clear. However, as previously mentioned, the font colouring at he top takes all the attention, so if the text isn’t of a reasonable size, t will look like small print. The only criticism of this piece f information is the way it’s set out. A more centrally aligned social network information piece would have looked more professional and given it a good finish.

Layout #7

The variation in font from these two pieces of information helps to differentiate between the hierarchical importance of the tow sections. Fibbers, written in Bauhaus 86, compared to Broken Arrow, written in Collegiate, doesn’t vary that much size wise and weight wise, therefore, a very clear difference is not evident. A change in colouring on the Broken Arrow may solve this problem.

The same Collegiate font can seen on the support act also, however, the size of the font has changed and the weight has been reduced. A clear break between these bits of information on the visual hierarchy scale is evident, but the above solution of font colouring could make it even more clear.

Unlike the other layouts, the text for this section of information has been increased. However, seen as the font has become less striking, compared to the Collegiate font, the order of visual hierarchy is still balanced.

In the same text as the above section of text, the social network part is reduced in size, to show it’s the least important element of this layout, therefore the least noticeable and clear on the page. If I was repeating this layout, I would align the text to be central. This feature would make the overall layout look professional and clear.

Final Layout

A bold heading to highlight the most important visual hierarchical piece.

White space and gaps to differentiate between the most important and less important parts of text.

A different colour highlights which band is the headliner and which are the support acts.

No change in the font size for the information about dates allows it to stand out, as well as white space been a factor.

All the elements are centrally aligned, which makes the overall layout look clear and professional.