OUGD504 DFS FINAL CRIT

Today I had my final crit for my design for screen. I received both positive and negative feedback for my website, giving me a little bit more work to refine. The positive feedback was that my idea and concept was very well considered and didn't need any more improvement. They said it was a smart idea and something that would definitely be used in the real world. The only issue was they thought my layout was perhaps too narrow and didn't express enough peoples work within the webpage. It was mentioned that maybe my mindset was thinking more about designing for a phone screen instead of a desktop. This meant the layout did not quite match up with the screen dimensions. I should reconsider my layout and try making it look a bit more like its nice that. Apart from that the aesthetic was fine, the colours, typefaces and such were all ok.

I'm going to incorporate a filtering system within the site instead of just a search bar as some professionals might be looking for something more specific, instead of just a bunch of random students work. I need to cater to my audience and have more consideration for their needs. They might need a faster more clear UI. I'll also make sure that upon entering the site, the work isn't laid out in any time chronological order so that everyone gets a chance of being viewed. There will be a shuffle button to generate random students work. This is of course unless the user is after something more specific then they will use the search bar or filtering system.

OUGD504 RESPONDING TO FEEDBACK

I began responding to the feedback I received from my peer crit. The first and most important feature I had to add was a feature that aloud the user to understand they could click on a certain image and translate the fact it would take them somewhere separate. I managed to do this by using two techniques. One of them was to use a rollover button. This means when you hover over an image with the cursor it changes into a clicking vector, indicating that there is a link behind that click. The next feature was to have either something light up or the image to fade. This idea was given to me by my fellow peer, captain Alice. This idea came from the fact the website was meant to be quite approachable and not take itself too seriously whilst maintaining a certain professionalism about it. I animated a feature in Adobe AferEffects that made the image fade away slightly into the background colour and a small rationale would appear, teasing the audience to click on the link into the rest of the article/interview. I feel like this has given the site a bit more character as before it seemed a little bit two dimensional. 

A few other tiny features that would increase the UX were actually very impactful pieces of UI that I would have never initially considered. The first one was adding a small home button in the bottom right corner. I made it nice and small but not too small to not see, just small enough to not distract you throughout the entire experience. This would take you back to the home screen from where ever you were in the site, just incase you got lost in the depths instead of scrolling up manually. Another feature was having a slightly opaque scroll bar on the right hand side. This seems like a bit of a no brainer but I had previously forgotten to put it in. This indicates to the audience how far down the page they are and also the fact that scrolling is available as it was pointed out to me before, that it was slightly confusing being introduced with just a singular image and title and no other function.

A few final features I inputted were a search a bar, granting access to filter down what the audience was viewing. They could search for a specific institution or course title to try and find something specific to their taste instead of viewing everything the site had to offer. This is done very smoothly with a slight transition upwards to a search page with just type. I have also added a little progress bar within the interviews so you can see exactly how far you are through it and how long you have left. This is all done to achieve the maximum UX with a hassle free UI. Finally I added actual students work to the site instead of place holder images so it almost seems likes its a real site coming together with real headers, titles and students content.

OUGD504 DFS PEER REVIEW

After showcasing my website at its current stage to one of my peers, I managed to get some decent feedback from fresh eyes. This helped me decide what I'd need to change, what was good and how it could be improved. All of the issues are had were really small things that could have a massive effect on the general UX of the site. One detail that was picked up upon was the fact there was no indication of how far down the site you had travelled or even if you could travel anywhere at all. This could be resolved by fitting in a simple scroll bar on the side of the page giving a clear depiction of where you were on the page.

Given the fact the website would be really clean and simple to use, it would have to have some form of indication when something was able to click on. I didn't include this in my original idea but it was made clear to me in this peer crit that I'd have to have some indication of what to do or people would have no idea what they were doing. I could resolve this in a few different ways. One of them would be using 'roll-over buttons'. This is when your mouse hovers over a clickable object the mouse symbol changes into a clicking finger making it very clear of what was clickable and what was not. To reflect my tone of voice a bit better with this decision, I could consider the images fading and a brief rationale or part of the interview appearing to tease the audience to click on the image. Another option to consider is perhaps the text lights up when you hover over it, once again teasing the click.

Finally, to give more direction on the site it would require a search bar. If there was a specific students work or institution you wanted to look at you would be able to search this at the top. You could also search a course title for instance 'fashion', then meaning you could view all work by fashion students, filtering the site down to something more specific.

OUGD504 ADOBE XD PRODUCTION

By combining my chosen colour and typeface, my website began to take form as an actual working object. I used Adobe XD to begin putting each aspect of my site into working form. I used my desktop wireframe mockup to set placeholder text for the time being and I sourced imagery from Its Nice That also whilst it was still in its production phase. I'd obviously later use work from actual students because featuring Its Nice That work kind of defeats the purpose of the exercise. I made sure the type was a legible size where it was readable but wasn't too overwhelming in comparison to the image. The images attempt to fit the size of the wireframe mock up however some may seem more portrait due to that specific designers decision. They still roughly fit a similar size however with nothing too obviously out of place. Having a few images a slightly different shape or size adds to the playfulness and approachability of the site whilst maintaining a professional aesthetic at the same time with the layout and type setting. 

As you enter the site from the initial home page, you'll notice that the main hue becomes more opaque. This is to let you know you've entered the site and also having a lighter colour in the background highlights the work being viewed a lot more meaning you wont miss a thing. This helps each and every individual image stand out instead of being engulfed in a darker tone. You can navigate the site with great ease, transitioning from one students work to the other with a single click. It states the students name, area of study and a short rationale of the work being shown. If you click on the image it takes you to an interview with that student and more images of their work. After you have reached the bottom of that page it has a link to the students Instagram and other social networking sites. Then you'd go back to the main site with all the other students work and keep scrolling. I used XD to link all of these pages and images together to make sure that it would all transition smoothly and work like a real website.

OUGD504 DFS DEVELOPMENT

To further continue my website, I'd have to begin creating some form of identity for it and visual presence. I began with generating a name for the site. I thought it would be best to search up some of the key words that my site related too. These words were young, sharing and creative. I searched countlessly for a perfect word or term that would be referable and approachable by all. I came up with words such as partition, tenderfoot, colt and tyro but I thought these were too confusing and made little sense. I finally landed on the phrase 'greenhorn'. This simply translates as 'young' but comes from terms used by farmers to describe young cattle. I feel like this would be a good name for my site as it is not incredibly clear what this means but it would definitely spark some curiosity to the site. Obviously the site was all about spreading young creatives work so I believe that this term is great for the site.

Now I'd have to carefully think about the colours being used for my site. As it was in partnership with the HudsonBec group, I'd have to have a slight resemblance in colour to the other sites within it.  Those other sites would use bold colours within the introduction of the sites and then softer tones when within, so you aren't distracted from the content within. To begin, I researched what colours are related with creativity and sharing. The outcome was green tones. Given the fact I wanted the site to be the opposite of creative reporting sites out there now, I inverted that colour and came out with blue and purple hues. I then played with several different colours to try and find the perfect one I wanted to use to reflect my site. Here are a few different tones I managed to source.

When deciding a typeface to use upon the introduction page of the website, I took into mind that the other sites under the HudsonBec group had a playful and safe tone of voice whilst maintaining a professional aesthetic. They all used large san serif type faces without sharp edges making it quite easy on the eye and not taking itself too seriously. I sourced a typeface from google fonts called 'Raleway' which matched my specific boundaries. Taking one of the colours and placing the title in the middle of the page basically created my home page for the site. Once again I took the idea of it being inverted as a platform and used just the outline of the type instead of the fill. This would possibly be the home page for my site.

OUGD504 WIREFRAME DESKTOP DEVELOPMENT

When receiving feedback in a crit I noticed the biggest issue I was having with the wireframes was that it looked like an app, not a website. This was because people were getting confused due to my mock up being in the format of a phone instead of a desktop. I was asked questions about the downloading of it and if it was worth it but they didn't realise it wasn't an app. To make this more clear I'd have to re-create the design in the form of a desktop computer screen. This would make it seem more functional as a website in these early stages of its design.

Here are my wireframes translated into the format of a desktop for more clarity of how the final product may look. It's really similar to the original mock up but obviously I had to account for a few things that would be different given the fact the screen would be larger and horizontal. On the desktop version, the image would not cover the entire screen as this would leave no space for the text to sit. Leaving a slight border around the images gives the audience a clearer screen to view without any unwanted furniture blocking what is in the spotlight. Also, having the main image of the students work at the beginning larger then the ones within the article helps define what page you're on within the site, whether it is inside an article or browsing a variety of students work. I finally decreased the size of the type on the screen making it more legible on the desktop format and not overwhelming the audience with visual information. 

OUGD504 WIREFRAME CRIT

Today I had a crit where I showed some of my developed wireframes in a timeline of how the website would travel when the user was using it. This wireframe demonstrates the user travelling through the UI and what would be shown in each section. You'd begin with the home screen then continuously scroll down through full images of different students work with their name and a short rationale. When you click on the students work you want to view, you get taken to a new page featuring more images of the work and a short feature or interview with that student, with information about the project or work being displayed. It is all laid out in a really simple layout with clear instructions. 

My feedback was mainly positive, however people noticed that it seemed mote app like given the fact I wanted it to be a website. The way I'd solve this is by creating my mock ups and final outcomes on a desktop format. I was also not clear on how students work would be submitted to the site. I already have the idea for this written up though but it needs to be clearer on the website. One other small thing I was made aware of that my main page typeface was really nice and approachable meaning I could use if for the final produce. I was told be my peers that my aesthetic was really good though and other then these issues I should crack on and begin thinking of other design decisions. 

OUGD504 DESIGN PRODUCTION EVALUATION

During this brief a have learnt and gained a great amount of transferable skills that I shall further continue to use in my studies. I learnt so much about production and the amount of time and care goes into really small decisions that wouldn't normally seem that important. I also got a chance to develop my book binding skills and in fact learn a few new ones as well.

Im really interested in editorial related to physical print and self publishing so learning more about book making was a great opportunity to express this. I took every design decision really seriously like how the creep would effect the print of the book given the fact I was using such thick paper stock. I tested my embossing and printing on a vast amount of paper stock to make sure I could achieve the most professional finish to the publication. I also tested several binding methods to find out which one would suit my concept the best. All of these things are things I wouldn't have initially considered if I had previously done this project however, this brief has taught me all about these important production decisions.

I have also learnt about how to make a book that would be easily mass produced if that was the case and also if it was a more limit edition book, how it would differ. If I made twenty hand crafted books, that would create a more limited edition and valuable book as I could experiment with a lot more different production methods, such as binding, embossing, letterpress and many more. When mass producing the book, it would have to be a far simpler physical design meaning the machines creating them would have no difficulty or fault. Finally I discovered about how I'd go by pricing such a thing. I was told be Ben from Village Books that however much your book costs to make you triple that price and sell it at that.

These are all great transferable skills and will most certainly aid me in future projects and endeavours. It has also encouraged me to create books outside of university and for personal pleasure.

OUGD504 DFS FURTHER RESEARCH

I wanted to have a more specific concept to the relation between my website and Its Nice That as I thought that is might be too small of a feature to just be in partnership with them. I found that trolling through the internet wasn't helping me or giving me a clear answer. I contacted and spoke with Charlie Shepard from Anyways to discover the link between Its Nice That and Anyways. He clarified a lot of things for me. He showed me that those two websites along with two others, Lecture In Progress and If You Could Jobs are all under the wing of The HudsonBec Group who created all of these sites. This is why these websites all follow a similar tone of voice, despite having quite different structures within their design.

Reviewing these four sites has given me a much clearer idea of where my website should be placed in the world of the internet. My site would be announced as the fifth site to be released through The HudsonBec Group. This will give it some structure to sit upon instead of being a lone site floating in the abyss of the web. It will also give me a slight start to the idea of what kind of aesthetic to base my site upon. 

OUGD504 WIREFRAMES/IDEA DEVELOPMENT

Today I began creating some wire frames and mock ups for my website. I wanted the UX to be really involving and also make sure that every detail of the site was processed through the audiences mind, so they haven't missed out on anything that the site was featuring. This means specifically all the work that was in the site and also so that no ones is singled out or perhaps favoured on the site. A few mock ups I have sketched out here are all attempts to involve mainly a lot of imagery and a small piece of text the compliment it. Once you click on this image it takes you into further depth of that persons work, featuring an interview about that work also including details about the young designers and other links to their social media.

My idea has developed since the earlier stages and I have a clearer vision of what I want it to possible look like aesthetically. Given the fact it would be in partnership with Its Nice That, it would have to follow a slightly similar aesthetic. The website, Anyways is also in partnership with Its Nice That and both us the same tone of voice, being loud, friendly but also quite professional. The UI is completely different however with a different layout attached to this platform. I decided I would follow this tone of voice and make my own layout of course loosely based of the Type Setting website. I would do this by using playful colours and gentle typefaces.

This beige tone and typeface Raleway, have been used as examples in this phase. During a talk with web designer Stephanie Bell she stated that you should always begin with the design of the phone version of the site first then size up late for the desktop. This is a lot easier then sizing down the other way around. Students would send in their work from university including all creative courses and would get short listed down into a handful. The ones selected would then receive an email asking them about their work to the website would have a short interview and rationale of the students work. A link to the students Instagram and other relevant media links would be included with contact details for professional interest.

OUGD504 BRIEF CRIT

Today I explained my ideas to my peers in a crit for my design fro screen idea. My idea was to simply create a website, like Its Nice That, but inverted just for students to expose their work featuring articles about briefs in the universities and edits about young creatives. My main query was wether it should be a stand alone website or in partnership with Its Nice That. The feedback I got was for it to definitely be in partnership with Its Nice That but have it as a much more simpler form instead of a fully fledged website. I'd have students send work into me and I'd shortlist it to the ones I found most interesting then seek their opinion out followed with and interview and possible more work to feature on the site. I would have the website follow a similar form to the Type Setting website who receive photographs of type around Leeds and post them on their website with the photographers twitter linked. Using this as a base will be my starting point.

OUGD504 ADAM GRIFFITHS TALK/WORKSHOP

Today we had a talk from Adam Griffiths, the creative director of the transient space exhibition I previously visited in Manchester. My initial thoughts of that exhibition were rather negative due to the exhibition space being in the reception of a university. However, once he explained to us that was part of it I grasped a better understanding of it and now I actually quite like it. He explained how to exhibition space was important because the images moved so quickly and you only get a quick snapshot of wha you're looking at so people passing by will only get a small glimpse and most likely see something different every time. This would make them question their conscience also given the fact they aren't there to stare at an exhibition.

The workshop was the beginnings of a new version of the transient space exhibition. We were to create a moving image that reflected the word 'disruption' in some way. He would then compile the whole classes animations into one continuous one, just like his previous transient space project. I began creating an animation in after effects however after a few hours of work it crashed and I lost the whole thing which I guess is disruption in its self. I then had a only a few minutes to but a small animation together which I guess has been caused due to disruption. The animation simply effects your eye sight and makes it really tricky to be able to read, disrupting your vision. This is a great exercise to aid my skills in this project, design for screen.

OUGD504 DESIGN FOR SCREEN BRIEF

Brief title/working title

Giving young creatives a chance to be exposed on a professional level

Short description of "design for screen" (purpose)

A website that contains interviews and features of up and coming young designers within the nation, studying creative courses at university. This will advertise the work and briefs being complete by creative students nationally and place them on a professional level, giving them a chance to be in the spotlight.

Audience (including reason)

Creative professionals currently working in the industry. They can monitor the work that is going on in the universities and see what kind of work is being developed by young creatives. View potential employees work on a more professional platform to say Instagram. Have a better understanding of the skills of creatives at university.

References/competition (3 titles)

Its Nice That
Linkdin
Behance

Tone of voice

Clear
Loud
Useful
Friendly
Approachable
Professional

Format/production consideration

Must come across as quite professional to give value to the students work and ease them into the creative world. Contain professional standard interviews, articles, edits etc.

OUGD504 FINAL PRODUCTION

After reviewing my feedback from the final crit and also taking in account the problems I had with my last mock up, I carefully produced my final publication.

Print:
I began with printing the images on my chosen paper stock. I encountered a small issue with the print not being the highest quality possible. This could have been for one of two reasons, the paper stock was uncoated causing the ink to seep into the paper or that my images hadn't been edited to the correct image size of 300dpi. After a lot of trial an error I discovered it was in fact the image size. Having a low image size effected the quality of the print massively, printing darker tones and also having a slight pixelated effect. I managed to mass edit the photos in a batch to get them all to the correct quality, ready for print. When Printing I added crop marks for the obvious reason to know where to cut. Finally, I checked a box in the print section which stated the images would be effected by 'optimised sampling'. I changed this to 'send all data' making the image print every single detail to its full potential achieving full quality.

Creep:
I managed to the creep of my publication to precisely 7mm. This was especially important on my book because the stock was a grand 140gsm, leaving behind a really obvious creep setting images incredibly off on each page turn. Once again, when printing I simply imputed my measurement into the 'creep' section of the drop down box. This printed each page slightly closer to the spine upon each turn, meaning that when I cut the creep off the pages all the print within would line up perfectly page by page. This worked exactly as I wanted it too and now the print is aligned perfectly with each other on every page.

Materials:
I wanted my book to be made of as little materials as possible. This became a struggle when I was trying to weigh the book down. I ended using a thick 140gsm violet white paper stock which was the perfect weight when complied together. This meant I had stuck with a single material when attempting to get the weight aspect of my book complete. This paper was really resourceful in this region. For the front cover, I used a slightly thinner paper stock so that when the central insert slid through the pages it wouldn't get jammed due to thickness. I chose the colour black to fit in with the rest of the theme, giving it connotations of death and also matching the black and white images within. However, it was still a rather thick stock adding extra weight to the publication. This means I managed to stick to using only one material throughout the production.  

 Binding:
Returning to the point of using as little materials as possible, this has to also be reflected in the binding. Using thread or glue to bind would break the rule of using less materials so I used a butterfly bind to bind the book using nothing but the cover. This is done by having the cover as a whole sheet of stock with a small insert folded in the middle which travels through all of the pages directly through the middle. Then the pages are held together with an insert in through the that tip in cover. This has helped me create the entire book using only one material being the paper stock. This was also really convenient as it gave me a perfect location to place the quote I sourced. It was too jarring to have run through the book or just at the back. Having it hidden the middle doesn't effect the experience with the book at all.

Debossing:
Debossing the cover was based upon the literal reason that gravestones have been physically chiseled into, denting the stone with simple tools. Having sourced type after trial and error I ended up using the closest type available to the average amount of type found at the cemeteries I visited. Embossing the title 'In loving memory of' on the front reflects the design and ethics of the headstones complete the aesthetic resembling stone masonry.