A branding Identity by Craig Hausman
Research
What Currently Exists
thisiscentralstation.com
This is a network for ‘maker’s of things’; creative individuals. A user navigates through the website, browsing content, portfolios in film/art/photography etc. The emphasis here is on sharing, a user is encouraged to upload their work and converse with their peers. Ultimately, the people at Central Station want to broaden the engagement within the contemporary arts.
Aesthetic + User Experience
The structure draws in the user - content is placed toward the left; the right is kept for space and air. Typography is simple, early computer like - the website does not take itself too seriously, you would join this just to be cool. It targets a creative community well in this manner, by appearing conceptual and thoughtful. A basic tricolour scheme acts to provide hierarchy to information, yellow framing notable content.
likemind.us
A worldwide community, users organise and arrange meet-up’s of ‘likeminded’ and creative individuals. The overall concept is to escape the starched suited atmosphere and embrace a more laid-back, coffee stained jersey conversation with people who are ‘like minds’
Aesthetic + User Experience
The website is simple, user content floats to the right, with the left providing info on what the website is for. Information is presented in a simplistic form, abbreviated city names point to the location, with a where and when and hosts. The two-tonal colour scheme allows attention to be firmly on the event with headings in a dark grey and user info in a light grey. Simple and very effective.
Design Thinking
Concept Generation
Concept 1 - Network
I began looking at Nuance as being a network, creating lines within the letters so symbolise this. Then this progressed to geometry, the multifaceted and tonal aesthetic to represent the different users and areas within contemporary art. Colour began to interest me, a way of symbolising everyone and everything; the appeal of this website is vast since it targets creative individuals.
Concept 2 - Experimental
Nuance
Concept 3 - Prism
This concept looked at the role Nuance would play, where the user acts like a beam of light on a prism and the brand acts like the refracted rainbow - opening up opportunities and possibilities. This visually makes sense and sounds like an effective solution, however, proves difficult to conceive aesthetically. I began to simplify the visual elements to their base qualities, and arrived at variations that moved too far away from the overall concept.
Concept 5 - Diversity
Drawing upon the wide range of creative arts, this logo with its many forms and colours represents this diversity, of creative talent. The aesthetic creates a dynamic and energetic tone, a place where many forms can come together and in unison create a thoroughly creative and useful site, promoting a better representation of the arts within the Edinburgh, Glasgow and Dundee and in the future, Scotland.
NAUNCE
The paper air plane echoes getting ideas across; the klaxon for communication and the handshake for collaboration. It was thought the variations could work well across a range of platforms to emulate a diverse brand. The colour scheme symbolises the experimental of user interaction, uploads and collaborations. ‘Letting Your Ideas Fly’, the tag line to convey the overall message contrasts well the graphic elements and could be rendered in different colours with different messages with each image.
Concept 5 - Imagination
The paper air plane graphic portrays the brand in an innocent and childlike manner, to let your imagination free and create but perhaps it lacked that edge; not suited to its target audience. Various experiments were developed upon with this identity, including reversals to generate an edgier aesthetic.
Design Thinking - Identity Guidelines Alternative Logo
Logo
Pattern
Graphical Elements
Colour Palette
f6841f
a2570b
005b7f
004563
aba000 645e00
b11116 680000
Pattern
006f3b
003b16
ed145a
Typography
Tag Line Arrangement
Logo
Neometric abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Tag-line
nEOU only CAPS ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
790026
Tone (Keywords)
diversity energy creative colourful dimensional dynamic
bold together harmony everyone inclusive vibrant
Design Thinking The App Icon
The icon features the colours used in the logo with a radial blur in order to centre the graphic and make use of this golden ratio which can be seen through the colours, echoing experimentation. The colours and shape represent the diversity, creative energy and dynamism of the platform and it’s users. A ripple effect of colour that begin in the ‘n’, symbolises Nuance as being at the centre of this and presenter of content.
Apple App Icon
1024 Retina App Icon for App Store
Iphone App Icon
Earlier iOS6 versions
Ipad App Icon
Earlier iOS6 versions
Android App Icon
App Store Wish List
Apple App Store
Home Screen
Web Page Icon
96x96 xhdpi
The square logo will act as the graphic and app for web pages and mobile software other than for Apple and Android devices. The square icon will also feature as the icon at the top of the active browser next to the page name. This will assist in tieing together the visual identity for Nuance
72x72 hdpi 48x48 mdpi Android App Icon
Context in App Store and Home Screen
Model
512 App Icon for App Store
Nuance
Android Home Screen
Design Thinking Navigation Structure and Placement It was essential that the aesthetic did not look corporate. This was managed with employing the design guidelines. The Nuance typeface is used in the navigation menu reflecting a sense of creative edge and experimentation whilst creating a fluid identity. The two tone colours used within each letter reflect the colours used within the navigation bar drop down menu’s - this fights off any feel or look of ‘corporate’ and instead gives an energetic and dynamic tone, symbolising the range of creative talent the site will host. The Navigation bar will span across the entirety of the screen width, and will give the user full access to the working of the site without sidebars of footers, this will create an awareness of where information can be located in order to use the site. Below is how this may look on different platforms.
Desktop Navigation
iPad Navigation
iPhone Navigation
Desktop Navigation Menu
New - The default screen showcasing what is new and popular in Dundee, Glasgow & Edinburgh Work - This is what is featured, portfolios only or ongoing projects and collaborations. Events - This will be broken down by city though 3 options, Today, This Week and Coming Soon About - The purpose of the Nuance website Search - The option to search content
The drop-down options are displayed here and operate upon mouse-hover however for iPhone and iPad platforms, a different system will be used. The user will be able to log in and out through their profile tab as well as see new followers and requests for collaborators. Hovering over an icon will trigger the adjacent area to darken. The menu will roll up once the mouse leaves the content area. It is important for the 2 tone scheme that is used in the logo to be reflected within the hover features on the desktop version, this creates a graphic and colour hierarchy, making good use keeping the brand fluid too.
Design Thinking The Home Page - Structure On navigating to Nuance, a user will land on the ‘new’ page, this is a home page that presents featured content. The structure will be simplistic, on the right will feature the content and on the left the live-chat facility which will be fixed when scrolling. The content will be presented in categories with the user able to navigate left and right to view more as opposed to scrolling down for endless
Visualisation of category and user content areas. White Space to allow for drop-down content (Fixed)
Content Area
Chat Area (Fixed) Scrolling down will present more categories
portfolios and user profiles.
PUBLIC
The chat facility will be permanently present at this location, though the content area may be minimised to increase the white space of the site when its not in use. The purpose of this chat facility is to allow for collaboration, feedback and general discussion on creative ideas, projects etc. The user may chat in a public chat room encompassing Dundee, Edinburgh and Glasgow, or just within the one city or just a particular user in private. Info relates to the aesthetics of the
CITY
USER
nt
INFO
max: so when we meeting on thursday? you: dunno mate, it’s gonna be tight.
Normally a user name will appear in white however when this user is live, the name will appear in yellow, clicking on this will open up that user in the private chat window within the chat facility.
Hovering over the content box will decrease the opacity of the image and bring up information regarding the profile or event.
enter text here...
Finalised Design The purpose of the functionality within each category content box is to allow the user to navigate through the profiles, portfolios and events in a linear manner, left or right. Hovering over the user content box will bring up details in front of the image. Clicking the area will take the user to the user’s page. The colour scheme, type and geometric style is a echo of the logo, this creates a fluid identity.
12 23
12 23
12 23
12 23
12 23
Design Thinking
The Home Page - Design Across Platforms Design for Desktop
Design for Tablet
Design for iPhone
12 23 Dundee Saturday 23rd January 2013 19:00 - 23:00 Feel free to come to the event tonight, we are just meeting to discuss the work of Matina Ferguson, anyone weclome with an opinion.
12 23 Dundee Saturday 23rd January 2013 19:00 - 23:00 Feel free to come to the event tonight, we are just meeting to discuss the work of Matina Ferguson, anyone weclome with an opinion.
12 23 Dundee Saturday 23rd January 2013 19:00 - 23:00
OPPORTUNITIES
Feel free to come to the event tonight, we are just meeting to discuss the work of Matina Ferguson, anyone weclome with an opinion.
Design and the User
Design and the User
Design and the User
The desktop design will present the user with a range of featured content in scrollable categories. This will give the user a flavour of all the main elements of the site, it’s uses and USP’s. The chat feature brings creative people together from Dundee, Edinburgh and Glasgow - allowing collaboration, feedback and general peer contact.
The structure of the content for tablet aknowledges the lack of hover facility thus the content boxes are twice as big with the information of the profile or event appearing adjacent to the image. Navigation is placed on the left and content on the right, keeping the header clear for the logo, a profile button opens up options to the left of the Nuance logo with log in and account information.
The overall aesthetic targets a wide and creative demography with a professional but not corporate design, echoing the diversity and creativity of the websites users.
The swiping motion of the finger from left to right will allow the user to scrollthrough the content on each category whilst swiping down will bring up more categories within each menu tab. To facilitate navigation, the background of the
To reflect mobile browsing the menu appears as both header and footer. App name and profile appear at the top whilst app content appears at the bottom. In order to fully view each profile or event, it will feature as the only visible one within each category - due to this the colour scheme was changed, dark tones were just not
content area will martch the menu button.
suitable.
Design Thinking
Additional Pages Work Page This page will present work that is featured, users’ portfolios and ongoing projects. Each box allows the user to like or comment upon the work whilst hovering over the box will reveal a description of the work. The user can browse this content by scrolling left and right and down for more options. The content areas are broken down into subject, for example music, graphic design, sculpture etc. This will allow the user to quickly find something that is more in line with their interests. The chat facility will exist until minimised on all pages. It will allow the user to communicate in realtime with other users to get feedback on projects or to organise collaborations. When a users name appears in yellow it signifies that they are live, clicking this will open a message box in the message facility to that users. The user can then begin chatting to that user.
Events Page This page is devoted to events, users upload events to this page with an image and event details that are revealed upon hovering. The events are categorised by place, Dundee, Edinburgh and Glasgow, allowing a user to quickly find an event that suits them and is closest to their current location. The user can also search by events with ‘today’, ‘this week’ and ‘coming soon’. The messaging facility will allow users to contact the user host and express their interest so the host can ascertain numbers etc.
Designs in Context The App
Design Thinking in Context Nuance for Pages Desktop Additional
Designs in Context
Nuance for iPhone and iPad