The Format

My attention span isn’t the greatest in lecture type situations but thankfully Sarah organised the workshop into a intensive mix of both practical and theory. Whilst working through a practical brief in small teams, we were presented with short talks on specific topics throughout the day. This kind of format was ideal for me as it was enough to keep my attention and allow me to apply that information into the brief.

At the end of the day we were able to present our App idea to the group which was fun. It was great to see how everyone interpreted the different project briefs.

The Attendees

As is always the case with these types of events, you make up 50% of the content. What I mean is that it’s important to throw yourself into these events headfirst and contribute as much as you can whilst at the same time listening to those around you and ask plenty of questions. This particular workshop was filled with a mix of high calibre designers, programmers and those new to iOS design so it was a great opportunity to find out how others in our industry work, challenges they’ve faced and solutions they’d found.

The Tutor

Sarah knows the iOS design game inside out and back to front. I already knew she’d scooped a .net design award last year so this was a great opportunity to learn from the best in town. As I mentioned previously, the format of the workshop was perfect (for me) and a great deal of preparation had gone into making this a great day. Questions were encouraged (and always answered) and I left feeling enriched – which was the objective!

9 year old Caine Monroy, who built an elaborate cardboard arcade inside his dad’s used auto parts store, is about to have the best day of his life.

Caine is my hero. What a brilliant kid and a well made video.

Source: http://cainesarcade.com/

From Google:

We think technology should work for you—to be there when you need it and get out of your way when you don’t.

A group of us from Google[x] started Project Glass to build this kind of technology, one that helps you explore and share your world, putting you back in the moment. We’re sharing this information now because we want to start a conversation and learn from your valuable input. So we took a few design photos to show what this technology could look like and created a video to demonstrate what it might enable you to do.

Please follow along as we share some of our ideas and stories. We’d love to hear yours, too. What would you like to see from Project Glass?

Read more about the project here: https://plus.google.com/111626127367496192147/posts

The Idea

An app that makes use of the Google Translate API which has pretty much the same functionality as the current Google Translate App but using a slightly different flow and visual design.

These are just rough ideas at the moment. I’ll upload more ideas as I go.

I’d like the visual design and art direction to have a 1960s feel and I’ve used the 1957 GE P-715 Coatpocket Transistor Radio as inspiration.

I recently wrote about transitions and their importance within interface design. The article talked about the ways that transitions are used within many areas of design including product design, automotive and application design.

I discussed a little about how the use of transitions within the browser in desktop environments was a little thin on the ground and this can be attributed to a number of reasons. The processing power and screen resolutions in desktop environments can vary quite considerably as can the users preferred operating system and browser. For these reasons, implementing any type of JavaScript or CSS type animation to be used as a transition can be a challenge and can produce varying results.

Good examples of desktop, browser transitions can be still be found and I can see that as our experience of well designed interfaces in mobile apps increases, as will our demand for slicker interfaces inside desktop browsers.

Examples of transitions inside the browser, on the desktop

I’ve no idea how, and on what type of device you are reading this post but it’s my intention that you view the examples below on your desktop PC. The main point I wanted to make in my previous article was:

When designing an application, an interface or any type of structured content, we must ensure that users understand where they have come from as they arrive at the new page or state.

Although the examples below are not perfect in my opinion, they do a good shop of demonstrating the principals mentioned above.

Cultural Solutions UK

YEBO Creative

Campaign Monitor is Hiring

Head2Heart

I would really like to know if you have come across any other good examples of transitions (especially in the browser, on the desktop) so please do let me know by commenting below. In the meantime, here is some further reading:

• jQuery.ScrollTo by Ariel Flesler
• Mission Transition – Smashing Magazine
• Meaningful Transitions – Motion Graphics in the User Interface
• Animations in User Interface Design: Essential Nutrient Instead of Eye Candy
• CSS Easing Animation Tool
• How to Use jQuery to Make Slick Page Transitions

Wilson Miner – When We Build

We shape our tools and our tools shape us.” As more of the tools we live with every day become digital instead of physical, our opportunity – and responsibility – as designers is multiplying. We live in a world of screens, and we are the ones who decide what goes on them. We are in a unique position to have an impact – one that lasts longer than the next redesign or the latest technology. What happens when we stop thinking of ourselves not just as developers or experience designers, and take up the mantle as a new generation of product designers for a digital world?

Robbie Manson: The Mindful Designer

We face a challenge: to ensure our design responses are informed more by our thinking than the tools we use. Absorbed by day-to-day execution, we can forget the importance of mistakes and accidents — of balancing intent with experimentation. Failure is valuable, provided we’re mindful of why. Embrace the unpredictable nature of everything, and stay mindful. It’s how we lace our actions with meaning.

As we rapidly move forward with the way we access and create content on a number of devices and in a number of different ways, these icons become even less relevant but somehow we just know what they mean. Any attempt to re-design them to bring them up-to-date only causes confusion for the user but how do we explain in hundreds of years time what these icons actually mean and why they are used – it’s hard enough now.

Search

The magnifying glass is commonly used in user interface design to represent search, unless of course you are working with design software and in that case its used as a tool to let you look more closely at something.

Find

This icon is often used to represent the ‘Find’ action when searching for a word or term within a page.

Telephone

Ok, look around you right now at this very moment for a telephone – Does it look like this?

Record Sound

When was the last time you used a standalone microphone to record a sound and did it look like this?

Choose Colour

Not quite so common but still used as an icon to represent choosing a colour. Last time you used one of these was at art college.

Announce

Have you ever used a loudspeaker to make an announcement?

Movie

We know film strips are still used at the cinema but you never see it.

Television

Televisions don’t look like this anymore but it’s still widely recognised.

Think of the kids

There will come a time when we will need to explain ourselves to our children and our children’s children as to why we use these icons. When home computers were becoming more widely used and graphical user interfaces were introduced, icons had to be designed for a different generation of user and it was this generation of user that had no starting point except for the actual representation of that icon. I can only imagine that when we come to the ‘Search’, ‘Find’ and ‘Zoom’ argument that explanations will be thin on the ground.

Thanks Glyphish (for the icons).

Only used 1 pen too.

Before I share the details of my journey, I’d like to add that the two books mentioned above were annoyingly good. Annoying in the fact that after reading each page I had to put the book down and try out what I’d just read.

The Objective

I was getting tired of my old site. There was content and functionality on there that I didn’t like and my analytics suggested that users were not finding certain things useful either. As well as the obvious responsivness, I wanted to:

• Reduce HTTP requests
• Simplify core colour palette to use a single green colour and black
• Develop stronger visual identity
• Improve typographical hierarchy
• Reduce portfolio items to better demonstrate my competencies and skills
• Start to use HTML5 markup standards
• Improve mobile and tablet usabilty

Reducing HTTP requests

My old site had a bunch of plugins activated so I culled all but the ones that I really thought were essential. I was happy to see jQuery Colorbox go as it added a huge chunk of code to each of my pages and I didn’t feel that the functionality was needed any longer for my responsive site. I just removed image dimensions throughout and used:

img {
width: 100%;
height: 100%;
}

The CSS above allows my images to scale depending on the users screen resolution.

I also removed a lot of the single image files that were used in my CSS and combined to create sprites e.g. the icons I use for my social links are actually one file and the CSS positions it accordingly.

Sprite:

CSS example:

.social-linkedin a {
float:left;
display:block;
width: 36px;
height: 36px;
margin-right:8px;
padding:0px;
text-decoration: none;
background-image: url(images/social-sprites.png);
background-repeat: no-repeat;
background-position: -141px 0;
-moz-transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
opacity:0.6;
filter:alpha(opacity=60);
}

So you’ll notice that the class above will only show the LinkedIn icon due to the overall width and height and the background position of the image. My CSS uses a different class for each icon but each time the same ‘social-sprites.png’ is used.

For my existing video content I added the following CSS (found here):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I then wrapped my video embed code like this:
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

By deactivating lots of my previous plugins I’ve also managed to limit the number of CSS files used in my site. I can still reduce this down to one single file but at the moment, the plugin that creates my page numbers (on my blog list page and search results) also uses another CSS file.

I also removed lots of content from the sidebar (Facebook widget, generic text, blog categories) which has helped to removed page bloat.

Core colour palette and visual identity

My old site used multiple shades of green and I didn’t feel it was working very well. I’d also introduced a third purple colour but wasn’t happy with that.

For the new design I limited myself to a single green colour value (#6ECF50) and then solid black. This helped me create a stronger visual identity and also added more contrast which was one of my other objectives. My old site used more washed out greens and was a bit inconsistent.

I used the same colour values for my logo re-design and I wanted to create a logo that worked well as a central asset and was high contrast.

Improve typographical hierarchy

I’m a big fan of Typekit and I use their font service for my custom fonts. My H1 and H2 tag use League Gothic. I use H1 for all my page headings and H2 for sub headings. Any other heading that gets used in a page is simple wrapped with a tag. My body text is set at 14px and uses a font family or Helvetica, Arial, Lucida Grand and then sans-serif. I set the body text to a very dark grey (#333333) rather than black to help with readability – I just feel it reads better than using a solid black). I use a larger font for the date (18px) and lighter shade of grey again (#666666) to maintain the content hierarchy. For links I use my same green value (#6ECF50). By simplifying my font styles I hoped to meet the objective of improving my typographical hierarchy.