Studio Practice: 2017

Thursday, 14 December 2017

OUGD503 - Responsive - Beth - Benefits of Live Briefs

Beth Level 6

Beth entered Secret 7", the Student Penguin Awards, YCN and Papyrus. She won the Student Penguin Competition.

Tips for competitions

- Understand and answer the brief
- Do your research
If doing the penguin brief read the book and articles about the book. Also look at the target audience and what is out there already.
- The Idea
Talk about your ideas to make sure not everyone else has got the same idea. Think tactically about which ones are taken forward and make sure your idea is different. The judges will look for ones that are off the wall and perhaps not as polished.
- Personal Touch
Let your experiences feed into your work
- Ask for feedback (and listen to it)
Listening to feedback will make a more rounded submission. In the Penguin Design Competition if shortlisted you need to be able to follow the feedback that they give.
-Submission Boards
Take good photographs of your work as it makes it look more professional. Focus on final resolution in design boards as the judges want to see what you've done. Write your concept succinctly and include research , solution and range etc.

Other things

Believe in yourself
In responsive you are aiming for the outcome so don't have to justify everything like in Design Practice.
Brainstorming with others makes it easier to dismiss ideas.
In the penguin design awards they ask you what you thought about the book so its best to read it.

Monday, 20 November 2017

OUGD504 - Module Evaluation

Module Evaluation

Within this module the projects have been much more tailored to industry briefs, which has been challenging. In the two briefs it felt like there were far more things to consider than in previous projects. The module has also been more self led, which has highlighted the importance of getting feedback from others and their opinions, as sometimes it can be difficult to see what is working and knowing how to proceed if stuck. Within the projects I have learnt new ways of working both technically and theoretically which has improved my understanding of the process of creating things for print and digital design. In Studio brief 2 I found doing work on something I had an interest in led to the development of some good work and made it more enjoyable. Although the focus on industry briefs is important I still wan to maintain an experimental approach to my work in later projects as I enjoy the process of this kind of design.

When we begun Studio Brief 1 swapping research was difficult at the beginning of the project, especially being the first project back and meant we only had three weeks to complete it, however it was understood why working to someone else's brief was important. This project was very challenging at times as there were quite a few logistical problems with how the design concept was going to work. Using the lasercutter within my work is a technology I have enjoyed using for Foundation and in my spare time but haven't had the chance within previous projects. I have enjoyed creating a physical product as I like making things and bookbinding is also something I do individually. Overall I am happy with the outcome and think it has been finished to a good standard using a range of technologies, which has been interesting.

At the beginning of Studio Brief 2 I knew very little about the methods behind designing for screen, which was quite daunting. I didn't really know where to start, especially because the project was very much self led, meaning research into this type of design was needed. However within the project I learnt a lot about this type of design and the methods behind it. Looking into UX design was interesting and working out how the site would work I felt suited my methodical approach. Once the design was created I wasn't very sure how an animated version was going to be created. I attended the Photoshop workshop however I found this hard to use and working with this software is something I need to develop and use more to be able to make the most of it. However using Adobe XD was relatively simple despite never using it before, although the preparation of the individual frames was very time consuming for a small video. It was interesting to find out that in order to design for screen you do not need to be able to code and that there are design jobs that don't actually include any 'physical' design, rather the theory behind the design. I managed to create a competent looking mock up of how it would work which brought the design to life and made the work seem more complete.

OUGD504 - Studio Brief 2 - Website Evaluation

Evaluation

The brief was to create a immersive and engaging platform to buy and sell reclaimed materials. The sites primary aims would be to promote the use of reclaimed materials to minimise the waste going to landfill and to expose users to a variety of materials to inspire innovation and allow them to see the creative opportunities of these products. The sites aim, not to influence the user too much as to what they can make allows for users to be more creative with the materials. The site aimed to create a friendly and positive atmosphere that would encourage people to use the site. The target audience for the site would be for a broad spectrum of creatives from hobbyists to designers. The concept focus of the site would revolve around the raw materials themselves as offcuts and scraps and the fact that reclaimed materials are byproducts of other processes.

The hierarchy on the homepage places the search bar at the top allowing users to search for specific items therefore encouraging the use of only what they need. The materials drop down bar allows for the browsing of materials increasing exposure to new products. The categorisation of products into materials rather than their use within techniques means that people are less influenced by what the material is usually used for. These two features as well as the branding are view able on every page allowing for easy navigation to a specific or new place.

The use of the find your... inspiration etc. bar on the homepage allows the user to understand simply what the site is about and what they can do with it, through the use of simple sentences that change. The wording of the phrase makes it personal to the user therefore increasing the likelihood of it being used.

The trending ideas section allows users to understand some of the different ways that the materials are being used whether this be through techniques or things that they are used to make, however does not show the user how to use the material or what a final outcome would look like.

The featured products acts as a way of exposing people to materials they may not deliberately search for in the search bar or browsing sections, and acts as a way of proving inspiration.

Clicking on elements within the design opens up popups making it easier for the user to understand where they are and how to get back to the main screens when finished. The pop ups are simplify content and enable the process of buying and selling to be quick and easy making the user more likely to engage with the website.

The colour scheme of the design takes influence from industrial interior design as a way of visualising the link between scrap material and the industrial processes that create them. Industrial interior design combines different types of materials both in furnishings and in terms of building features, in a similar way to the site, which showcases a variety of materials in the same space. Industrial interior design uses a neutral colour pallette which complements and enhances the mix of textures within this type of design. Using this within the website allows the variety of materials to contrast against the background and stand out whilst the colour scheme also subtlety makes reference to the types of materials within the site e.g. grey reflects metal, brown reflects wood, reflecting the contrast in manmade and organic materials.

To create a sense of friendliness within the design the branding and typefaces used were set in lowercase to create a colloquial feel to the text. The addition of a pop up at the end of the checkout process provides a friendly reminder to relist materials, with the aim of reducing waste.

The designs minimalist design and colour pallete makes the design contemporary whilst allowing the materials to stand out, making it suitable and desirable for a creative audience looking for interesting materials to work with. Many of the reclaimed materials would be scrap or offcuts from other processes so the design explores this concept by cutting off edges of elements within the design such as imagery and pop ups.

The use of XD allowed for a competent mock up of the design allowing for the interaction with the site to be viewed, however is not suitable for more responsive elements to be shown such as typing, as the software reacts only to clicking.

OUGD504 - Studio Brief 2 - Final Crit Feedback

Final Feedback on Website

*All images used within the design are stock images found from the internet

It was said that the fact that there is no scrolling needed within the site is a different but effective way of navigating through content. It was said that the concept was robust and a good social tool in terms of helping the environment. The continuation of the offcut branding throughout the site was said to be strong. By not capitalising the text within the site it was said that this creates a friendly atmosphere and creates the impression that the site is speaking on a personal level. It was said that it could be considered about how a responsive version of the website could be created so that it could be viewed on tablets and smart phones. It was suggested this could be done through an piece of Adobe software or SquareSpace. It was asked why the logo was black however this was one of the colours from the original swatch and allowed the logotype to create impact whilst not being too forceful. It was said that perhaps there were areas in the typography that could be tightened up for a little more consistency e.g. pay as guest button.

Sunday, 19 November 2017

OUGD504 - Studio Brief 2 - Prototyping with Adobe XD

Creating a Prototype of the website

Adobe XD allows a user to interact with elements of the design without the need for any coding which makes it a useful way of mocking up a design to get a better understanding of how it would work together. Interactions within XD are limited to clicking on different elements which effectively simulates how a website would be used anyway, with the use of a mouse. The software is purely for mock up purposes only and is suitable for designers who want to visualise how the design would come together. Within industry once the design had been completed this would then be passed on to a developer who would code and create a full functioning website suitable for the web.

Before being able to use Adobe XD all the layouts for the design had to be made in Illustrator first. To create a realistic flow between elements every time something would be clicked a new screen had to be created to mimic the actions that someone would take within the website.

Many of the stills were very similar and had very little difference between them e.g. a pop up being shown then a box being ticked in the pop up.

To help with this the duplicate artboard function on Illustrator enabled whole art boards to be repeated easily, this saved lots of time and meant that each screen didn't have to be completely built everytime, which wouldn't have been practical for 40 - 50 stills. Also this allowed for the consistent placement of elements within each still which would mean when played everything would stay the same aside from the bit that was supposed to be changing.

Within Illustrator adding elements of the web e.g. the task bar and tabs at the top of the screen, made the design more effective as a mock up the use of the duplicate button aided this.

However the process of creating all the still frames in Illustrator was a lengthy process for a short prototype of different elements. Once completed these were exported as jpegs so that they could be placed onto artboards within XD.

Having never used XD before the tutorial enabled me to learn some of the basic skills in order to use the software. However because still jpeg images were being used as frames this meant the whole thing did not have to be created within XD. Using Illustrator first, meant that the design could be created fully before being moved across, XD has much more limited design tools that are more suited to placement of images and text rather than designing. The main thing learnt that was useful with the use of stills was making connections between elements to allow interactivity from the click of one area which would then take you on to the next screen. This involves dragging a link from an element that would be engaged with then connecting it with the relevant screen. The use of the design section, which allows elements to be created and the prototype section, which allows links to be made between screens, is simply defined and allows for intuitive swapping between the two modes.

Within XD it was found that placing all the images into the software in the correct order made it easier to create the connections between the different elements. In some parts a frame was missed out so had to be added to the end of the row. Because of this it meant that the links had to stretch over other frames making it more complicated to see which bits were connected with what.

Because the design was made using purely still jpeg images this mean that some elements within the software had to be created for connections to be made between. To do this boxes were drawn around the areas that would be clicked, the fill and outline on these was turned to clear which meant they would not be visible in the final design.

From these boxes connections could then be made to the screen that it would lead to in the prototype section.

To simulate the almost instant switch between screens when using a website all the transition settings were set to none so that when clicked it went straight to the next frame. This also helped create quite realistic drop down boxes which seemed almost reactive with the instant transitions.

XD allows the prototype to be previewed throughout the creation process meaning that it is easy to see whether things are connected as wanted and allows for adjustment of elements during the design process.

The use of Adobe XD allows for an effective and competent prototype of a design with the need for limited skills. Some elements however cannot be created with the use of this software such as simulating predictive text. If in the design there is a search bar or somewhere to type then it is not possible to make it look like each letter is being entered into the search because you would have to click the screen each time for a new letter to appear. The software allows a user to interact with the design however does not have the function on windows to allow the process of using the design to be filmed.

It was found on an Adobe Forum that this function was not currently available but would be in the future.

In order to do this the record function (Windows G) has to be used from the X Box app. This allows a video of the design being used, to be captured and shown to people. However XD would not allow the preview to go to full screen which meant that there was an extra bar at the top and black space around the design slightly detracting from the idea of creating a real life simulation.

OUGD504 - Studio Brief 2 - Development

Development of design

Although feedback said that the materials on the background could work effectively it was decided to stay with flat off white colour for the background as this did not conflict with the material imagery. Also it was felt that the use of the texture fits more with the concept of reflecting the materials rather than this concept of viewing the materials as byproducts, scraps and offcuts from industry or other processes, which will be designed in a geometric way.

When the pop ups for the different aspects of the site are activated then the background main page will be dimmed to allow the pop up to stand out. Using a dark background does not allow the pop up to stand out, however lowering the opacity on a block of colour the same as the background colour creates contrast and ties in with the existing background.

It was considered that the current layout for the listings did not make it easy to place all the text within the triangular space. Instead it was thought that there could be an added strip at the bottom of the listing to allow for easier placement of listing titles, with the triangular area being used for the price instead. Rather than having black text it was thought that using grey would make it look more subtle however the white backgrounds were still quite bold. The triangle now looked too large in comparison to the small amount of text being used within it, so the shape was altered to be smaller creating the effect that a small piece has been discarded reflecting the definition of scrap 'cuttings, fragments, or other small pieces of raw material, removed, cut away, flaked off, etc, in the process of making or manufacturing the item'. Rather than using a white background for the listings which makes the whole listing stand out too much it was decided that the listing colour would be the same as background to allow the imagery to be the emphasis.

To create the homepage the 'find your...' banner was tested out in green to reflect the environmental aspect of the website however this did not fit with the rest of the colour scheme.

Instead making the box white created contrast allowing it to stand out in the background and create a sense of airiness to the design. When using Europa regular it was found that the 'f' and 'i' would form a ligature so the kerning was adjusted between these letters to seperate them. Also the rounded corners of the banner did not fit with the angular geometric nature of the rest of the design so this was made into a rectangle.

The buttons used for scrolling through listings on the homepage were adapted from rectagles to have cut of angles better reflecting the offcut element in other aspects of the design. Alligning the subheadings with the rest of the design created balance within the design.

It was considered adapting the banner to have an offcut element also, because of the amount of empty space within the banner.

The 'find your...' section would change between various different words to reflect the use of the site and would include things like:

find your inspiration

find your project

find your technique

find your material

find your hobby

find your passion

find your item

find your idea

Cutting the design at the top looked more natural than at the bottom.

The listings were further adapted to create larger imagery through the use of opaque coloured strips which allowed text to be read on top and allowed imagery to show through. This made the text more subtle allowing the imagery to be the main focus. Also rather than repeating the same shape in the same way, the listing would cut off a different corner in each column. This reflects the idea of varying scraps despite being the same shape. The less repetitive layout adds a playful and unique feel to the structured format reflecting the idea of creativity and play with materials.

To allow users to better understand that they can search not only for materials but techniques and products made with materials this was added to the search bar as a prompt for the user, allowing them to make best use out of the search function. It was considered that a search button would also be needed within the bar. Originally this was written to mimic how all the other buttons use text rater than icons. This it was thought allowed each aspect to be clearly and easily understood. However when written it seemed to jar with the glass header in the material bar below.

A grey box was added to create definition and to make it into more of a button feature.

It was decided however that the use of text was too jarring so a magnifying search icon was used instead. this was angled slightly to mimic the angle of the cut search bar making it flow more with the shape around it.

Changing the colour of the text within the search bar to a lighter grey made the text more subtle and less of a feature.

The pop ups were all made grey to allow them to contrast the most with the off white background. This also meant that elements and type within the popups were made white to contrast the most with the colour defining each of the elements and allowing the text to be legible.

Whilst building the rest of the popups it was considered that submit and checkout buttons would be needed to enter the information added to the pop up. These were created with white boxes around them to make a feature of them making it clear to the user that they needed to be engaged with.

Drop down boxes were made using the off white colour used for the background to create distinction between the main box, drop down area and background content.

Writing out the predictive features it was considered that in similar sites the search term would be lighter than the rest of the phrase which is usually bold.

With this in mind, when creating the drop down for the prototype bold type was used for the rest of the phrase outside of the searched term.

When testing the grey on the main search bar predictive drop down, it was found that this blended in with the background colour too much.

Using white created more contrast however did not create distinction between the original search bar shape and the extra drop down.

Adding a light grey outline around the shape defined the drop down from both the original search bar and similar coloured background content.

When creating the rest of the popups all of the designs used the same offcut shape, the background for this was made white in order to define the exit button on the faded out background of the main screens.

The off white colour was used as a way of defining areas in which imagery could be added e.g. uploading images or spaces for more favourites etc. It was also used as a background colour to imagery, making the content stand out.