Showing posts with label Brief 03 - SAC Ampleforth (Website). Show all posts
Showing posts with label Brief 03 - SAC Ampleforth (Website). Show all posts

OUGD603: Extended Practice Overview

So you're able to see what's what, I've made this post to quick link you to the work, easily.

All briefs attempted with links to post:

*(Projects stricken out have been cancelled for various reasons)

OUGD603: Brief 03 - SAC Ampleforth II // Tablet Screen Wireframes

As this website is being designed to work responsively, I'm designing how the home page will look on an tablet screen. How the content will adjust to fit, responding to the dimensions of the page. The design of the tablet will be used to bridge the up-scaling gap between the mobile and desktop versions of the website. 


Similar to the mobile version, the portrait view of the web page will adjust so the content fits the page in the best possible manner. 

Horizontal content areas, taking the full width of the screen will be used which will allow for the best area of 'click ability'. Rather than a quarter of the page vertically, you may tap the wrong area. This will also reduce the length of the page, so there's no endless, thin and long scrolling parallax pages. 


Similar to the desktop version, the landscape tablet uses vertical columns more predominantly, in comparison to the portrait version of the tablet screen. Taking advantage of the width of the screen. Displaying the content more sporadically, rather than being stacked. 

OUGD603: Brief 3 - SAC Ampleforth II // Mobile Wireframes

For SAC Ampleforth's website, I pulled back my progress a few stages to design the mobile version of the website. As to order the content and see how it would fit on the smaller screen and then scale it up to the full version – as I was taught at Work in the Web. 


The landing screen of the home page, with the full screen image, with the SAC logo and the hamburger which takes the form of the menu, to allow quick navigation of the website. 


Scrolling down, the vertically aligned elements, the large clickable class buttons have been rearranged to fit horizontally, making best use of the space on the screen. I would imagine the layout of this element would be based on the width and height of the screen.

If the height is greater than the width – horizontally aligned buttons.

If the width is greater than the height, vertically aligned buttons. 


Moving down again to the membership section, with the text box overlaying the image, taking advantage of the vertical space. Perhaps in a parallax format to add an extra dynamic to the page. Although, this could ruin the user experience to due to the lag... 


Similarly, the swimming pool section of the web page also collapses into a vertical format, stacking the content above the image. Which makes best us of the space, rather than cramming it all horizontally. 

It'll certainly be fun to animate... 

OUGD603: Brief 02/03/09 & Design Publication // Designing for UX critical research 01

I understand this post is practically an essay, so I've bolded all the important works and phrases.

In this post, there won't be many images to be seen. It's mainly documenting research undertaken regarding designing for user experience, or UX for short. Although one of the briefs tagged in this post has been completed, OAC Photography. I think this post will bear relevance with the brief from an evaluative standpoint, and for the briefs which are in motions, the website for Coffee Culture, SAC Ampleforth and my design publication, which will take the form of a digital publication, this research will be implemented into the design process. 

It's mailing links and paraphrasing of blog posts, but it's important information which will change the way I design.


The first of which, titled 'One Magic Formula to Calculate UX? (click to see full article), is about the different elements of user experience, the things which impair and enhance our user experiences. To summarise; 

The first point of contact and engagement with a website relies on the digital loading speed. "If software is slow users become cranky, and if the speed is too slow they may abandon your product altogether." You need to consider the internet connection, the speed of which is out of our hands, the device the user is using, the server which the website is being hosted from and the code. Impairment or improper treatment to any of the above can hinder the loading speed, which will compromise the experience.

Secondly, the cognitive loading speed – I didn't know what it is either. "The cognitive load theory was first mentioned by G.A. Miller in the 1950s; he mentions in a paper that the working memory of humans seems to have an inherent limit. He states the working memory seems to be capable of only holding 7 (±2) chunks of knowledge at a time, being numbers, words or visual elements. The working memory of our brain works exactly the same as the working memory of computers. It processes all information inputted. Dr. Graham Cooper created this explanatory image in his 1998 research paper that makes it understandable:"


On the back of which, you must recognise that the interface complexity also plays a part in the experience of the user. Interfaces which are too difficult with too much information will overwhelm the users. Similarly to the digital experience. An abundance of content flooding the page will become too over powering for the user. "When a product has a complex interface, but the user has previous experience with this or similar products, the cognitive load can still be low. If there is a lot of previous experience with the product, the complexity might not even matter. This can result in  the fact that a product with a complex interface and experienced users can be more effective than redesigning a product to use a simple interface that sets all legacy user understanding back to zero."


The purpose of a website must also be taken into account. "A digital product must have a purpose to provide value. Without a purpose there will never be a user to experience the user experience at all." The website must benefit the user. "The most important thing for a user to use a particular piece of software is that they believe there is a benefit in using it. This can be acquiring information, social interaction, (digital) goods or just good old fun." A factor that can’t be ignored since we are dealing with human behavior here is status. Status can be a strong force that drives people to take action. If a product has the power to increase someone’s social status then it boosts the intrinsic motivation of your users.

Finally, the most important part of a website, the interaction. The aesthetics of a website are not as important – which is difficult to level with as a designer. However the do play a role in the experience of the website. It's a team effort with all of the other elements discussed. Last but not least is communication. By communication I mean everything from the copy used in your interface to the emails from customer support. The way you communicate with users should be human, kind and understanding, with a dash of humor. Every human being likes to be treated nicely, your product is your voice, so use it wisely and kindly.


OUGD603: Brief 3 - SAC Ampleforth // Primal Gym Study

Whilst at the gym the other day, I spoke to a couple of members and one of them mentioned Primal Gym, Leeds Dock – I gave it a google to see what it was like in terms of facilities, only to find a pretty tidy website. 


Greeted with a full width splash image – the responsive web design assuring the entire screen from edge to edge is filled. Using a well framed photography to bring the page to life. A power scroll button, in the form of a down arrow. 

The website takes the form of a micro site, a single page scrolling website. So the top navigation is compact and acts as a power scroll to the relevant content. 


The about section, really simple responsive type, nothing complex. All the images on the website are presented in a parallax format, which adds a new dynamic perspective to the website – adding motion!


Full width images dominating the page throughout. 


Colour coded classes – similar to how SAC's classes are depicted. 


Membership plans presented in an interesting format, paying particular attention the main factor, the price – and all the T+Cs in smaller REM below. 






OUGD603: Brief 03 - SAC Ampleforth (Website) // UX – Expanding Information

I would like to add an extra sense of depth to the website, add an element which is active, which moves utilising dynamic properties. 


Above, from Codyhouse is an animation to show the different ways if displaying and hiding information on a page. I feel this could be implemented into SAC Ampleforth's Class section. 

OUGD603: Brief 03 - SAC Ampleforth (Website) & Brief 09 Coffee Culture (Website) // UI Kit Research

As I've not done so in the past, I want to create UI Kit for this project.

UI Kits are files (usually PSDs) with a lot of useful components – User Interface Elements – for user interface design. They come with the possibility of a lot of color variations and they easily integrate with your own design since they actually are done for this propose. They can also include patterns, brushes and asl files, which make the integration process even easier, you can play with colors, create new components and just include them as smart objects in your own design If you want.

http://designmodo.com/ui-kit-use/ 

They would be beneficial on projects such as SAC Ampleforth and Coffee Culture, as there are many pages to be designed. Having buttons, sliders and switches ready made, which I can drag and implement into the web design. It's a really good tool to use to standardise the interface. An example of an UI Kit by Riki Tanone is pictured below. 


Riki Tanone's UI Kit above, which he distributed as a freebie on his dribble – has a consistent design style, which works well as a standardised set. Created for a blog, using similar colours, widths, heights, spacings and typefaces to create a set of UI elements which can be implemented into a web design project. 


 The EDGE UI Kit by Creativedash is another example of a UI Kit, containing a vast range of elements which cab be implemented into the web design project. 


An example of a more complex UI Kit, similar to identity guidelines is the UI Styleguide by Alex Sailer, part of Focus Lab. Displaying the colours, buttons, typefaces and icons which can be used in the web design process of his project. 



OUGD603: Brief 09 - Coffee Culture (Website) & Brief 03 - SAC Ampleforth Website & Design Publication // UX Research – Speed


At Google, we've gathered hard data to reinforce our intuition that "speed matters" on the Internet. Google runs experiments on the search results page to understand and improve the search experience. Recently, we conducted some experiments to determine how users react when web search takes longer. We've always viewed speed as a competitive advantage, so this research is important to understand the trade-off between speed and other features we might introduce. We wanted to share this information with the public because we hope it will give others greater insight into how important speed can be.
Speed as perceived by the end user is driven by multiple factors, including how fast results are returned and how long it takes a browser to display the content. Our experiments injected server-side delay to model one of these factors: extending the processing time before and during the time that the results are transmitted to the browser. In other words, we purposefully slowed the delivery of search results to our users to see how they might respond.
All other things being equal, more usage, as measured by number of searches, reflects more satisfied users. Our experiments demonstrate that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user of -0.2% to -0.6% (averaged over four or six weeks depending on the experiment). That's 0.2% to 0.6% fewer searches for changes under half a second!
Furthermore, users do fewer and fewer searches the longer they are exposed to the experiment. Users exposed to a 200 ms delay since the beginning of the experiment did 0.22% fewer searches during the first three weeks, but 0.36% fewer searches during the second three weeks. Similarly, users exposed to a 400 ms delay since the beginning of the experiment did 0.44% fewer searches during the first three weeks, but 0.76% fewer searches during the second three weeks. Even if the page returns to the faster state, users who saw the longer delay take time to return to their previous usage level. Users exposed to the 400 ms delay for six weeks did 0.21% fewer searches on average during the five week period after we stopped injecting the delay.
While these numbers may seem small, a daily impact of 0.5% is of real consequence at the scale of Google web search, or indeed at the scale of most Internet sites. Because the cost of slower performance increases over time and persists, we encourage site designers to think twice about adding a feature that hurts performance if the benefit of the feature is unproven. To learn more on how to improve the performance of your website visit code.google.com/speed. For more details on our experiments, download this PDF.

OUGD603: Brief 3 - SAC Ampleforth II // Template Design







OUGD603: Brief 3 - SAC Ampleforth II // Wireframes

I've begun to create the wireframes for the website, starting with the home page. Although, during Work in the Web, at Mixd, I was taught to design for the mobile first – however, I completely forgot about that until I begun to write this post. 



Based on my research, I sketched out a concept for the home page, including quick links to the main content on the website – the classes, the fitness suite and the pool. Scrolling down, you're able to view details on the membership scheme and the pool – at the bottom there is a contact form. Adopting the modern style of a long one page website, sort of. 

The navigation has been designed to be hidden with a hamburger menu – which opens up to reveal the secondary and thirdary pages of the website. 


The wireframes in the illustrator document, set up using a twelve column grid, two variants have been created. One with a closed navigation, and one with an open navigation. As the two look very different, in a client situation I would have to show them what both states look like. 

Above pictures the navigation in it's hidden state, compressed into the hamburger menu, which is often used to help minimise a page's content – which is useful, as the navigation will be over an image. Removing the navigation will allow the image to dominate the page, becoming the main feature. 


The exposed navigation, which features links to every visible page on the website – for quick navigation. The hamburger in the top right also transforms into a X, as an option to close the navigation. 


OUGD603: Revised Briefs

Based on the tutorial last week with Amber, I've changed and amended the briefs accordingly. There is now a total of nine briefs, rather than eight, as I've split up two briefs, for the sake of assessment. 
I've split up the SAC Ampleforth brief and the Coffee Culture briefs into two parts. The first part of which is the brand and identity design. Creating brand guidelines and proposing/creating collateral for the briefs and the second part is designing the website - as web design is a substantial brief within itself, especially for two medium sized businesses.
I've also added rough deadlines for the briefs. These will be subject to change, as I can't foresee how my time will be managed in 2015, as I will be doing D&AD and or YCN briefs along side. 
Subscribe to: Posts (Atom)
 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.