Monthly Archives: December 2013

Designing for design

Branding is an important part of any commercial venture, and it’s no different for an individual digital designer such as myself. I wanted to create a mark that was clean, was not over-complicated and thus could easily be replicated or changed into different forms to suit different environments, such as a social media icon format or in a header image.

I began by making some sketches on paper in order to get a quick idea of the designs that might have been possible – my one main criteria was to use my name or initials as the brand would be a personal, individual one due to its usage on a portfolio or blog such as this one. My main issue was the fact I had yet to develop a real personality in my work for which to base a logo around – which was the case in my “Fresh Tangerines” logo also on this blog, for example.

 Image

After making a few sketches and a few different Photoshop concept designs I submitted my most recent and slightly more polished ideas to a graphic design community on http://reddit.com (/r/GraphicDesign) for some feedback. Heres what they had to say;

“I prefer the first one out of lot. Blurriness is the opposite of you want to identify yourself with although its different. Now that you know it works without color try doing the first one with different schemes. The circle could become boring, maybe come up with a custom shape behind your initials.” (reddit.com, 2013)

Image

“It’s very good. Just go with a clean vector shape for true design. Dressing it up is just a distraction.” (reddit.com, 2013)

Image

“Don’t use the circle, and keep the TH rounded like the first one.

Clean vectors take preference to ANY Photoshopped work when it comes to logos. Photoshop is only good when using it for a specific application (like if you themed your webpage or something).” (reddit.com, 2013)

mjZnZaz - Imgur

“The reason is that the blurry ones simply look like low quality images and the circle design; the “high tech” lettering (?) is at odds with the organic semi circle element. They are both attractive in their own right but do not go well together.” (reddit.com, 2013)

lwlyFQO - Imgur

I took on board the advice given and rendered the logo again into a much cleaner, and simple vector design that still has the opportunity to be made into a more complicated or themed design should it be necessary; also, at 1.19kb and with transparency in the PNG format, the logo is ideal for web usage – you can see the end result at the top of this blog.

Source:

Beginner logo design feedback, /r/GraphicDesign [online], 3rd October 2013. Available from: http://reddit.com/r/graphicdesign [10/12/2013]

5nSskrI - Imgur

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