Tag Archives: responsive

Website re-design – Content

I needed to ensure that I had chosen a suitable way to display my content in the one-page layout as opposed to how it might have been on the traditional layout. I stuck with the grid for my still work as I felt it offered a succinct way of communicating the work I did, my style overall, and without the requirement for the user to look through categories of work, as in my own experience I have often found myself simply skipping between categories one after the other in an attempt to gain an overview of someones work or style. I did enlarge the wrapper for the content grid to allow more thumbnails to be seen side by side, as is complimentary of the one-page layout.

Image

Image

In addition to this, i also opted to remain with the jQuery lightbox plugin I was already using, as it worked well and there was no need to change it. The problem I now faced was a way to display my animated work in a visually clear, summarising style, similar to the way in which my still work was displayed. I considered inserting the animated clips amongst my stills in the gallery with a lightbox plugin to view them, and differentiating them with “Play” icons overlayed over the thumbnail. I felt that the medium of a gallery did not work so well for my clips in particular however, and that’s because I am primarily involved in illustration/visual graphics, rather than animation or motion graphics. Hence, the majority of the clips I wanted to display were shorter clips intended for usage in other projects. I felt a showreel would be a better choice in which to display these due to the quick, fast-paced nature, as well as the feel of a summary of clips, rather than displaying each one in its own right. A showreel also matched the rationale behind a large grid of still images, as opposed to categories, as the clips were being showcased in an overview, not presented one by one. I produced a short showreel of my older work and installed a jQuery video lightbox plugin, linking to it at the top of my page alongside the prompt for the user to scroll down.

ImageIncorporating the showreel into the page avoids linking the user away from the site – promoting continuity and consistency when browsing work, as its all by the same person.

I made some technical adjustments to the site in general as well to improve the general experience for the user. I used a jQuery plugin called prettyPhoto (No Margin For Errors, 2014) for the video lightbox, and smoothScroll for the smooth scrolling to anchor links. This was an important consideration for user experience since if the browser was to navigate instantaneously to the anchor tag, the user may not realise the content they’ve missed and scrolled past and/or lose their general sense of direction on the page. Whereas, with smooth scrolling, the user can see all content being scrolled past and it most likely will inform their decision on what to visit next. I added some jQuery for the subtitle at the bottom of the homepage referring to scrolling down and viewing my showreel. This enabled a “falling and fading” effect when the user scrolls down, which, while mostly for aesthetic reasons, also helped create a fluid feel when the user scrolls down from the homepage as the subtitle disappears gradually, rather than scroll up the page (which looks awkward by itself) or disappear abruptly. I had to make some changes however for different types of mice – the common two which are the one-button mouse shipped with Mac OSX systems, which when scrolled is much more gradual, compared to lots of older mice intended for use on windows systems which jump larger areas at a time – meaning the fade effect would be lost. I had to convert font sizes and element dimensions to vw/vh units to show correctly on the majority of screen sizes also.

homepage

The finished showreel can be viewed here;

Sources:

No Margin For Errors. 2014. prettyPhoto jQuery plugin. [online] Available at: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ [Accessed: 25 Mar 2014].

Advertisements

Nissan and the Oculus Rift

Came across this today – at the Tokyo Motor Show (would love to go to that…) Nissan were using the Oculus Rift in a manner which allowed consumers to design cars by using it – quite how exactly I’m not sure, because as far as I know you would still need a controller or another Human Interface device to interact with the 3D environment that was created for the show – reportedly including birds that fly towards the users head as an effective way of showing the user how it works, anybody who has used an Oculus would know they would be trying to dodge that. Much like myself watching explosions in 3D movies. 

The way the application worked, is the consumer begins with a chassis and then chooses parts to add onto it – simple enough that even the youngest of car fans could use it, however the fact it takes advantage of the universal fact of customisation means it will definitely apply to the older generation as well. Plus lets not forget the fact of it being a gimmick here – one with a lot of potential nonetheless in my opinion.

Its showing good signs for the Oculus that it has already been used in so many applications, and by big names like Nissan too, despite the fact it is still in the development stages. Related, in a sense, to the mock concept I posted regarding Bristol Zoo, its interesting to see the Oculus being used well in applications other than games. 

Nissan have also used some of the designs that were output by users to create their own refined designs and prototypes for potential future models, in the new theme of “co-development” with their customers that they seem to be following, to find out what the market wants.

Image

Conversations between code

“Why does responsiveness even cause such a stir in web development?” I hear you cry. Responsiveness refers to the ability of a web page to adapt to fit the form in which it is viewed – whether that’s a 40″ television or a 4″ smartphone, portrait tablet or landscape desktop, the term has become increasingly more important recently. In fact, Mashable named 2013 the “year of responsive web design” (Cashmore, P., 2012), and it shows unequivocally if you take a look around your virtual self – websites aligned left, right, and center have gone under the coder’s caret and made to play nicely with the myriad of new screen resolutions on the market today. Tablet sales are expected to continue to rise even more so than they already have (International Data Corporation, 2011), and web designers need to respond promptly or risk losing out on a significantly large, and growing, portion of the media consuming audience.

Responding to responsiveness

Of course, I made responsiveness a priority when designing my site and for the most part everything has turned out ok after a long and painful journey. Initially the main issue was keeping both the left and right elements at the same length, for balance and continuity on the splash page. However, when “solving” this problem to begin with by converting element dimensions to be rendered using percentages and vw/vh units, a new problem was created by elements stretching to fill the viewport – rightfully so as I had instructed them to behave in such a manner after all, however this did not work with the design. It was not an issue for the title on the left hand side, although caused a problem for the boxes on the right as they were designed with an equal aspect ratio in mind. After experimenting with various workarounds and serious considerations regarding my worth as a problem solver overall, I found that the best workaround would be to create a wrapper around the whole area that needs to be kept at a particular aspect ratio, and create padding at the bottom accordingly in order to force the aspect ratio when the viewport is resized. Aspect ratio could not be implemented natively in CSS as far as I am aware due to the lack of variables that could be used for such a thing – the only other methods involved Javascript which I did not feel comfortable using at this stage, plus it was a simple design problem (seemingly) and I wished to keep my code concise;

.aspectwrapper {
        display: block;
        width: 100%;
        position: relative;
}

.aspectwrapper::after {
padding-top: 56.5%; /* percentage of containing block _width_ */
display: block;
content: '';
}

Obviously after solving this I had enough issue to solve, which was the way text behaved inside the boxes. This was, luckily, short lived however. I learned there was a fairly common bug in browsers that meant the text was not resized until the page was refreshed, so I used a Jquery code snippet that essentially rendered the font again when it detected the viewport had been resized. This was preferable to refreshing the whole page obviously as the user would not lose their scroll state or wonder why the page refreshed upon a viewport resize, becoming confused and deranged as a result.

               <script>
                       $(window).resize(function() {
                       $("h4").css({ "font-size": "2vw" });
                       });      
               </script>

 

Sources:

International Data Corporation, 2013. Worldwide Tablet Market Surges Ahead on Strong First Quarter Sales [online], 1st May 2013. Available from: http://www.idc.com/getdoc.jsp?containerId=prUS24093213 [3/12/2013]

Cashmore, P., 2012. Why 2013 is the year of responsive web design [online], 11th December 2012. Available from: http://mashable.com/2012/12/11/responsive-web-design/ [3/12/2013]

Fresh Tangerines – Logo Design

Image

 

So having spent 3 months here in sunny Bournemouth now, it only seemed fateful I might meet a group of like-minded creative souls and wind up in a Youtube gaming channel collaboration. Having volunteered to do a logo and set of channel art assets, I realised I needed to create something less serious, more light-hearted yet in no way ambiguous in its representation of the channel ethos as a whole.

I began by thinking of what the logo needed to represent, obviously the logo and assets that will stem from it in the future will be the face of the group in essence, and I made some consideration for what the channel was all about in order to devise a mental design brief I could follow through the design process. I thought it needed to have the personality of being “fresh” and/or “new” – thinking of the concept of routine user-created content delivery as a likeness of fresh fruit and vegetables being delivered to a market stall every morning. In light of this I ensured adhesion of the design to bright colours, positive and uplifting type and graphics with minimal noise in the communication to give a sense of honesty and minimise the ideas of obstruction and obscurity.

I ran into some pragmatic issues with the design itself during its conceptualisation – as you can see from the earlier incarnations of the idea it was difficult getting the text to fit into the composition without looking out of place, or having it contribute to awkward empty space. As you might also see from the design stages, I continued to experiment with the use of colour and the potential for gradients alongside this, which had the benefit of allowing me to see if the subtraction and addition of  colour and background features like the gradient and splat offered any leeway with the text. Alas, it did not.

A friend and fellow channel member suggested the idea of a headset instead of headphones during the process in which I was getting feedback from the other members; it was here that I realised not only would it reinforce what the logo represents (a gaming channel), but it would also free up some space in the most important part of the composition, allowing the text to fit in a more aesthetically pleasing way, balancing the composition with the direction in which the stalk pointed as well as shifting the text from being dead centre in a division of thirds.

Having solved most major issues with the design, I finalised the colour scheme and how background features would be used, and was able to concentrate on making the text readable, whilst remaining in line with the composition of colour in the design. I decided on using a white stroke for the text in the final rendition of the logo as I felt it balanced out the space around the text nicely considering the logo would most likely be often used on a white background, as well as adding a third small colour accent to the scheme without becoming too busy in doing so. 

The logo affords itself well to replication for the use of other art assets which me and another channel member have already briefly explored, due to a lack of gradients that fade out completely to the background, the possibility to restrict the design to just a shape and text for legibility, or even just to text – still being recognisable in and out of context. For example, expansion into a banner, header, small icon, or animated splash screen/video would be easy to achieve in the majority of cases with nothing more than the simple movement and resizing of layers.

Thanks a bunch for reading, as usual let me know how I did if you fancy, or leave a comment!

 

Image

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.