OUGD503 - Responsive - Collaborative Project

For this project I will be teaming up with another creative to work as a collaboration.

I have recently teamed up with an illustration student to work on the Adobe Project for OUGD503 - Responsive.

The reason I wanted to work with an illustrator for this project is because Adobe asks for heavy design skills to promote a message to inspire and advise others. 

OUGD505 - Studio Brief 02 - Brief and Issue choice

For studio brief 02 I am required to research a topic of my choice.

"Examine graphic design outputs relating to social, political and ethical change. Aim to increase your awareness of historical examples plus contemporary practice that is responsive to 21st Century issues. Be sure to note the interrelationships between medium, message, and distribution. You should then produce a body of research work that explores the connections between these concepts and their respective design outcomes prior to your own practical and conceptual exploration of possible products, ranges and methods of distribution that may be suggested by your preferred content or, indeed, those that reflect your own ideologies, concerns and/or ambitions".

For this project, my choice of a modern issue will be about the 'homophobic abuse and deaths that are currently and shockingly taking place in Chechnya.

The events that have occurred and are still occurring in Chechnya are very important to me, as well as constantly finding myself very emotional about the whole subject.
It is very important to me that I respond on a personal and professional level as a graphic designer to the issues.

I will first start this project by carrying out extensive research into the the issues and taking a look at the global scale responses to the current issues in Chechnya.

OUGD504 - Studio Brief 01 - material choice for protection

Thinking about what material would be best to protect the interior of the book has been a difficult choice.

since the overall design of my book will not have so many pages I wanted to choose a material that wiped help give the book a little more 'weight' and 'thickness'. The best material I could think of to achieve these characteristics was 'silver board', a fairly thin board however much more stronger than very thick card. Silver Board provides strength to the book as well helping to protect the inside pages and the overall shape of the book.

Silver board is also the perfect material to help hold the front cover design and material which will be wrapped around the front and back pages.

Below are images with the silver board applied to the design

The silver board definitely helps with the books structure and stability.

OUGD504 - Studio Brief 02 - Final Design Website Mockups

Working from hand rendered wireframes, mock-ups were then able to be created. The wireframes gave a clear guide as to where certain things should be place, like text and images. They also provided a clear guide as to how things moved and how the user would be able to navigate around the interface.

The first mock is the home page.

The home page had to be simple, and easy to navigate. Similar to that of a website profile but not really a website profile. More a profile of work. The centre of attention for each page on the website will be the logo, which will be at the top centre of each page. The logo will also act as a web page button which when pressed will activate a drop down menu. to access other pages on the website. 

The user will need to figure this out for themselves; pressing the logo to activate the menu, although the user will be prompted to press the logo by animation. the logo will be an animated piece on the home page (an on and off animation), that way the user will know that something is going on and will investigate by hovering over the logo. 

The design of the first page had to be simple, no over firing information at the user. Most of the home page will be taken upon with six animated boxes which will display work/projects and every few seconds a piece of work in one of these boxes will fade away and a different piece of work/project will fade in. the user will be free to hover and press on any one of these boxes to release more information about that certain work/project. 

I feel that an easy to navigate and simplified Home Page is the foundation for a good website.

The design of the menu is an easy task, which can be accessed as soon as the user understands how to make it appear on the interface. 

As the menu appears the current page will fade making the menu boxes and text more visible. The menu is designed to be simple and easy to understand, achieving this by using simple faded grey rectangle shapes and plain white text for the page names. 

However after looking at more website designs I feel that possibly scrapping 'The Team' page on the website and keeping it purely a website that represents the brand name, the work would be better for a simplistic design, also the biggest reason is that I cannot pretend that the business has a website 

The next page to work on is the 'work' page, which will show off any past projects.

For this page a lot of inspiration came from the Apple.com website. Each one of there pages navigates by having the user constantly scroll down the page to see more content. it is a very nice way to create a smooth a perfect feel and look to the website. A lot of modern websites that are being created, now use the same navigating technique because it is so effective. 

The same style will be applied for the 'Work' page of the website instead of something traditional.

This is a much better way to present work. I did also think about using sliders on the web page to navigate through projects, however because the apple website (personally i think) is one of the best modern website designs in the world at the moment. I would like to reflect some of apples personalities onto the business website design, as seen above I've tried to replicate the design.

The contact page will be placed at the end of the the work page, so similar to the Apple.com website, the website pages will flow nicely as one.

OUGD504 - Studio Brief 02 - Further website design research

During work on the the second studio brief for this module, a lot of inspiration has come from other websites, which a modern, minimalist design, compared to the more traditional design that you would find on older websites, an example would be websites with the traditional menu running across the top of each page and the content underneath it depending on what ever page you are on. 

However the more modern designs have proved much better help during this project.

The website Awwwards.com has a whole section for the best website examples of designs with graphic design. I have already created a blog post about this website with some examples on that post however I feel I should continue to show what gave me inspiration.

I cam across an independent designers website called 

Anthonygoodisondesign.com

This website is definitely a favourite along with the Apple.com website. However this website is more about selling one designers skills rather than a whole bunch of different products. So the website has a lot more of a 'Profile' feel than anything else. 

The design though is just so amazing and perfect. There is a website menu but it is not really needed unless the user of this website was looking for something g specifically because the whole website is on just one long webpage that the user continuously scrolls downwards to see.

The style is a little similar to a page on Apple's website. I applied the same idea to my own website for this project and I love it. 

The next website which I liked was mainly more for how background images were displayed and how they worked with heading and informational text.

Lyytonliving.com

Which again matches the previous website with a one page website, however lyytonliving uses a more refined text and layout. Instead of full block colour for background, Lyytonlivingcom uses images, then overlaid with white text which uses a more delicate and refined typeface, which I am not sure of the name.

I do like both of these websites, I have taken a lot of idea from them and applied similar styles to my own design.

OUGD504 - Studio Brief 01 - Stock decision

For the pages in the book, I wanted something that would give the interior of the book a more sleek and attractive design. I began to think of the types of books that I personally would take a second look at in day to day life. 

magazines are what springs to mind. Mostly because of the glossy reflective pages on the inside of the publication really catches the eye. It does make the images and text stand out a little more because the pages attract and reflect more light. 

Another good reason why I like the stock that magazines are made from is because there is much less chance of noticeable scratches and smudges. If magazine stick what matt instead of glossy then even the most faint scratches and smudges would be noticeable to the reader. 

I applied the same stock to the book, which after printing did make the images and text stand out much more, as each page reflects a lot of light as you can see below.

OUGD504 - Studio Brief 02 - Writing my own Website

I have been practicing my skills on adobe dreamweaver however I am finding it difficult to understand the coding and how to position certain objects on the design page.

 I will attempt to practice my skills and use my wireframes to create some sort of start on my website and hopefully create something that is useable and works. 

I want to be able to show in this project that I have the abilities strong enough to use dreamweaver to create something functional, at least to show I know how to use the software. I believe that as I practice more and more my skills will get better. 

Using begginers skills I have managed to create a starting website that somewhat matches the overall grid of my wireframes and website mockups. I found it quite difficult to move various objects on dreamweaver because I had to create separate divides on the page which would allow me to place objects and text where I wanted them. 

I began with my header and options for the website which will allow the user to navigate to different pages, which is not actually the menu design I intend to use for the final website design, However my intended design would be very difficult for me to create at this stage.

I practiced with the creation of a home page title and heading title.

I was then able to add a few pieces of work onto the homepage to try and match the design of the wireframes, I also found this a little difficult.

Although it doesn't seem like much of a website right now. It took a lot of work and concentration for me to understand the coding language to build what I have done so far from scratch, I feel that my skills with the software will begin to get better the more I use the software from this point.

Below is a little clip of my current coding abilities.