A blog sharing resources and inspiration for designers

  • Jul 24 / 2013
  • 0
skuo
Web Design

Skeuomorphism – What is it & does it work?

header

Skeuomorphism is the term used to describe objects that emulate another material or a real world object, in the design industry it’s often referring to interfaces which use things like textures, shadows and effects to make digital things look real.

A perfect example of this is Apple’s notes app which looks like yellow lined paper, people recognise it as a notepad and use it the same as they would in the real world. Using this metaphor in design is getting met with both love and hate, people are turning against it as the trend is starting to get old but there are some which value its use.

notes

I think there’s a place for it in design but it has to be thought about and treated well. The reason I would use skeuomorphism in my work would be to help the user feel more comfortable with my product because it would appear more familiar to them. A button that looks like something you can actually press may scream “Oh, that’s what I’m meant to click on” but may not be the best looking solution. A toggle to turn something on/off can use skeuomorphism to help indicate that the object can be moved similar to a light switch, but doesn’t have to go as far as imitating it exactly. The example below shows how you could treat a toggle without, with, and a hybrid of skeuomorphism.

tabs

 

If you look at most digital magazines and books available now you’ll see that the designer has translated a print piece into the digital format instead of taking the medium and doing something that is appropriate and engaging. Why should we be limited to traditional thinking when it comes to these things? We should be pushing for solutions which enhance the whole experience of reading, get rid of those annoying page flips and add some seemless scrolling.

In saying that, we also need to be careful that we don’t use interactivity for the sake of it, at the end of the day the content is what it’s all about so we shouldn’t let the chrome (the graphical framework and elements surrounding the content) get in the way. Make it more about what you want to do instead of what device you’re currently using.

There are also technical implications of using skeuomorphism in your designs which may negatively impact the usability of your app/site. Adding textures, shadows, text effects, reflections and any other bits of detail which makes something look more realistic adds filesize in most cases, and also makes it take longer for the device to render. A few seconds of loading time in this day and age can loose you an audience, with everything in the world becoming more and more immediate the average attention span is getting smaller and smaller. There are studies that state how little you actually have to capture people’s attention online.

Apple has been a massive trend setter for using skeuomorphism in their designs, Steve Jobs was allegedly a big fan of it and you can see countless examples in their current interfaces. The company seems to be cutting their ties with this trend and moving toward a flatter and more functional look, this is probably due to Jony Ives who wasn’t a fan of it.

apple

The upcoming release of iOS7 is a great example of this, they have ditched all those shiny buttons and replaced them with flat elements.

iphone

 

People aren’t completely stupid, digital has been around long enough for most people to have learnt what a button is. If they can’t figure it out then it’s probably not even their fault, you should look at the UX to make sure everything is in a logical position. A button should be easily recognised as a button no matter how it’s styled.

 

 

  • Jul 17 / 2013
  • 1
freebie_thumb
Freebies, Resources

Freebie – Motivational wallpaper

motivation_wallpaper

‘Train like an athlete, Eat like a nutritionist, Sleep like a baby, Win like a champion.’ – I’ve always been a fan of this saying so I decided to turn it into a wallpaper for my phone to act as extra motivation to head to the gym. This wallpaper is free to download for iPhone 4, iPhone 4s, and  the iPhone 5, if you want it on a different device just let me know the dimensions in the comments section below and I’ll create it for you.

 

  • Jul 10 / 2013
  • 2
learn_to_code
Designer Tips, Web Design

Designer Tip – Learn to code

learn_code

The way digital designers work is constantly evolving, photoshop is not enough anymore. Gone are the days where we can just design a beautiful psd file and hand it over to the developers to build, there are so many things which need to be considered and tested when working on a digital project that it requires designers to think beyond the flat image.

One thing that has always helped me understand how the web works is to have a basic understanding of code. My knowledge isn’t too advanced, I can do simple html/CSS and used to be able to get some mad particle animations going using actionscript, but it’s always helped me when designing to know how that element will be built. At the very least I think designers should know how to create a basic html site, in my current role I have to work with html to create prototypes, emails and updating things like preview sites for clients.

Tip – When browsing the internet try right clicking on any element and selecting ‘inspect element’, this will bring up the code for the site which you can play around with. This will help you understand how everything is put together.

You might have also heard the of term ‘designing in browser’ lately, which basically suggests that photoshop many not even be essential for layouts anymore. The designer will create their design elements in html and work out how to set the positions and styles themselves before passing onto the developers. There are good arguments for and against this method which I’ll touch on in another post, but I do know this is already happening in the industry which is evidence that you need to learn how to do some basic code.

Everyone has their own way of learning so I’ll leave it up to you how to go about doing so. I personally learn by doing and jumping in the deep end, I try and code my personal sites and when I run into a problem I just google it. There are many online tutorials and websites dedicated to teaching others, there are even online courses you can do. If you want somewhere to start, try googling introduction to html, there are so many resources out there to pick from.

  • Jul 03 / 2013
  • 1
clickable_proto
Resources, Tutorial, Web Design

How and why to make a clickable prototype

proto

When I say clickable prototype I’m talking about a series of flat pages/designs which have basic functionality to let you click through to each page.

When I was first asked to create a clickable prototype I was totally against it, I didn’t want to waste the time which I was allocated for design on creating this clickable HTML file which I didn’t think was even necessary. I’ve since been proven very wrong, I now see a clickable prototypes as an essential tool in the design process to inform the design, help the client understand how the site will work, assist the developers is knowing how you picture the site working, and filling any holes that exist.

There have been countless times that you design a site and then towards the end of the project you realise there are pages which haven’t been created yet, developers will ask ‘where is the Terms page?‘, ‘what does this pop-up look like?‘, so many little elements that you sometimes skip over in design. The prototype helps fix this by showing you exactly what hasn’t been designed yet so you can address it earlier and do it properly instead of rushing to finish those pages in the little remaining time that you have.

To put it simply, the process that I’ve been following has been this:

  1. Clickable wireframes
  2. Look and feel/clickable designs
  3. Development

The first clickable prototype would include wireframes of the site. A wireframe is simply a blueprint of the website, it’s a visual guide (usually black and white) that represents the framework of the website and the hierarchy of content. Here’s an example of a wireframe:

wireferame1

After the wireframes have been approved we move on to design. There’s an initial mood-board and experimental stage when you create your look and feel for the site and work with some typography, buttons styles, colours etc to get a basic style created. I’ll create another post detailing my methods for this soon. Once you have a sweet direction created, you start to design the pages of the website. At the start you won’t have all of the pages designed, but it’s still valuable to update the prototype with your designs.

At this stage the prototype might have one homepage design, and two remaining pages still in wireframe stage:

design-wireframes

Having your design in the prototype lets you check that all the buttons are there, all the things like pop-ups & footer links which are often overlooked actually exist and are in an accessible position, and that everything is consistent across different pages. Showing the client at this stage also helps them understand the progress and even allows approval page by page which makes the whole process run smoother and quicker.

Creating the clickable prototype

Step 1 – Save all your wireframes/designs as flat images

Make sure these image files can be viewed online, I usually just use png or jpg files since they are pretty universal and can be seen on most devices. Save them all into a folder and name them properly so you can easily find what you’re looking for, when you start working with more complicated sites the file naming becomes very essential.

Step 2 – Create a HTML document for the first page

I use dreamweaver for this step but feel free to use whatever program you prefer, I find dreamweaver to be easy and quick for what we need to do here. Create a blank HTML file.

tutorial_1

Step 3 – Insert the image file for that page

tutorial_0

Step 4 – Create the Title of the page

There is box called ‘Title’ which appears at the top of the program, click on the input box and change it from Untitled Document to the name of the page, for example ‘Website – Home’.

tutorial_2

Step 5 – Set the margins to 0

We want to set the margins to 0 so there’s no space around the edges of the page, this helps show the most realistic view of how the site will look once built.

Right click on the page and select page properties, enter 0 pixels into all the margin boxes for top, left, right, bottom.

tutorial_3

Step 6 – Save your work

Save the page with a corresponding filename. At this stage you should have a folder structure like this if we’ve set up the home page:

  • index.html
  • website_home.jpg
  • website_about.jpg
  • website_contact.jpg

TIP – Name the homepage of your site as ‘index’, when someone enters the main directory of the URL without having a specific page in the URL, the web browser automatically points you to the index page. This is helpful so you can simply tell people to goto your main URL like halaska.com.au instead of halaska.com.au/my_website_homepage.html

Step 7 – Set up the Hotspot links

In Dreamweaver click once on the image, this should bring up the image properties box. Select the rectangle hotspot tool from the Properties panel and then draw a box around your navigation button or whatever element you want to link up.

tutorial_5

Enter the link to the page you wish the hotspot to goto, we are going to link our a page called website_about.html.

tutorial_6

Leave the Target field empty unless you want the link to open in a new page within the web browser. You would only really want to do this if you are linking to an external Terms and conditions page or if you have another link which goes somewhere like youtube etc. The main focus should be to keep the user on your page, but if you do want it to go externally you can select ‘_blank’ from the dropdown.

tutorial_7

Repeat the above steps for every other element on the page which you want to link up. The things I usually link up are the navigation, footer links, text links, buttons, and images if need be.

tutorial_8

Step 8 – Set up the remaining pages

You could manually set up every page like above, but if your pages use a similar layout it’s usually beneficial to just duplicate the HTML page you just created and rename it. In our example we are renaming the file to website_about.html. Open the page up in Dreamweaver and click on the image, a ‘SRC’ field will show the location of the image in the Properties panel, change the value to be ‘website_about.jpg’ instead of ‘website_home.jpg’.

tutorial_9

Update the page title and move the hotspots around to match the positioning of those elements on your page if needed. To do this just click on the hotspot, make sure the ‘Pointer hotspot tool’ is selected in the properties panel and then drag the boxes around to the new positions.

Click on each hotspot and update any links that need to change, for example since we are on the About page, we would need to set up a hotspot to take us back to the home page.

TIP – You can select multiple hotspots and then copy and paste them onto other images in other pages, this is helpful down the track when you may change something like the navigation menu and want to quickly apply it to multiple pages.

Step 9 – Test it

Open the home page up in your internet browser and test, test test. This is the time when you realise ‘oh crap, I forgot to design the pop-up for that link’, ‘Why do I have a back button on the homepage if it takes me no-where?’ or ‘where does this button take me? There’s no content created yet…we need to chase that up‘.

Step 10 – Upload it

You can upload the site files to either an internal or external server via FTP for review. You can either set up some sort of preview environment or just link to the specific page. For example I’ve uploaded my files to halaska.com.au/tutorials/clickable-prototype/

This link can be shared with client or just the internal team for them to review and see the progress as you go.

Step 11 – Updating it

If you’re just updating an existing page all you have to do is save over the existing image in the folder and then update any links/positions that might have change in the hotspots.

If you’re creating new pages just follow the same process as I went through above. If you’re deleting pages just remove them from the folder. When you add/remove pages make sure that you update all the links throughout every page so there are no dead links.

Make sure you version control your prototype before making any changes. The easiest way to do this would be to duplicate the whole folder and add a ‘v2′ or date to the folder name on your local machine. When uploading to the server you should just replace the items in the main folder so the preview link doesn’t change.

Step 12 – Test it again

 

Hopefully this tutorial has helped understand how to create a basic clickable prototype for your website. What happens after the prototype is approved will depend on how you’re getting it developed, bot nonetheless it’s going to help you design a website with a thought-out user experience and that will help the developers understand how it works. It’s also great for showing the team/client progress as you go.

I’ll post a follow-up tutorial on how to make a responsive clickable prototype soon, it sounds a lot harder than it actually is, so stay tuned!

 

  • Jul 01 / 2013
  • 0
hungry
Inspiration

Stay Hungry

hungry

I’ve just arrived back in Sydney after a weekend trip away to QLD, one of my work-mates was competing in a Brazilian Jiu Jitsu competition and I went along to support and see what it’s all about. It was great to get out of Sydney and get away from the recurring schedule that life turns into, but most importantly I took away from this trip the drive to commit and improve at certain aspects of life.

 

All the BJJ (brazilian jiu jitsu) crew that I was introduced to were incredibly committed and focused on their art, but still realised the importance of having a work/life balance and enjoying themselves. There is an underlying drive in all of them which is to be the best at what they enjoy, which in this case is BJJ, and which in turn makes them incredibly happy.

 

I found it similar to how I feel about design, I love doing it and want to become as good as I can at it. As a designer you like to try and improve, or at least you like to think you do, so seeing the determination and passion that all these guys/girls in BJJ have has made me hungrier than ever to be better, the best, and to enjoy it a hell of a lot more.

 

The moral of the story…STAY HUNGRY!

 

And a massive well done to my mate Miter for winning two gold medals, and Kit for his massive stash of them too. Ossssssss.