HausFind
I have been working with HausFind as a piliminary logo concept, allowing a standard uniformity and positioning, so eventually the layout can work with any logo.'Find' is a key word associated with most home-searching tools. 'Find' suggests active seeking- something the user is participating in. Haus or 'House' has been abbreviated and turned German. Whilst appealing to younger popular culture due to the uprise of german techno, it also suggests German efficiency. In turn, this suggests the site will be quick, efficient and run smoothly (much like a well considered production line). This fills some of the aims I set myself for undertaking this brief, such as negating stress and improving simplicity through User Experience.
Alternative brand ideas
As I don't just want to copy a pre-existing website, the creation of a new name and identity is essential to fulfil the criteria of the problem at hand.
Hexidecimal Colours
Hexadecimal colours are a way of collating the RGB Colour system, making a unique colour code with the intention of screen based use. A Hexadecimal code is similar to the Pantone reference guide, giving an allocated # rather than 'P'... It is not uncommon information that different colours have the potential to effect us in many ways. Visual Stress is a key aspect to modern day living, perpetuated by screen's, so trying to maintain stress-free browsing on ANY screen, regardless of User and screen-brightness is imperative. My initial reactions are that a soft colour palette is needed, to make the interface accessible to everyone a balanced colour pallet is needed. In addition to block colours, gradients and overlaid opacities, incorporating photography which complies to the same colour structure can aid mood, tone and emotion just as much.
Red
Red shades tend to trigger your stress response, making you more anxious, while lighter shades calm you down. A strong red (such as Just Eat), can make the user feel pressured and in a rush- an emotive quality I do not want to perpetuate through my design.
Blue
Blue is currently the most popular colour on the internet, possibly due to its calming effects. "Peaceful, calm and gentle, blue has tremendous power to manage stress. It's a very soothing color that helps calm your mind, slow down your heart rate, lower your blood pressure and reduce anxiety. Blue is believed to have a cooling and astringent effect. When choosing the right shade of blue, it's best advised to go for a soft and neutral shade for a calming effect."
Yellow
The yellow wavelength is relatively long and essentially stimulating. In this case the stimulus is emotional, therefore yellow is the strongest colour, psychologically. The right yellow will lift our spirits and our self-esteem; it is the colour of confidence and optimism. Too much of it, or the wrong tone in relation to the other tones in a colour scheme, can cause self-esteem to plummet, giving rise to fear and anxiety. Our "yellow streak" can surface.
Green
Being in the centre of the spectrum, Green is the colour of balance. The world about us contains plenty of green, so this indicates the presence of life, meaning we are reassured by green on a primitive level. The correct shade of green must be used, or else it can look tacky and cheap, alternatively being perceived as too bland.
Purple
Purple or is known for luxury, with its history stemming from the bourjoise. It has Spiritual connections, suggesting, truth, awareness, containment, vision, luxury, authenticity and quality. However, the wrong shade of purple gas been linked to suggested Introversion, decadence, suppression and inferiority. A lighter 'violet' shade encourages deep contemplation.
Orange
Since it is a combination of red and yellow, orange is stimulating and reaction to it is a combination of the physical and the emotional. It focuses our minds on issues of physical comfort - food, warmth, shelter etc. - and sensuality. It is a 'fun' colour. Negatively, it might focus on the exact opposite - deprivation. This is particularly likely when warm orange is used with black. Equally, too much orange suggests frivolity and a lack of serious intellectual values.
Mono tones and base tones
Grey
Grey is the only colour that has no direct psychological properties. It has the ability to mute a mage, image or cast shadow on information. As shades of grey differ, so does the emotive qualities it possesses. However, grey has been noted as quite suppressive.
A complete absence of colour is depressing and suggests the world is turning grey (gloomy and unimaginative). As a reader are instinctively conditioned to draw in and prepare for hibernation. In addition, grey has a dampening effect on other colours used with it so shade must be selected appropriately.
Black
My favourite colour and a Key in everyday browsing. Despite blue taking the top spot of most used colours for screen, shades of black and grey work in harmony to present clear information on almost any background. Black is essentially an absence of light, since no wavelengths are reflected and it can, therefore be menacing as it absorbs all the energy coming towards you. Black does not draw attention to itself, yet oozes subtle sophistication; it communicates absolute clarity. It communicates sophistication and uncompromising excellence and it works particularly well with white, yet colour combinations such as black and yellow can trigger other emotions, such as panic (as used for Warning tape & signs etc).
White
Just as black is total absorption, so white is total reflection. It suggests, freedom, space on the page and essentially reflects the full force of the spectrum into our eyes. White is purity and, like black, uncompromising. It is clean, hygienic, and sterile, yet too much white (especially when contrasted with a vivid colour) can make them feel very garish.
Advice on colours for screen
In short, the best colours are the ones that suit the subject and your intended audience, and coordinate with each other optically and psychologically to enhance your meaning. Contrast is a minor point. So long as the page is readable, you have a lot more complex issues to deal with.
Exploring Colours
 |
| Blue, known for it's soothing nature is the most popular colour on screen. A vivid blue (e.g. rgb, 0, 0, 225) strains the eyes and makes the design look unconsidered. This is the standard hexidecimal code for unaltered URL Links, and often paired with Ariel typeface. My colour selection of blue features more muted tones to contrast this. Soft sky blues are implemented, still vary in tone and shade but ultimately effecting the brain differently. Green hue's are also introduced to, making more of a turquoise than a vivid blue. By fusing the connotations of blue and green together, we are presented by a soothing mixture, which even has hints towards the sea and beaches. By introducing this subliminal reference, the viewers subconscious may feel more relaxed and excited, suggesting a fresh change or break is coming. |
 |
| Despite the brief's intentions to place emphasis on speed, this does not mean negating quality. As the majority of properties available immediately or for one person only, the quality and photography of such is very often 'less-than'. Because of this, users may feel disheartened that they are about to move into a dump, so they need to be reassured in other ways that is not the case (even if it is). Purples suggestion to quality, vision and truth hints to the viewer that 'it can't be that bad'. By using muted shades, experimenting with rosier and flatter shades, and not opting for too pink tones, a gender neutrality is still present as no higher inference is placed on femininity. |
 |
Green earthy tones to suggest 'fresh'- a fresh world, the outdoors or a fresh start. I opted for a wider scope of greens to avoid copying other letting agents who are known for their distinct green. Unipol, some smaller local agents and even design focused interfaces such as Spotify use a vivid green, standing out with an authority and clarity unrivalled. By adjusting this colour mix, adding additional yellow and muted hue's, the premise has been altered but the psychological effects are still positively there. As I am unsure about including a blue-blue, further experiments with shades turquoise are present. |
Current housing websites and letting agents, often go for a 5 colour system. This may include two of the same colour in different hues or shades. It is very rare to see more than 6+ hues or shades used, and even rarer to see 6 or more individual colours. However, these rules do not apply for comparison websites. As I do not want the aesthetic to just say 'the same as every other house hunting site', it also needs to say 'comparison site'.
The main typeface featuring throughout Housing websites and Comparison websites is Helvetica, with DIN coming a slow second. Containing different weights and a extremely legible San-Serif structure, both fonts communicate clearly information at small or large pt sizes, meaning a good result Pixels per centimetre on screen. However, the uniform nature Helvetica brings can become tiresome after a while, especially with everybody using it. Alternative typefaces for subtitles allow a personalisation and character to be brought forward, with a variation of DIN or Helvetica Bold being the top choice amongst competitors so far.
By looking into the competitors, I know what conventions to roughly work with, making the outcome of the interface as professionally looking as possible. I am not as proficient on Illustrator or Adobe XD/After Effects, the design qualities need to be up to standard to hand over to the developer to give them a proper understanding of what needs to be done.
Exploring Fonts
 |
| DIN is a German typeface, used for European number plates. The connection with german efficiency and europe convey the right messages, of 'a holiday' and speed. A thicker stroke width is featured with the Pro Bold version, which could be either used for body copy or subheadings. It is quite mechanical in structure, with a rigid San-Serif and low x-height. Due to the overall legibility and uncomplicated design, it has become popular for general purpose use in signage and display adaptations. |
 |
| 30640 still remains to the same x-height and rigid structure as Pro Bold and 1451, yet takes more of an influence from Futura. This variation of DIN incorporates a curvature in the letterforms, which has the ability to give either a retro or extremely modern feel to the overall design, depending on Kerning/Leading etc. The incorporation of tall and thin numeric counters are clear, legible and proportional in structure. The thicker stroke may be more useful for determining the hirachy of information, by use in Subheadings or stating the price. |
 |
| The type manifesto for Avenier states it proportional geometric sans-serif typeface, now a subsidiary of Monotype Corporation. Apple iOS uses Avenir for some of their map functions, as well as in the latest iOS 6 update. Influenced by simplicity and other early geometric San-Serif typefaces, Frutiger states he intended the slightly bolder variations (such as Bold or Next) are more transferable. Eg: white-on-black text would look the same to a viewer as black-on-white, this is important when considering the global masthead or colour schemes within my own website. |
 |
| Shree Devangri 714 and Helvetica Neue are very similar in structure and overall appearance. Both being a light weighted San-Serif, legibility is clear and preservable at all scales. Shree however has a thicker width to the overall individual letter forms, meaning they are more naturally spaced on the page compared to Helvetica. This is important as the Kerning of Helvetica Neue would need to be adjusted, which could become a time consuming activity if the web-page information is changed around frequently. From a developers perspective, it may be easier to use a revised solution, such a wider set type to illuminate constant kerning. Alternatively, as Helvetica and Helvetica Neue is one of the most popular and most used typefaces on the web, for any reason if the server cannot download 'Shree', Helvetica may be within their pre-saved web font collection so it would download automatically. |
 |
| In previous design notes I considered the incorporation of a 'holiday' aspect, putting an excitement on the prospect of moving away quickly, rather than a sad looming corporate presence. As the target audience are predominantly younger (18-31), a acceptance of artistic or alternative design is more readily accepted. A typewriter aesthetic is created by the strict line aspect to the serif, which may suggest an informality. I'm not convinced that this is the most appropriate type solution as it neither says 'holiday' and 'escapism', more 'nostalgia' or 'untrustworthy', as often typewriters are related to postmodern ransom note designs, or old fashioned letters. |
 |
| Taking further inspiration from the mechanical structure of DIN, Orator Std incorporates slight rigid serifs into its San-Serif design. A taller x-height with a narrower width is more effective with wider kerning, often referencing the typeface used for coding. This subtle reference may add an aspect of reliability and technological proficiency to the website, instilling a trust that they are comparing all sources and searching every avenues. This style of typeface is also often related to the slender type we associate with journey flip-signs, giving a sense of excitement through its 'otherness'. The letter structure may be slightly illegible at a distance or a small pt size, so this would be best used for subheadings or numeric information. |
Final Brand Considerations
Final Logo
<vectorizations>
Final Colour Scheme
A muted selection of grey-pigmented tones. The fusion of purple, green and blue bring a calming quality, also suggesting luxury and 'freshness'. By introducing this subliminal reference, the viewers subconscious may feel more relaxed and like a fresh break is coming. All shades are naturally muted to avoid the garish mish-mashed qualities of the competitors. In additional research of websites, the user naturally felt like they had entered a more official and considered place on the web. Much like you would walk into a clothes shop and make a judgement about the shop's aesthetics, the same initial aspect is present online. To avoid a garish, tasteless aesthetic, a small pallet is used of complementing colours has been created, allowing a professional uniformity but the ability to alter tones etc through a reduction in opacity.
Final Type Selections
Subheadings
Body copy
Universally legible and frequently used amongst iOS, Google Chrome and competitors. Light will be used for body copy, preserving the white space around it more, giving an open, airy feel. By using Helvetica, the interface should have a more trusted feeling from the user, as it is so globally known.
Highlighted Information
Orator Std Medium for important information and numeric data. This brings a different style to the collection of San-Serifs, moving away from geometric standardisation and giving a slightly more exotic, experimental look. This should appeal to the younger target audience, whilst placing a hirachy on any information in Orator Std.
No comments:
Post a Comment