Who inspires me?

As a designer, it’s always nice to have people you look up to. Although I feel I don’t have a particular group of designers who I look up to, I certainly admire / am inspired by particular pieces of work. This can range from colour usage, layout design and how they approach their work from a design point of view. In this blog post I’d like to highlight some designers I generally look up to – many of which can be found on Dribbble.

 

Rogie King

Renowned for his illustrations, Rogie is one of, if not the main designer I look up to. Although I don’t dip my hand into illustration as much as I’d like to, I admire Rogie for his vector artistic style and colour usage. The blend of the two create distinctive, clean and brilliantly executed work.

 

Jeremy Sallée

Jeremy is a visual designer who produces exceptional user interfaces and icons. The cleanness of his designs have very much inspired me to incorporate a simplistic, quality approach to my designs. As a visual designer myself, I take into account his approaches to design and layout, which never fail to impress.

 

Olly Moss

With a strong following for his illustration and print work, Olly’s simplistic take to his movie poster work has given me a strong admiration for him as an artist. His distinct style puts his work in a class of its own, but what I admire most is how he manages to connect characteristics of a subject matter he is covering to create very original works of art. I very much admire the quality in which he structures and produces his work and strive to achieve the same in my own work.

 

Jackie Tran

Discovered through Dribbble, I admire the quality and execution of the icons and layout designs that Jackie produces within his mobile interfaces. The textures, colours and lighting composition that he embeds into his work has inspired me from a production point of view which I feel has dramatically helped me to produce work at a greater depth and complexity.

 

Sir Jonathan Ive

Along with the rest of the Apple design team, the success of the iPhone, iPod and iPad could be put down to Sir Jonathan’s execution to product design. The simplicity he incorporates in his designs creates a visually pleasing product. I admire Jonathan, not only for his design techniques and processes, but for his highly regarded success and approach to design.

There are many other designers and artist who inspire me, but if I were to list them all, I can imagine this blog post would go on for an eternity. You can view work I find particularly impressive in the ‘like’ and ‘buckets’ section on my Dribbble profile.

Mobile Concepts and Responsive Design

For the past three weeks I have been working with the team at Createful (an award winning agency based in Bournemouth, England) producing concept app designs for a couple of their current projects. Whilst working with the team I have been able to pick up new production techniques from the in-house designers when producing concepts; which I feel to have been very beneficial. I have also been introduced to a variety of useful sources of inspiration, including The Noun Project.

For those curious ones reading, you can find a few of my mobile design concepts below. (Note: Headings and images in the selected images have been manipulated for privacy and confidentiality purposes).  

 

Besides concept designing, I had the opportunity to take a nose dive into responsive design using the Foundation 3 & 4 frameworks. After getting my head around how the framework documentation, it wasn’t too difficult to integrate the boilerplate into my projects. This isn’t to say I found it a walk in the park – designing a responsive website does bring with it more challenges for the designer to tackle when in the design process; many of which involving the positioning of particular content to fit different screen sizes appropriately. When designing I found this a rather lengthy and limited process, but put most of this down to being unfamiliar with the framework. In time I am confident that I will become much more experienced in this particular stage in design and will be able to apply more of my own ideas and techniques to the designs I produce.

Vine

From the people behind Twitter, comes Vine – ‘a mobile service that lets you capture and share short looping videos.’ Dubbed as simply ‘a new way to share video,’ Vine can be downloaded for the iPhone and iPod Touch and viewed as a direct competitor to Cinemagram (a sharing service with similar characteristics).

An example of Vine embedded in a TweetAfter initially doubting the point of the app, seeing Vine in action over my Twitter feed has opened my eyes to its potential. In a world where internet and data speeds are forever increasing, video has true potential to go further than what pictures achieve in our tweets and social updates. Having the freedom to share an event in easy-to edit snippets makes Vine a potential alternative to Youtube in terms of brief video sharing and although currently in its infancy, the service could pave another direction for online video the same way Twitter itself did for social updates and sharing.

Aside from the functionality of the app, Vine boasts a very clean user interface and experience similar to the iOS Twitter app, only with a different colour palette. Tapping the person icon on the left of the toolbar releases a drop down menu bar where users have the choice of visiting the following:Photo 28-01-2013 19 58 29

  • Home – The ‘acting as’ featured page of the app. Here users will find more recent Vine posts along with their followers.’
  • Explore – This tab invites users to search for users and individually tagged Vine posts. The tab also provides users with categories (similar to Tumblr) and Editors Picks.
  • Activity – This tab is the place to find out whose started following you and liked your Vine posts – Much like the activity pages in the Tumblr and Foursquare apps.
  • Profile – As the name suggests, this tab lets you view your profile, posts, likes and settings. It also gives you an idea of how many people you are following (In my case, nobody yet!)

Photo 28-01-2013 20 29 33The main feature of the app is as you may have guessed, the video capture screen. The app walks you through making your first post; which essentially involves holding your finger on the screen to capture film and releasing when you want the recording to stop. This functionality allows the user to film in small chunks before moving into another angle or place. The bar at the top of the capture screen (shown to the left) indicates the remaining footage. This ‘tap to record’ feature makes it very easy to film stop motion footage, along with very mediocre time lapses.

Regardless on whether the app becomes popular or not, its a creative insight into how video can be used in social networks away from Youtube. Only time will tell whether or not this app is just another distraction or a new tool for our everyday sharing needs.

New Youtube: My Thoughts

So I went on Youtube today and I was greeted by this:

newtube

At first I thought ‘Ok, looks like Chrome’s decided to take me to the YouTube mobile site.’ So I refreshed and it was then that I realised YouTube had actually gone through another redesign – I was surprised to say the least.

It’s a bit like Doctor Who regenerating into a Mountain Goat or pouring tomato sauce over an ice cream sundae then eating it. But seriously, I don’t think it’s the best thing YouTube have ever produced (and I’m not alone).

So I’ve decided to make this quick blog post to give an overview of where I, being a designer, feel the redesign lacks.

The Homepage

New to YouTube or not, this is the page you see first when you enter the site – It’s where you start your journey. So, like any homepage on the internet, you want it to look welcoming and generally not intimating. Treat it like going on a first date with someone or turning up for an important interview. You want to make a good first impression and to get it, you’re not exactly going to go wearing your pyjamas. That, in my opinion, is what YouTube’s new design is doing right now – It’s wearing its pyjamas.

Focusing on the user homepage in particular – what has happened to the margins? I’m viewing this on a 1980×1080 resolution screen and everything is on the very far left? Not only that, but it all looks very compact and crammed together – Just look at all the white space [Shown below]! The layout needs to be centred so it’s actually user friendly for those using widescreen displays.

image

As you’d expect, on a 4:3 screen it looks better, but it doesn’t mean you should just put it live when it clearly isn’t finished. It doesn’t take millions of users to tell you layout problems this apparent. On a good note, I like how clean it looks. It’s definitely got a Google-like feel to it, but whether that is a good or bad thing I’ll leave other users to decide.

 

Video Viewing Page

This is where I personally feel the ‘clean’ feel has in a way backfired from its main redesign purpose, which was to make it simpler for users.

image

Everything’s tucked away behind icons you can’t exactly make out and it generally feels like everything has been crammed into a tiny space and splashed with an extreme amount of the white, making it feel like an unfinished piece of work. The page is out of line too, making it look like a drunk persons game of Jenga.

image

My advice would be to make these icons stand out a lot more by perhaps giving them a different and/or darker colour so they’re easier to identify? The same also applies to the upload button at the top of the page – Being an important button I would expect this to stand out more than it does.

imageOn a good note, I do like the left hand side column [shown left] which gives me a shortcut to user related stuff and invites me to see more videos from the same user, but (and this might not always be the case) I can already see this on the right hand side anyway?

So there isn’t much else I can say about the layout besides what I’ve already said. It would be interesting to hear what you think about the redesign in the comments. I would encourage anyone who dislikes areas of the design to send feedback to YouTube by clicking on the button in the bottom right hand corner of their site!

Designing a HTML Email

I spent this evening designing my very first HTML email. I had never tried this before, so didn’t really know what I was getting myself into – Turns out it isn’t so difficult after all!

email-gallery-design-Sencha

Using this video tutorial for guidance, I was able to construct a HTML layout for a ‘mock’ promotional campaign – My portfolio site. To me, producing a HTML email was much like designing a website except there were some boundaries that I had to be aware of, such as the width of the layout and CSS styling. When designing, I took inspiration from a number of existing email designs including the layout pictured above, produced by Sencha. Once I had made the initial wireframe of the email, I produced some promotional images in Photoshop to give the email some added ‘oomph.’

4

Once finished, I compressed the images and HTML file into a zip folder and imported the template to MailChimp. From here, I was able to preview the email and make some adjustments to the design (shown below) – NOTE: Setting images as div backgrounds does not work. I finished off the email by including the mandatory unsubscribe button using MailChimps *|UNSUB|* tag.

2

Below – The finished email in my inbox.

3

You can view the end result here

Introducing Project Pages

As discussed in a previous post; I am always refining my portfolio websites user experience. Last week, I began rolling out the newly designed project pages to replace the Lightbox popup information window on stevedacombe.com. This redesign will provide more space to elaborate (Step by steps, increased imagery etc) and will give each project its unique web address.

BEFORE:

Although the popup information windows were able to give visitors an overview of each project, they were impractical when it came to sharing a project. The Lightbox uses an iframe, meaning the particular web page would open inside of another webpage – As a result no web address would be given to a specific project.

3.5

 

AFTER:

The new project pages boast a wealth of information about my projects. The Lightbox popup is still used within the image selection (top right) and users can now browse through all of the images simultaneously.

The additional space gives me the freedom to discuss my production methods and shed more light on particular project aspects. The space provided on the left and right sides of each paragraph can accommodate not only pictures, but videos (should I wish).

Steve Dacombe   Digital Designer-113231

At the end of each project page is a contact form for potential fans, future clients and employers to message me (should they wish). 

Steve Dacombe   Digital Designer-113921

Additional aspects could be added to these pages, such as multiple social networking and sharing features to help spread the word on my existing and future projects. I’m proud of this development and hope it provides future visitors with a pleasurable user experience.

Feedback is greatly appreciated, so feel free to contact me via email or through the comments!

University: The Final Bow

On Friday (9th November) I attended my University graduation at Bournemouth University. This gave me a chance to catch up and celebrate with my old course mates and of course, pick up my BA degree certificate.

Last year I kept aside a bottle of Champagne given to me for my 21st birthday and placed it on a high Steven's graduation (7)shelf in my bedroom where I could very easily see it from my work desk. After some thought, I decided that this bottle of champagne would not be opened until after my graduation ceremony and I received at minimum a 2:2 for my final grade. This somewhat gave me something to work towards – The champagne represented the end of my university life and a toast to my future endeavours. So as I steadily progressed through my hectic final year of University I would look up at the bottle on my high shelf, sitting there like a time capsule waiting to be opened. After my ceremony I did of course, open the bottle of champagne and felt very relieved, even if I did already know my final grades back in July. By opening the bottle of champagne I knew that I had pushed myself and achieve what I had set out to achieve – A broader network of friends, knowledge and experience and 2:1. On that note I would like to again thank Bournemouth University for its services which did help me in times of need, but mostly to all of my fellow course mates I shared this journey with. For three years we all worked, learnt and partied together through the highs and lows, which in the end gave us an unforgettable experience. This is, as they say, the end of a chapter but the start of a new one which brings with it a ton of obstacles but even more learning, networking and skills building.

If you want to see the ceremony, check out the video below (You can find me at 44m 12 secs!)

Building the Brand

In my last post I announced a personal project I was working on, which would involve producing a range of digital artefacts, including a Flash animation/application, video and web page. As discussed, I began by sketching out a web layout, which was particularly influenced from Squarespace’s homepage. Within the website, I would like to make sure it has room to include all the individual work I am planning to produce for it. Of course, all of the work I am looking to produce must have a point and purpose, this is why I plan to create a mock brand image – A marketing campaign in which all pieces of work are related by a brand specification (which is yet to be assembled). Within this spec, a number of points need to be taken into account.

Style & Identity

As already stated; Squarespace’s brand identity is one that has really inspired me when producing a brand identity. The flow of the website and clean use of colours is an aspect that I’d like to include within the project and in terms of my brands identity. 

Build a Website - Squarespace 6-181803

Although I may not be a fashion geek or guru, I found the iPad issue of Vogue (pictured below) to be particularly interesting, due to its layout, typography and adaptive use of interactivity – functions that the paperback issue would fail to provide. This interactivity provides readers with a better user experience and has allowed advertisers to promote through a video format along with traditional print layout styles. From studying the digital issue, it could be wise to consider creating an application like it using Flash or HTML5.

Photo 17-10-2012 18 29 03Photo 17-10-2012 18 28 16

Typography

Whilst designing the site, I needed to select a clean font to be used within headings and paragraphs. To accomplish this, I browsed the Google Web Fonts archive and chose a handful of fonts to be considered:

Dosis

 

- Dosis

 

News Cycle

 

News Cycle -

 

Raleway

 

- Raleway

 

 

Open Sans

 

Open Sans

 

 

 

PT Sans Narrow

 

- PT Sans Narrow

 

 

Signika

 

Signika -

 

 

Source Sans Pro

 

- Source Sans Pro

 

 

Ubuntu

 

Ubuntu -

 

 

After testing each font in web browsers, I came to the conclusion that Open Sans appeared much clearer in bulk text whilst Ubuntu was suitable for larger headings.

Initial Web Development

With the draft layout sketched out, I began initial production of the brand website.

1

I began by creating the heading and navigation bar (pictured above in grey). Within the grey area, I’m going to insert a large landscape picture that will create an eye-catching header for the page with a transparent navigation bar hovering over it. An example of what effect could look like is pictured below (from The Great Discontent). 

The Great Discontent  TGD -203018

Next, I inserted a square div over the main header. What content goes into this square is yet undecided, but could range from large opening heading text, to a simple icon or brand logo.

2

Moving on from the heading; I began work on the initial content area. Within this area, I would hope to introduce the brand to the viewer with an opening tagline, followed by three columns listing features or pointers relating to the brand. These columns would be followed by different sections promoting the brand using different media artefacts.

5

To end this update post, pictured below is a snapshot of the site header with a large image in the header section, which gives us an insight into how the top of the site would look nearing completion. A drop shadow has been applied to give the image added depth.

7

Brand tweaks (Part 2) and Personal Projects

In a recent post, I discussed the changes my site had gone through over the last few months. In this post I will be presenting my newly designed business cards and announce of a personal project I am currently working on whilst job searching.

My previous card (pictured below), served me throughout my undergraduate study years at university. I would take this to local creative meetups such as Meetdraw and Heart and Sole. I produced these business cards towards the end of my first year at university and, although a little unsure, I knew I wanted to get my teeth into more web design. The business card at that time represented this with its large ‘WIFI’ symbol.

Photo 17-10-2012 11 08 57

Retaining the current brand image shown in part 1 of this post, the new business cards (shown below) aim to portray a friendly, professional and cleaner approach to my identity. The cards are presented as a step forward by ditching the undergraduate tagline and replaced with my specialisms and ‘designer.’

Photo 17-10-2012 11 13 58

 

Personal Projects

Graduating from University hasn’t marked an end to the hustle and bustle of my everyday working life. Whilst looking for full-time employment as a designer, I have taken up an internship at a London agency, entered design competitions, gotten increasingly familiar with Illustrator and taken a look at CreateJS for Flash. To make the most of this time I currently have whilst job searching, I have set up a new personal project that aims to familiarise and build upon my skills in new areas of expertise.

The project will include:

  • Developments in Flash (Be it a website or application).
  • Continued exploration into HTML5 and CSS3 animations.
  • A clear, approachable web design layout
  • Video production and editing
  • Photography and editing
  • Mock inDesign work

Full time employment or not; I would like to work on this project in my spare time. This would ensure that I am always kept creatively busy and (hopefully) constantly learning new production techniques.

So when does this project start? Well, it already has. Last week I sketched up a draft of the website which is suitable for a mock brand or portfolio (pictured below).

Photo 12-10-2012 12 50 15

The page design itself has been influenced by the continuity of the Squarespace website and aims to keep to include the digital artefacts already listed above (video, photography etc).

Stay tuned for future developments and screenshots of the website in production!

Flash, CreateJS and continued Agency Experience

Besides agency experience (which I’ll talk about later in this post), I have recently been getting back into using Flash by producing a banner ad for, well, myself. As discussed in my last post; lately I have been updating my brand image and although I am not considering to use the flash banner for commercial use, the project gives me the chance to exercise creativity and knowledge of Adobe Flash and additional material.

The ad is fundamentally a collation of material made in Photoshop, animated in Flash using motion tweens and opacity transitions, which kept to the brand guidelines (colour, fonts). Brief steps of production are outlined in the images below.

1. Assets are imported, placed on the stage in individual layers. Each tagline will be animated to make a ‘conveyor belt’ effect.

1

2. With the conveyor belt effect in place, a fade transition is put in place by adjusting the opacity (using keyframes).

2

3. A ‘view site’ button has been produced, with different styles representing the up, over and down hit states. 

3

4. The button image is converted to a button type, then placed onto the stage.

4

5. stop(); is placed on the last keyframe on the actions tab to avoid the animation from looping. Additionally, the code below is added to the button actions to redirect the users to the requested url.

5

The completed ad can be viewed at http://www.stevedacombe.com/promo.html

Whilst in Flash, I took time to look into CreateJS; a toolkit that converts Flash animations and games into HTML5. When I read about this, I was mindblown but at the same time not too surprised – Whilst in university, many of my fellow course mates classed HTML5 has a ‘Flash Killer’ and that if there ever was a time to jump off the Adobe Flash ship, it would be now (then).

I played around with the toolkit and tried to export my flash banner as HTML5 and although it managed to export the file to a good standard, there were quite a few limitations which remind you that this is a very early release. For example, during export, the compiler warned me that the button in my banner would not be functional as a button type; only as a movieclip. I also had compatibility issues with animations on images. But as said on the AdobeTV CreateJS introductory video, the toolkit at present is likely to only be able to export your project at a 90% successful completion rate; which basically means ‘expect errors.’ Regardless of the bugs, CreateJS is a brilliant response from Adobe and has tons of potential in the upcoming months/years to be a key player in the uprising of HTML5 technology.

Clinic London work experience

Back in September I announced that I would be spending an additional four weeks at Clinic; a creative agency based in Farringdon, London. I had previously spent four weeks working there towards my degree, so to join the team again was a pleasure. Upon arriving, I had realised that a couple of employees I had met last year had moved on to other agencies and endeavours; which was a stark reminder to me that the industry I am part of is fast and constantly changing. It was great to meet new designers, talk about what they do, why they do it – I received a greater insight into what the agency does and how they go about it. The only downside to the experience was having the long haul commutes from Bournemouth to London every Tuesday, Wednesday and Thursday. I didn’t mind it, but I’d be lying if I said the journeys didn’t drag. I managed to help out where I could within the digital and print teams on various social media campaign material for well known breakfast brand. Alongside that, was able to make mock logo designs in Illustrator for renowned transportation and advertising companies. Working with the team on live briefs was something I was very happy to be a part of and in turn has given me that all important additional commercial experience which I am very grateful for.