OUGD504 - Module Evaluation

Module Evaluation

The first brief gave me the opportunity to experience what it is like to play the role of the client as well as the designer. This was an interesting way of gaining an idea of what it will be like in the industry when having to design for a client. Although this was an interesting way of discovering what its like to play both roles I did feel that the hand over of work with another person was sprung on us quite surprising and leaving us with not much of a time margin to get our heads around the content which we had been given. I feel that it would have been beneficial to have been given a bit more time due to the change in content. By being given extra time I think that the final outcomes would have had the potential to be even greater. Saying this, I do feel that the outcome which I managed to produce for this brief showed a good understanding of the different production methods which are used in the making of a publication.

I found the second brief to be more challenging than the first as I had never experienced designing for screen before or using the programmes which are involved in screen based production. This brief therefore allowed me to develop a greater knowledge of the different steps and details that have to be taken into account when creating a screen based media. It also allowed me to experiment with using the programme Adobe XD and therefore develop my designing skills and the programmes which I am able to use. I enjoyed developing a design for a client as it meant that I was able to gain constant feedback and this also means that my designs will hopefully be coded and put online for the companies website. I think something that would have helped with this process would have been the opportunity to have a few inductions in the use of XD and after affects in order to help develop the prototype videos to a higher standard.

Overall I think that the module has been useful for the development of my computer skills as well as my practical skills. I have learnt a lot about the work that goes into designing for production and the huge amount of considerations that have to be taken into account. For design for print there has to be a lot of consideration into the paper stock, binding and production methods and for design for screen the is a huge amount of consideration that goes into the way in which the design will function as well as the design itself. I hope to gain more opportunities to continue using the skills which I have learnt during this module so that I can develop my knowledge of the processes and programmes to a higher standard.

OUGD504 - Studio Brief 2 Evaluation

Evaluation

This brief allowed experience in developing a screen based design for a client. It involved working alongside the founder of a company and keeping a constant connection in order to gain designs that were representative of the brand and pleasing for the client. 

The Aubrey and Oakes website successfully responds to the given brief as it solves the problem of an upcoming company being in need of a website. It possess all of the information that was asked to be included and presents the content in a clean and crisp design. This therefore give the user an insight into the background the company and its development which was very important to the founder and the rest of his team. The use of a minimalistic style created a high end and classy feel to the website and gives the impression of a luxury brand. 

The production method and use of Adobe XD allowed the client to gain a thorough understanding of the way in which the website would work and how to navigate from one page to the next. This therefore responded to the brief affectively as the use of a prototype demonstrated an understanding of how to design a fully functioning screen based media.

The only suggestion that was made after the final crit for further development of the Aubrey and Oakes website would be to create a greater connection throughout the website to the reasoning why the brand is different and special. This would involve creating extra aspects to the design that draw subtle connections to the bamboo material as this would project a stronger message as to why Aubrey and Oakes underwear is a product that would make the customer feel not only comfortable but superior and special.

OUGD504 - Studio Brief 1 Evaluation

Evaluation

This brief allowed us to experience what it would be like to be both the designer and the client. It involved having to produce work for someone else in time for them to get there designs done whilst using the given content to design a publication fitting the brief given by the client. 

A Little Book of G & T successfully responds to the given brief. It possess all of the information that was asked to be included in a sophisticated and clean design. The use of a layered design is inventive and different from what is already on the market and creates more of an interactive feel for the reader as they have to retain the information given in the content in order to decide on a gin and tonic combination. The use of typography is representative of the subject of the book and therefore creates another subtle connection between the publication and the brands of gins and tonics. 

The production method was straight forward but quite time consuming. As a solution to this the laser cutter could be used when creating the cut outs for the inside of the publication as well as on the book sleeve. This would save time when creating the book as they wouldn’t have to be cut by hand and would also allow for a closer accuracy. This would also show a further consistency throughout the publication. Another consideration would be the use of stock for the tonic pages in the combination section. The use of tracing paper adds a nice texture to the book but might not be seen as consistent in the theme of the publication being well made. After a lot of use the tracing paper may become slightly worn. Even though it would be more expensive the use of acetate could therefore be considered if A Little Book of G & T were to be mass produced.

OUGD504 - Finished Publication

Finished Publication

A Little Book of G & T is a helpful guide for Gin enthusiasts as well as bar staff. It can be used in bars to help customers decide what combinations of gin and tonic they would like to drink and can also encourage them to experiment with tasting different flavours to what they are used to. The book is laid out so that it displays the information about the gin and tonics at the beginning and then gives the popular combinations to try at the back in a layered design. The book is easy to read and interactive as it involves the reader taking note of the information they have been given helping them to become more knowledgeable about the different branding and flavours. With the help of A Little Book of G & T anyone and everyone has the opportunity to create their favourite gin and tonic cocktails. 

The final outcome demonstrates a well rounded understanding of the processes that it takes to design and produce a publication. The images above show the final outcomes for A Little Book of G & T. The book has used a combination of different paper stock, a hard back cover, stab stitch binding method and has been finished with the use of a simple sleeve with a laser cut title. I am pleased with the outcome of the book and think that it successfully responds to the brief given to me by my client.

OUGD504 - Final Outcome

Final Outcome

Aubrey and Oakes is a upcoming luxury mens underwear brand. Due to the funding of the project the founder is struggling with the budget and therefore has been unable to have a website designed. In response to the brief this problem has been solved by the development of the designs for Aubrey and Oakes online shopping. The company is different from others as they have taken time developing underwear that is not only comfortable but fashionable. They spent a long time sourcing the materials in order to get the perfect combination of comfort and style. The company uses bamboo material and luxury packaging to make their customers feel superior and special which was important to represent in the web design. The design is clean, crisp and minimalistic in order for all users within the target audience to be able to understand and use with ease. The target audience ranges from the men who are interested in comfort and fashion who will be wanting to wear the underwear to the partners who may be using the website to buy the products for them. 

The final outcome of the website can be seen in the video above. After my final crit I was able to edit the video slightly more after the help of my peers to make it flow a little better and also speed it up a small amount so that its not tedious to watch. The final outcome demonstrates an understanding of how to design a fully functional website. The minimalistic style creates the correct aesthetic to reflect the luxury brand and therefore has met the terms which the client asked for. 

Although this is the end result of the work for the module hand in, I look forward to continuing to work in close contact with the client in the continued designing process for the Aubrey and Oakes website. I look forward to seeing first hand the process of my website designs being processes and launched online. 

Below is a mock up of how the first page of the finished website should look on a computer screen. 

OUGD504 - Website Mock Ups

Website Mock Ups

In order to produce a realistic visual of how the website would look I also created some mock up designs for the Aubrey and Oakes website. This just helped to create more of a visual understanding of how the website will look when online. I created mock ups for all of the designs used in the prototype video but also added some of the extra in just to give the client the option to add in any of the extra designs if they wanted to, however at this stage this would be a further improvement for the future of the web design. 

I think that the mock ups ended up looking fairly realistic and with a bit more work with the client this website will have an effective presence online. 

OUGD504 - Experiments from Final Crit

Experiments from Final Crit


After the final crit I decided to experiment with the suggestions that were made by my tutor and peers. They told me I should look at experimenting with aspects of bamboo in order to make some connections to the underwear material throughout the website.

The first edit which I made was experimenting with a textured bar across the top of the website in order to add some extra detail. For this page I used an image of bamboo sticks all together and cropped it down to the size I wanted. I then changed the opacity so that the brand name could still be seen clearly.

The second bar I experimented with was using an image of bamboo leaves. Once again I cropped the image down to size and changed the opacity. The idea of using the bars was to add some more colour and make the connection between thee website and the bamboo material clear.

I wasn't sure about the use of the added bars as I think that they looked a little forced. I didn't want the website to start looking like it was tiki bar. I therefore decided to try experimenting with more subtle connections. 

I tried using leaves across the website. I took photographs of bamboo leave and made them into vectorised drawings. I tried them on this page in the corners very small so that they were just a slight extra. 

I also tried using the leaves on the menu. They were slightly bigger than on the page I tried before as there was less detail on the menu.

Finally I tried experimenting with the bamboo sticks. I used them in place of the book corner which I had made in the green colour before. 

If I had more time after the final crit I would have continued to experiment more but with the time I had I felt the extras that I produced were not correct. I think they looked a little tacky and would take some time to get correct.
I spoke to Sam and asked his opinion and he agreed that they would need more work if they were to be used for the website as at the moment they weren't projecting the image that the company would want. He much preferred the minimalistic style which I had originally designed. I therefore decided to stick with those designs for the time being as the crit group had liked them as well.

OUGD504 - Final Crit Feedback

Final Crit Feedback

For the final crit I showed the group the video which I had made on XD and also ran through it on XD page by page so they could understand the way in which it would function and also get a feel for the design. The feedback which I got was as follows:

Like:

• The clean, neat and minimalistic design works well for the brand and its style.
• Its really clean and functions well.
• The layout is good and gives the impression of a luxury brand.
• Very nice and Sleek design.
• Love the full page bleed of the images on the home page. 
• The use of colour and simple style is perfect, it makes the website look high end and classy.
• The navigation is good!
• The minimal style works so well for the branding.
• The minimal style definitely reflects luxury.
• Really like the layout.

Possible Improvements:

• Look at making it more obvious why this brand is better than others... the bamboo. 
• Add subtle aspects that reference the use of bamboo for the material of the underwear - leaves, maybe more colour, bamboo stick, simplistic panda illustration. 
• Maybe look at a textured background?

My response to the feedback:

I was really pleased with the feedback as everyone seemed to like the minimalistic style and thought it was very representative of the brand which was what I needed. I want to experiment with some of the suggestions that were made about making a connection to the bamboo. However as it is a high end brand I don't want it to end up looking tacky as this would become unrepresentative of the company. 

OUGD504 - XD Recording

XD Recording

In order to understand how the website would function and flow I put the Illustrator designs into Adobe XD to create a recording. This video helps to demonstrate how the different pages in the website will flow from one to another and the different connections that are made throughout the website. As this was my first time using XD the recording is very rough and doesn't flow exactly how I had imagined it but it does allow for a clearer understanding of how the website will work.

I initially had to create a flat design of all of the different pages/art boards. I found this to be more challenging than I had initially expected as I had to overcome and couple of different issues. I became aware that the XD art boards were a slightly different size to the ones which I had used on Illustrator. This meant that I needed to alter the design slightly when putting it into XD making the measurements slightly different to what they originally were.

Once the pages were transferred over I started to make the connection for the prototype. When I started doing this I realised that there more pages that I needed to make in order for the website to work correctly. I therefore added the pages that were missing such as an empty basket page and a few pages for choosing an items size and quantity to add it to the basket. 

I then made all of the connections for the prototype video. 

The video flows so that it is understandable of how the website will work but I would want the actual website to have more animations to make it more user friendly and interactive. 

OUGD504 - Design Development: Layout

Layout

The chosen page designs for the website are seen as follows. They layout will use all of these pages and should be a fully functional website. 

Splash Page:
This will be the first page seen when entering the website, it will disappear once clicked on.

The is the first page of the home page, it has the scrolling bar which has different images above. This page will appear once the splash screen has disappeared. 

This page has the second scrolling bar image.

This page has the third scrolling bar image.

This page will follow on from the home/about page. You will be able to scroll down and view this page. 

This page will also follow on from the home/about page. This page will follow on from the styles section. 

This was the chosen menu page. This will be able to be accessed from every page of the website. It will drop down from the top of the screen and give the user all of the options of where they can go on the website. 

When 'SHOP' is clicked on in the menu bar this is the page which will appear. It shows the styles to refresh the users memory and the products.

This was the chosen design for when an item is clicked on.

The Contact Us page will be able to be accessed from the Menu Bar.

The Shipping and Returns Page will also be accessed from the Menu bar. 

I also designed a page for when an item has been added to the bag. The bag can be accessed from every page throughout the website. It follows the same design pattern as the rest of the website using the box corners for the buttons and keeping to the minimalistic style. 

OUGD504 - Design Development: Contact and Shipping Pages

Contact and Shipping Pages

The contact and shipping pages were quite easy designs to do as they just had to follow the pattern of the rest of the website and include all the information needed. However because these pages were only going to be possessing information they could look quite boring. I therefore decided to try and make the Contact Us page a little more interesting by including some of the companies Instagram pictures. These designs can be seen in the image below. The first uses the images just underneath where it gives the Instagram information and the second design has the images spread across the bottom of the page. I asked my peers which design they thought would be the best to use and they thought that the first design. This is because as the images are from the Instagram account it made the most sense to have the images displayed only underneath the Instagram details.

The Shipping and Returns Page is very basic. I hadn't actually been given this information from the client so I just used filler text from a clothing website to give a slight idea of how this page would look. This page is extremely basic but it is mainly about the information that is being displayed rather than the extras. It needed to be simple so that the user can go onto the page and find out what they were needing to without any unnecessary stress. It follows the same pattern as the rest of the website and the information is easy to read. 

OUGD504 - Design Development: Shopping Pages

Shopping Pages


The shopping pages needed to display the products in a neat and clean layout. This is so that they were easy to look through for the user. I didn't want the design to look too overcrowded at all as this could become uneasy to scroll through and might put people off looking through the website.
The initial designs for the shopping section can be seen in the image below. I had initially designed the top of the shopping section using the names of the underwear that the brand has to offer so that the user could click on the style which they wanted to look at. Once clicked on it would display all of the underwear that the company sells in that style in rows of three shown in the second image.

I showed these designs to Sam (the client) and he liked them however suggested that at the top of the shopping page I could use the illustrated images underneath the names of the styles in order to remind the user of what each style looked like. 

I therefore redesigned this section using the idea which he had given me and the result can be seen in the image below. I showed him this design and we both agreed that this was the best option as once again it made the website more user friendly as it presented them with all the information that they needed to know. 

The other part of the shopping section which I needed to design was when an item of clothing is clicked on. The designs for this page can be seen below. I experimented with slightly different layout and different types of boxes for the buttons. I thought that the best option would be to run with the theme of using the corners rather than a full box which are the designs in the top row. This is because it would therefore keep consistency throughout the whole of the website. I discussed these three designs with Sam and the middle design is the one that we decided. This design showed the most consistency with the other shopping page and also was the easiest to understand. It used the name of the product under the image and made it very clear what the price of the product was and how to add it to your bag if you wanted to.

OUGD504 - Design Development: Menu Design

Menu Design

When designing the menu bar for the website I wanted to experiment with all the different kinds of menu bars which I had seen in shopping websites. 

I initially tried experimenting with a small menu that would only cover the top left hand corner of the page when opened. These designs can be seen in the top row of figure 1 on the left hand side. The use of this as the menu bar wasn't the aesthetic which I had hoped for. I thought that the menu seemed a bit lost in the rest of the page and therefore would be harder to focus on for the user. Also when thinking about accommodating for all users I thought that this wouldn't be the best design as for users who may have worse eye sight this could be harder to read as its quite small. 

I then tried using a menu which covered one half of the page. I also experimented with the idea of the rest of the page dimming when the menu bar was clicked. This can be seen in the bottom left hand corner of figure 1. I thought that the use of dimming the rest of the page would make it easier to focus on the menu bar and not find the background images distracting. However I wasn't sure that this looked very aesthetically pleasing as it became a little messy. 

The final design which I experimented with for the menu was to do a menu that when clicked would cover the whole screen. I personally thought that this was the best design of them all because it was the most simple and there were no other distractions on the page. It would be the easiest to understand as the user would click the menu and the only options left of the page would be the ones that the menu had to offer.

Figure 1

When discussing the menu designs with the client he also though that the full screen menu was the best design. This design suited the minimalistic style which he had asked for best as it was clean and crisp.

OUGD504 - Design Development: Extra Pages for About Section

Extra Pages for About Section

The next part of the web design was to continue with the about page. I wanted this to be a scrolling page in order for all of the information to be in one place making it easy to understand for everyone who would be using the website.
For the information about the different styles that the company has to offer I tried using the content and setting it out in two different layouts. I asked for feedback on these layouts from the client and we both agreed that the one in the image below on the right hand side was the best one to go with. This is because it was much clearer as to what writing went with what style of underwear. The other design could become slightly confusing to users so we decided it was better to keep the design clear and simple to account for all.

The next part of the about section would be about the packaging which the company uses. They are very proud of the packaging which their underwear comes in and therefore want the customers to be aware that they have tried to give them luxury service in all aspects of the products which they buy. The design for this part just followed the same pattern which I had used for the rest of this section combining the section title, an related image and then the information below the image. The use of the double lines by every title is supposed to show a sort of representation of an underwear waste band. I thought that this could be a subtle detail that just keeps the theme running through the website.

Once again when discussing this section with the client, he was very pleased with the layout and felt that it was what they were looking for. 

OUGD504 - Design Development: Home/About Page

Home/About Page

When designing the Home page I wanted to include the elements about the company that I had originally considered using as a slideshow which the user would have to look through before getting to the main website. I therefore thought that instead of the home page including information about the shopping and showing the products like most clothing websites do it could have all of the information about the company as its very important to the image they are trying to project.
I therefore used the images which I would have used in the slideshow in a sliding bar at the top of the home page. This would allow the viewer to look at the images if they wanted to but also wouldn't allow users to get bored of fed up as they would still have the option to click the menu and go straight into shopping.
After the sliding bar I wanted the page to continue in a scroll to give all the information about the company and what they are all about. This design starts with the main reason that Aubrey and Oakes are different to any other underwear brand which is the use of the bamboo material which they believe will make men feel superior and special.
I therefore used the symbols that represented what the bamboo material has to offer and designed the top of the about page.

When discussing this section with the client I wanted to know which pictures he felt were best to use to represent the brand. From the feedback I was given it was decided that it would be best to use a combination of the images of the packaging and the workshop in order to give a varied demonstration of the companies attributes. 

OUGD504 - Design Development: Splash Screen

Splash Screen

The splash screen was a detail of the website that the client had asked me to add to the website in order to highlight the companies branding when first entering the website. When designing this page I experimented with just type and type with image. I used the images that had the least of the branding in as I thought this would give away too much to the user before them entering the website. I thought that it would be interesting to give a snippet of what to expect but not give to much away meaning that the viewer is therefore intrigued to find out more. When designing the typographic screens I initially tried just the logo on the white background and then began to experiment with adding small details to make it more interesting. I used the page corners which are used throughout the website to box in the logo and make it stand out more for one of the designs and for the other I tried to create the idea of a underwear waste band. I used the burgundy colour that is used in the iconic underwear designs and created a strip across the brand name.

When discussing the splash screen designs with the client we decided that the best ones to use would be the photographic designs. This is because they were more inviting and gave a bit more visual detail about the brand for the user to understand. The favourite of the splash screens was the one on the bottom left hand side of the images above. This is because it was the image that had the best balance of intrigue.