Really useful site for exploring and understanding what the new iOS10 is capable of which can help inform my future concepts:
There are an array of opportunities that Apple have provided from their carefully considered interface. This website has a huge amount of detailed information about each aspect of Apples new interface. As Apple is the leading mobile and computer resource, this information will be essential for creating an app that takes advantage of all interactive features.
Shows how considered each and every element of the user experience is. I can refer back to this source when developing my concept.
Website Research
Studio Laucke Siebein is a design studio based in Amsterdam and Berlin. Dirk Laucke and Johanna Siebein specialise in creative strategies, dynamic identities, book- and web design for cultural as well as commercial clients. They combine a strategic approach with high-quality design within the scope of different media.
The website's minimalist layout draws the audiences attention to the content due to the large amount of white space. This emphasises the importance of white space as it makes the website easy to browse through.
All attention is focused on the name of the studio once the site is opened, immediately informing the audience on the branding of the studio. During Spiekermann's Typomaniac talk in Berlin, he talked about how importance of typography for a website/app because it reflects the overall branding. This will need to be considered for the purpose of the website and client. The contemporary and minimalist layout is appropriate for SLS because it is a creative design agency.
Opening screen:
Helvetica is easily legible on screen and connotes organisation. The typeface was adopted by the Swiss design movement which focused on clear organisation of typography and layout - This is reflected through the design studios website and shows how appropriate the choice of typeface is.
The hint of content at the bottom of the screen entices the user to scroll down to reveal it, if it wasn't there the user may get lost/frustrated. However that could be appropriate for the agencies target audience as it would force the user to explore the web page to find the content, connoting the studios creative exploration.
As the user scrolls down the title is removed from the top of the screen and replaced with web links allowing the user to easily navigate to specific sections of SLS' practice. This menu is always locked to the top of the screen so it is always accessible.
Noticed the site doesn't have a tab icon which makes it hard to recognise when a range of tabs are open.
SLS should consider creating a simple tab icon so that the site can be easily identified. This could simply be SLS in Helvetica to support the minimalist style and typeface used for the branding.
Navigation menu:
Splitting the sections into categories aids the user by making everything so clear and accessible. Underlining the selected category confirms the page for the user. The locked navigation menu is always visible and overlaps with the content when scrolling through the projects. The text is still legible due to the white background, however when it is layered over a dark image it can be hard to see. To overcome this the user has to move the page up or down. For me, this doesn't intrude on the user experience as layering the menu allows more of the content to fill the page, allowing me to see their work in more detail, making it an engaging experience.
The projects are organised in three columns, taking advantage of computers wide screen by making the images large and visually engaging. Focusing the users attention on the images by making them large gives a taster of the project, enticing the user to click on it to reveal more.
Clicking the image link reveals a pop up box containing further info:
Most sites will direct you to a separate page, however this can be disorientating as it completely removes the audience from the context. SLS continue their layering method which is extremely user friendly because once the user scrolls all the way through the content the box disapears at the top of the screen, placing them back onto the home page. This makes the browsing process really fluid which encourages the user to explore all of the content without long loading screens.
iPhone Screen:
Transferred a lot of the wireframes from the website, however it is simplified to adapt to the smaller screen. Instead of three columns only two are used so the images can still be large and engaging:
Very limited typography is used so the content isn't crowded. Again, the menu is layered over the content:
Simply tapping the image opens a pop with further information:
Swiping down returns the user to the home page or they can press the X icon.
The + icon takes advantage of the limited space instead of using type, revealing the categories:
Simply tapping the X removes the drop down box. Using icons instead of words creates more room on the narrow screen. SLS' website is an example of a well considered user interface that creates a positive and engaging user experience. The continuous flow of visual information engages the audience which is appropriate for a design studio because it makes the user explore past work.
Overall, SLS' website communicates their brand and contemporary design successfully because the website is very simple and easy to use due to the minimal layout. I really like how the site doesn't remove you from the context of the page with the use of pop up boxes. Physical actions with the users thumb and screen such as swiping make the navigation process satisfying.
Key points to take forward
- Minimal layout makes it easier to navigate
- Pop up boxes don't remove the audience from main page and make it easy to return
- Transferrable layout over different screen sizes - Be consistent
- Overlapping the menu bar allows more space for images - More engaging
- Typography cohesive with the brand
- Icons instead of type - Save room and cohesive with the identity of the site.
- Suitable for its target audience - Designers/Potential Clients
http://www.mynameis.fr/en#les-garcons-sauvages/3
When the page is opened it immediately plays a Gif.
'My name is ...........' - Different names flash up stimulating the audience with the small type and large black ground.
After approx 4 seconds the menu drops down from the top of the screen. The short and sweet transformation doesn't confuse or bore the audience, creating positive emotions due to the slick movements, modernist aesthetics.
To help the audience identify projects from specific disciplines, the site highlights specific projects making the navigation of the site more efficient and also engaging:
Scrolling down reveals previous projects:
The title and menu are all locked to the top of the screen and overlap the content in a similar way to Studio Laucke Siebien.
Projects can be explored using the arrow which automatically appears instead of the mouse. Instead of removing the user from the page the horizontal navigation allows the user to effortlessly view the brief in more detail:
This can be used to organise a lot of information and improves the user experience.
Icons:
? - About & Contact
The question mark isn't prominent on screen due to the small size and large amount of negative space that surrounds it which can be problematic for users who are specifically visiting the site in order to get contact information. However, focusing the audiences attention on their work is appropriate as icons and headings aren't obtrusive to the content. The question mark can easily be transferred onto small smart phone screens, making the interface consistent across platforms.
The site provides slick and concise movements in order to aid the users experience. If the user stops scrolling between projects, the site automatically moves the project so that is central on screen and also lines up with 'My name is...':
'Screen saver' engages the audience if they haven't been active on the site. Simply clicking the screen will bring you back to the page you were on, this doesn't frustrate or impede on the audience:
This playful concept creates a positive user experience which and brings the audiences attention back to the website.
Les Garcons Sauvages
http://lesgarconssauvages.com/
Paul Gacon developed 'My name is' website for Les Garcons Sauvages in 2016
Layering the title pages makes them easily accessible, however the further the user scrolls down, the more titles are stacked over each other.
The interface is extremely immersive due to the type layering and obtruding on the images. Although the type is intrusive, it is appropriate for this website because their target audience will very much be specialised for designers in order to showcase their design capabilities to clients. This is an example of how organisation of documents/projects on screen can be organised in a continuous flow of information which makes it really engaging and visually stimulating.
Easy to get lost on the site as the layered type and images can make the experience problematic.
The title of the project that is being viewed is arranged at the front of the screen, making it clearer for the audience to establish the context of the images.
During this research, I have identified a range of immersive and interactive features that design for screen is capable of. These immersive and forward thinking interfaces are appropriate for the client and target audience. Using these interactive features for corporate identities, or sites that will be visited by an older generation, they may struggle to understand the interface which can become frustrating. The information that design studios put on their website is predominantly visual, therefor a lack of typography is appropriate. Layering image and typography as the user scrolls will can become very problematic if a lot of typography needs to be featured on the website.
No comments:
Post a Comment