OUGD601 - Production

The next stage in the design process is to start creating the final layouts for my website. Through experimentation I was able to decide on some of the different parts of my final outcome. It was decided that the background fill will be coloured for each of the rule breaking spreads. This opposes Modernist ideas and also is more eye-catching which means there is more of a differentiation between the two opposing parts of the website. These will be chosen through further development of the site.

The editorial layout each page will be constrained within a box. This will means there is regularity between the spreads and therefor the site won't look disjointed. Although the modernist pages may appear to be boring compared to the rule breaking ones, they must be clear and legible so the interview responses and modernist design of the page can be acknowledged by the reader.

I created wireframes for the website as they aid the production of my website by helping me plan what is going where. This also enabled me to experiment with the placement of other things that must be included such as links and arrows to move across the screen.

Typefaces
The most appropriate typeface must be chosen for this online editorial. As previously decided, I will be using both a sans serif and serif typeface within each page. For this I chose Times, a classic typeface paired with Apercu a modern sans serif typeface as this pairing is similar to how my publication combines the old and new.


After experimenting with each of the different processes involved on each page, I started to create a number of versions of each typographic layout and composition which were then shown to a critique for feedback.

Each one of these designs had progressed at different speeds because of the different production methods used in the layout.

Heller
To help me with this page I first compared my experiments with my previous research on post modernism. The hectic layouts in Raygun helped me visualise my experiments however I felt producing this layout on illustrator would lead to a better final outcome. To do this I scanned in my experiments and produced two different ambiguous layouts which were very different but still used the same experiments I created earlier in the project. 

Between these two ideas, the top was chosen as the critique felt it best considered where each element way placed. Although it was based on the overlapping techniques in post modernism my critique thought it looked rushed.

Carson
The Dadaist style I used as inspiration came through within my experimentation. This was applied to the work I did on the different page options however I also took into account Carson's own style.

This design above was based off pages of Raygun where multiple sections of body text are layered over Carson's name. The bright pink colour is used to contrast the monotone colour scheme of the modernist design.

The use of grey on black here make the type experiment more ambiguous. The us of dark text on a dark back ground is also something Tschichold identified as wrong as the text become hard to read. Because of this layouts contradicting design it was chosen in the critique for use within my final website.

John & Alec
Although some sketches were produced for this layout, I had previously decided that it would all be produced using design software rather than any manual processes. The design of the layout was attempted numerous times as the aesthetic were a priority in a design where function follows form. One of the main ideas for this layout was to disobey as many modernist design rules as I could.

I chose a light blue to use as the background for the final layout. This will also be used as the fill for the rest of the page. This colour was chosen as it is suitable to may of the minimalist designs that are seen today. An image is placed in the centre of text, apposing one of Tschichold's rules. The serif typeface Times is used for headings, contradicting the san serif body text. Some quotes are oversized and text boxes have been restructured.

Modernist Layouts
The Layouts that were produced the fastest were the modernist, as they followed a strict grid and canon. My previous research on Jan Tschichold's The New Typography meant I was familiar with the constraints that the layouts had to follow. I produced only one of each of these pages for feedback during the critique as I was confident that they were appropriate for the website.

Contents Page & Questions
These layouts would have to be functional so the user can be guided around the site however some of my final page ideas were experimental and hard to read which was appropriate for its relation to todays rule breaking design.

Once each of my layouts had been chosen, the final production of the website was in order. Prototyping was done on Adobe XD as it enables me to test out the website with the functionality of links. This would also enable me to show a client the website before are coder is involved.

The wireframes I produced helped me to put work in the right order. It also meant there was little to do when it came to putting everything together. There were however some elements that were added to improve the usability such as adding arrows to each page so users didn't have to keep switching back to the contents. I also decided to show the 'about' link in a more experimental way to better portray the rule breaking layout in this part of the website. Although using the same previous typeface, each link was typeset differently to add ambiguity.