Monthly Archives: November 2013

First impressions: Making a splash

The concept of a splash page for the site is a simple one – provide the user with a “hub” of information to land on when they navigate to the site. The basic premise for my adaptation of whatever a conventional splash page may be by definition, is that it provides a place for me to showcase my best content, and any news or other information I feel may be worth the most to me by being displayed prominently, as well as providing an easy way for the user to quickly make judgments of me as a designer. So, the user benefits by having a hub of easy to decipher information, and I benefit by having a means to channel my best content, most likely to make a good impression, straight to the user, as well as having the ability to choose which of my pieces of work make the first impression on the user. The first impression made by showcasing my featured content is also not subtracted from by the presence of other web elements that may distract the user and viewing of the content; although conversely, should the page be intelligently designed, the user is also not hindered from reaching other pages easily.

Portrait displayLandscape display  Windows 8 "Snap" feature

Having fun with some showcase-type images, my apologies…

The current version of the page I have designed I feel achieves these goals well – all of the information displayed is accessible at a glance, as well as allowing the user to progress on through the site easily. The background image can easily be changed with use of CSS transitions and the design of the site does not hinder which images can be used due to the use of space in the composition, however there is space to display a footer with added information, information in the left-hand banner, or an RSS feed/other ticker elsewhere in the space. The page is responsive and will adapt suitably to different screen sizes and resolutions, as well as maintaining the aspect ratio of the linked boxes on the right which is important for the integrity of the design as a whole. I’ve tested the design on screen sizes ranging from 27″ to 11″ and will most likely develop a streamlined version for 4″ mobile devices, since due to the availability of free space on the screen, will most likely be made up of a different composition in order to not hinder the user. I’ve tested the site on a Surface RT tablet, various flavours of Mac OSX machines, and different resolutions of Windows 7 and 8 as well as on Internet Explorer 9+, Chrome, Firefox and Safari. I will talk more about the steps taken to make the splash page responsive to different form factors in next week’s post.

Landscape display leftLandscape display right

Ruthless evaluation: The designer’s kryptonite

Having designed, produced, and reviewed the first version of a home page for my website with temporary assets (such as fonts and images) in place, I began to evaluate it in terms of areas to improve in; what to keep, what to change, and what to add. And, sure enough there were issues I had to address. To begin with, I quickly found that the composition was quite uncomfortable – particularly with the size of the buttons in the navigation bar as well as the banner on the left which I wanted to keep – but perhaps implement differently. The design felt cluttered and confusing on account of the way that elements were arranged. The oversized header area takes up the whole viewport until the user begins to scroll, which does offer a useful and desirable output for featured content to be displayed, accessible at a glance, but at the expense of the site feeling cluttered when main body content is introduced onto the same page.

Splash page draft Splash page draft

Problem solving

In order to solve these issues there were different routes I could take. The header area could be significantly reduced in size and prominence, taking up less space and offering a cleaner overall design to the page. This has the drawback of removing the showcase area of the site however, which is a design move I would prefer not to make on account of the website’s nature (a showcase). The alternative which I decided to follow and begin to produce in my second version of the site was to have a separate splash page that would act as the landing/home page of the site, showing any news and updates as well as featured work, with links to the rest of the site and a brief banner as seen in the current version. This has the benefit of a zero-click access to the most important information on the site for the user, as well as the ability to make good use of the power first impressions can have on the user. Additionally, splash pages are popular in many design portfolios currently, and by incorporating this design trend with functionality as opposed to just incorporating it by principle of it being a trend, shows modernity and functional design in the site.

The importance of tradition

As a digital designer it could be easy to argue that the importance of mocking up a design exclusively on paper is neglible, as opposed to using Photoshop, a graphics tablet, or should you ever feel the inclination, even Microsoft Word or a similar package…

A sign of the times

As a quasi-traditional artist you might colour me biased – however, design on paper in the very early stages of a concepts has benefits irreplaceable by digital environments which are frequently inundated with features and functionality. And this is exactly what grants paper and pen the ultimate advantage for the conceptualisation of an idea – the lack of functionality. The absence of distractions that paper offers compared to digital practice means the creative process is complete unadultered – with just the means to make a mark, and something on which to make a mark. Digital methods in the creative process allow the expansion and improvement of an idea however and so of course, they definitely have a place in the cycle – however mocking up on paper allows the fast flow of ideas and the chance to visualize an idea without it being influenced by anything other than the original concept itself. The basics  can thus be laid out before further improvement in a digital environment.

ImageImage

For HTML construction a design on paper can be of huge assistance in knowing how a visual design will be coded and brought to life, since a simple design on paper is effectively a foundation for the product in its entirety; not dissimilar to how HTML is used in the construction of a web page.

Concepts in Photoshop

After having completed some initial sketches I completed a concept in Photoshop intending to show how CSS might be used to build on top of the HTML foundation and make the page usable. I aimed to make the page easily usable on different devices by having large button areas, have the ability to showcase a particular piece of work or other feature of importance, as well as provide a succinct portrayal of what my work was about, as well as myself. I used contrast and transparency to control and arrange elements in the page, but with a focus on usability, and no requirement to click around a lot to find or view information. I wanted to avoid use of skeuomorphic design as it’s a trend that has recently fallen out of favour in the design industry (in my opinion, rightfully so at this point in time) and I wanted the site to be modern and up-to-date with design trends and influences.

Photoshop Concept

I’m going to go away and focus my efforts now on rigging up some HTML ready to put the site into production, so check back later where I’m sure I’ll have found something to say regarding how something has gone wrong in the process.

“Bristol Zoo” – BU entry series #1

Having started my time as a student at Bournemouth University on the Digital Media Design course, I will be posting blog entries regarding my production in seminars and workshops on this blog to keep a record of how my projects have developed, in addition to reflecting and evaluating the work I have done. I’ll do this in a separate category to avoid confusion with any personal or work-related projects of my own in the process.

To begin with, we were handed a brief based around creating a “digital user experience” for Bristol Zoo – a project requiring group collaboration, and one that results in a presentation to the rest of the group, of a concept which we have developed together.

  • Utilisation of the Zoo’s photo archive and associated facts
  • Facilitation of new types of interaction as well as engagement of users
  • Improved relevance of the heritage sector through use of technology
  • Maximisation of locative aspects such as installations and portability
  • Appeal for an audience made up of young families, visitors to the Zoo, and animal lovers.

We kicked off the development process with consideration to new technologies that might be useful in the conception of our idea, which begged the question of “What new technologies are around that could offer a new experience to the target demographic?”. The brief stated that our target user group would be young families (parents, and their children under 13) as well as animal-lovers and enthusiasts of the zoo in general. Taking advantage of sources such as Reddit, Engadget, TechRadar and other similar news sites we looked at new technologies in development, with sufficient information for use in a conceptual idea, as well as technologies on the consumer market that we could possibly adapt for a new idea. We considered the general reception of products that had been released, as well as that of those in development; a significant amount of which had been beta tested at least, and had information available on how they were received by users.

Several opportunities caught the keen eyes of the group, and we began to brainstorm potential outcomes for a few technologies. This initially included motion capture techniques, Microsoft’s Kinect technology, Google’s Glass technology, as well as considering that which was already proven to be well received in the market such as location-aware mobile and web platforms such as Facebook’s Check-in service, interactive applications and solutions for smartphones and other web-enabled devices, as well as simple web apps and games that could possibly be incorporated. We considered the idea of reward schemes, the premise for an educational experience in general as well as ways to engage current users, as well as attract new ones (explicitly mentioned by the brief given to us).

Having sorted through some ideas we concluded that a new digital user experience for the use of zoo customers may require a relatively unknown technology in order to truly engage people, as it would be something that the majority of people had not used, thus attracting people to the installation. We also decided upon the fact it would need to have both casual/fun elements as well as potentially more mature, passive elements in order to be relevant both to children and adults, being equally engaging for both main groups. Obviously the concept would need to bear relevance to the zoo in terms of being themed around animals – as well as the heritage of the zoo and its relevant sector in the industry as stated in the brief.

Unequivocally so, the group decided that Microsoft’s Kinect may not be engaging enough due to its large presence on the market already, and may lack scope for the ability to include substantial amounts of relevant information, images, and trivia about the zoo and its heritage overall. We considered motion capture as a subcategory of Microsoft’s Kinect and refuted its inclusion for similar reasons. The group agreed to keep Google’s Glass technology on due to the arguably passive nature of the experience it offered – which we theorised might be useful in developing an activity for adults.

One advancement we considered strongly for further conception was the Oculus Rift VR Headset – a technology which I’m sure many people who would be reading a blog revolving around the creative industry will have heard of once, let alone laughed at many a reaction video. It’s a USB connected headgear set with a small screen inside placed behind two curved lenses, in order to bend the image around the users complete scope of peripheral vision, offering full immersion when coupled with the mechanic of head movements by the user being tracked and replicated in-game, resulting in an immersive experience in which the user feels completely connected and in a part of the game. Due to the fact this is something that has rarely been offered up before in such a successful form we considered this idea for further development and began to think about how we could incorporate an environment into the installation, ensuring easy accessibility by users of the zoo, as a digital user experience in response to the brief.  We coupled this idea with the concept of an omnidirectional treadmill, allowing the user to traverse 3D environments by running in different directions on the spot.

Finally we put thought into the type of environment and narrative within it that would be controlled by these new technologies – bearing in mind it had to apply to different audiences, as well as meeting other parts of the brief such as the inclusion of historic images from the zoo’s archive. We incorporated these requirements into our concept, theorising that the images could be used by level designers to replicate a realistic environment of the zoo that could be explored virtually. We decided on a narrative-driven storyline for the experience, wherein the user would complete animal-related tasks such as searching for an objective, or otherwise completing tasks such as races, evasions, deliveries etc. We demonstrated how the interface might look with some mock-ups I created which are attached to this post, as well as planning the inclusion of relevant facts as stated in the brief requirements, to adhere to “animal-lovers” and adults, who will potentially be interested in the heritage and factual background of the zoo, as well as introducing technological relevance to the heritage sector as discussed in the brief – which thus concluded our concept and response to the brief.

Bellow is a gallery of the images referenced, showing concept designs of the installation and software.

Thanks for reading, feel free to leave a comment letting me know how we did!