Visual: Frameworks

Visual Frameworks A brief synopsis of past/current/future visual style orientations

A quick insight Before beginning lets take a look at 3 video spots which illustrate technology being used in alternative ways. When watching them I would like for you to consider; What consistencies are there in the portrayal of human interaction with technology? How is technology conveyed?

A quick insight cont. So what conclusions did you come to? Technology is seen as an ‘essential’ component of life; an ‘extension’ of the users needs Technology attempts to ‘seamlessly’ integrate itself with the user and their immediate world Technology’s face is one of a ‘hybrid’ persona; multifunctionality is no longer a feature or highlight, but rather the rule rather then the exception! Users have expectations of technology which no longer confines itself to the boundaries of a single purpose & to this extent the lines which once built themselves genres are no longer there; and our own approach to our development should reflect this

So when assessing the rest of this review, keep in mind that it is our job to; Take the really complicated and make it simply just work! And visually this means a smooth transition from the ‘real world’ to the online one.

Developer Challenge We have briefly touched on the ‘hybrid’ face of technology but what does mean for you? – the developers? I present to you a challenge – ideologically (if you have not done so already) we need to take a step away from the mental and practical segregation between; The single purpose of one of our products And all other potentially associated features (which may not traditionally be included)

So in tangible terms this translates into YOU keeping an eye out on new and developing technologies/languages/features which facilitate the production of innovative interface design i.e. If the new CSS standard permits impressive dragNdrop/translucent div like capabilities tell someone! – a key team member, a director, anyone so we can make it happen rather then thinking; ‘oh no this is just going to be a headache which I just hope and pray doesn't slip past the eyes of one of the designers’

Brief Background A forever changing market: the past, present & future Past - Amidst the Western online community, throughout the years of 2007/08, the catchphrase “web 2.0” undeniably held an unrivalled position in the way in which interface, ideological and implementation methods were approached and employed amongst previously established and newly developed sites. However, from a visual perspective what exactly did this web 2.0 thing mean? Most obviously sites suddenly embraced the advantages of CSS language advancement; embodying this development through experiments with highly simplified visual tones, colour palettes which took their inspiration from the likes of primary and opposing swatches, gradients which were to stand on their own without the aid of complicated textures or patterns and of course the revival of the one of the graphic designers most familiar tools; the typeface in all its variations. Yet what other then the innovations of the CSS developers compelled the graphic arts community to transfer from the highly intricate flash interfaces of 2004/2006 to a more streamlined and visually simplistic attitude?

Brief Background cont. 2.0 in all its... 2.0ness

Brief Background Change and the evolution of the net Eons ago, the net had firmly established itself amongst the people in the know/and or those who had to know, as an essential tool of communication, information transfer, workplace functionality etc etc etc and yet it still remained under severe scepticism, or acceptance rather, from the mainstream social community as a device that would be a regularly active part of their daily lives. However, with the progression of a number of facets, which were both technical and social, the net was lovingly embraced by the social networking masses and accepted as a part of who they were. Facebook, twitter, YouTube, shared media and so on made the net acceptable to a majority of the mainstream public and in so doing altered the way people looked at and utilised their time online. Furthermore, with this influx of this new type of user, the web became friendly, easier to use, simpler (think Steve Jobs and his interface team vs. Linux) and thus bolder colours, more appealing tones, vibrant shapes and crisp friendly “I clicked it so it should just work” attitudes. Web 2.0 in all its function and visual tone was embellished!

Brief Background Present and the Future So where does that leave us now? Today (again in the Western community) the net for the mainstream, is an ‘essential’... wait let me say that again ESSENTIAL part of their daily lives and hence it is expected to; Provide immediate feedback Frequent updates Multifaceted tools & functionality Visual and mental stimulation outside of visual bravado And allow activity & ease of utility

Brief Background Present and the Future cont. And what does that translate into from a visual standpoint? – A home away from home. By this I mean visual trends are now/and continue to head towards a net with sites that an ‘extension of the user’; that is to say the user has a need for information - and a site provides a space for that need which can be accessed with ease, simplicity and functionality, but which also IMPORTANTLY, does not stray too much outside of making them feel as though they are using a computer of the 90’s. To this extent visually think of taking a web 2.0 interface, sucking it off the screen and overlaying it onto the users own physical space.

Brief Background Present and the Future cont. Thus current and future visual tones should employ; Simplicity / functionality but IMPORTATNLY with a visual feel which attempts to create a seamless transition from the users world to that of what they are accessing online Practically this means; A clean ‘scrapbook’ and or ‘handwritten’ approach without obviously straying into the territory of creating a unusable piece of art which mimics life Multipurpose functionality Welcoming colour palettes which again are extension of the real world content of the site (appealing but not opposing / vibrant or gaudy) Canvases / interfaces which are streamline and crisp but don’t feel sterile (think the difference between physically looking at and drawing on a post it note vs. starring at a clinical computer monitor) A virtual desktop of sorts which is an extension of the user

So what does this mean for the future and what should be kept on the mental radar?

Brief Background Hybrid sites and multifunction The user of today expects a site to ‘just work’ as a part of their life. Sites should look appealing because that’s just the way things are in society. If its unattractive/sterile and uninteresting it gets ignored – there is NO middle ground for success in this regard. Sites do more than just provide occasionally updated information, they serve to function on a day to day basis which translates into ‘sites which breathe’ so to speak. They’re not docile bits of information stored away in some locked cellar; they are regularly accessed and thus are expected to be; Appealing Functional Approachable Years ago a mobile phone was useful when it made and received calls, but now most people won’t even kick one unless it takes photos/videos/music, sends email, searches the net and all the while looks stylish and welcoming enough to keep you from ever thinking about how dull the interface looks!

Brief Background

+ Potential online future markets Mobile phone sites Viral marketing sites/advertisements

Tools Creative Suite 4 Master Presently CS4 is Adobe’s poster boy and as much as I cringe in admitting to it, it now seems that the inevitable merge between Adobe and Macromedia is beginning to pay off. However, this is only said in virtue of working with CS4 for a limited amount of time and capacity (so may my words not come back to bite me) Advantages Faster/Stability – Simultaneously running suite software i.e. Illustrator/Photoshop would appear not only to be ‘somewhat’ faster, but at present more stable; though it is still not lightening Legacy/Backward compatibility – Again Adobe appear to have made some nice advancements in their legacy backward compatibility to older documents created in their prior applications so far; i.e. better maintainability of earlier ‘smart objects in Photoshop etc

Tools Creative Suite 4 Master cont. New Toys – Very limited use thus far (in that I haven’t had a chance to thoroughly inspect/use) but from what I have seen quite nice with the most noticeable thus far being little features to the interface/the way operations are handled have been significantly improved

Disadvantages - With the great merge between the two software heads there has been impressive improvements (and I mean IMPRESSIVE) but the word on the grapevine is that the usual repercussions of market takeover will inevitably bite us all in the soft squishy end; that is to say just a mental reminder/note should be made that with every release of a new Creative Suite comes less and less compatibility with any other software; although with the industry being what it is today everyone I have spoken to at least accepts these tools as the standard and don’t suspect that is going to change within the caution worthy future.

Reporting/Framework So what does this all mean from an assessment standpoint? Scheduled Project Analysis It is proposed that designated key team members (that is the people who need to be involved), on a quarterly basis, schedule a meeting so as to ask of our recently past/ongoing/present projects; Do they comfortably meet the demands of today’s ‘user’ market? (with the user being as outlined at the beginning of the brief) And how do they sit in line with current marketplace styles / tones? (by taking note of appropriate industry examples via established Publications; such Smashing Magazine or online such as; A List Apart http://www.alistapart.com/ Smashing Magazine http://www.smashingmagazine.com/category/graphics/

Furthermore, to be determined on the outcome of these assessments, new visual approaches may need to be considered for up and coming/recently undertaken projects.

Reporting/Framework Maintaining an understanding of the market Additionally it is also suggested that any Mindvision graphic arts team member, persistently keeps a watchful eye over industry relevant market styles; wherein the phrase ‘persistent’ equates to being able to make a brief summary on market style/visual trends on a per 3 month basis.

Potential effects on other Developers? Sustaining interface design standards and flow on from Style Guides With an aim to maintain; Layout and composition - An endeavour to preserve a handle on all the layout variations that are used for the interface, and when and how they are used throughout a site. On larger projects if there is a concern especially for visual sustainability (and the budget allows for it) Provisions should be provided by the artist when/where possible for a wireframe to the sites maintenance crew/client (or those overseeing site maintenance) to illustrate these variations (such as different column configurations and where they are used).

Potential effects on other Developers? Sustaining interface design standards and flow on from Style Guides cont. Typography - Generally not an issue for us (and more often than not this is self explanatory through the definitions laid out in the .psd) however, as Site Director grows there may be a need to explain the guidelines for acceptable use of typography to maintain consistency. Heed examples for the main text, the headline styles and their hierarchy, list styles, etc. This also should flow through into any combined promotional visual campaigns (thinking Scouts Aust here). Also from a practical standpoint for larger sites an alternate typeface for default font families in the event that the user does not have the font assigned.

Potential effects on other Developers? Sustaining interface design standards and flow on from Style Guides cont. – •Colour palette - Again mainly something to keep note of for our larger clients but everyone working on a project should keep an eye out on the inevitably growing colour palettes used in typefaces, links, table headings etc and attempt to abide by the original set tone which is hoped to be utilised throughout the interface. Obviously the easiest way to reference this is via hex or RGB values.

Potential effects on other Developers? Sustaining interface design standards and flow on from Style Guides cont. – Images - Where possible site content maintenance should abide by predefined image sizes which are used throughout the interface and (not that Graham doesn’t already do a superb job of this) but facets such as table alignment, caption placement etc should also have an overseeing eye kept on them. On more of a visual level it is important (especially for Site Director client managed sites) that used imagery maintains a set tone/mood i.e. mixing your drinks with illustrations and photography which simply don’t go are going to create the visual equivalent of mixing ones beverages on a night out (again thinking Scouts Aust here).

Potential effects on other Developers? The narrow mind rejects; whilst wisdom accepts – Yes it may sound like a phrase utter from the mouth of a zen master (funnily enough because it was) but its message is no less important PROGRAMMERS and other developers should illustrate an EQUALLY open mind to considerations of a forever growing/developing and changing market place. Just as there are advancements in code and implementation methods, so too are there significant shifts in how websites should be deployed from a visual perspective such as the golden oldies;

Potential effects on other Developers? The narrow mind rejects; whilst wisdom accepts cont. – The Byte gets fatter – Advancements in accepted default values for file size of sites/what occurs when they are loading and so on are diverse and accordingly developers should be open to these changes JUST AS designers should also equally be very mindful of practicality!!! – A larger canvas – With an increase in widescreens, both in Desktop LCD ranges & notebook products, again the default template for what is a ‘standard’ size screen and thus palette for web developers to work with, has changed. However, with obvious certainties already in play such as the amount of width that human eye can read on one line, these laws need to be kept in mind when contemplating what useful and expected things we can do with the potential extra real estate; do we wait for someone else to come up with something neat? Or be the first to take the plunge?