If you missed it, we wrote Part II of this series and you can learn all about the strategy to setup the best User Experience >here<.

This time, we are going to look at some Design Technique.

Design Techniques & When to Use Them

Wireframes, mock-ups, responsive design, mobile first design. All of these are different steps and types of approaching an User Experience. Sometimes it's clear when to dive into each of these, but sometimes it can be a waste of resources to do just one or all of them. Here is a guide to the basics of each one, and when you should be using them.

• Wireframes – These are very basic backbone of the design and are less formal than a mock-up. It communicates the main groups of content, structure, and basic visualization of interactions. For most people this isn't really necessary unless you are just jotting things in a notebook. The times you want to use wireframes would be:
  • In a huge, complex project or multiple brands that have a close deadline.
  • In a small project with a very limited budget where you want to communicate your thoughts effectively to a designer.

• Mock-ups – There is a general misunderstanding when it comes to mock-ups. Where wireframes are “sketches” of your site, true mock-ups tend to be almost a final static version of the site. Often times they will be built in Photoshop and show the visual representation of the design with no links, transitions or interactivity. The times you want to use mock-ups would be:
  • Get feedback for the visual style you want to portray.
  • Have a designer translate your finished design into a functional website to save money, (usually on their hourly rate).

• Responsive Design – This means something different for Showiteers. Responsive design to the rest of the design industry is focused on “break points” and not so responsive design. With Showit, the power to scale images and your entire site design is incredible and you don't have to do a thing. There are a couple of things you want to keep in mind when using this in Showit:
  • Use Layer locking to keep elements on the part of the page you want them to be on.
  • When locking static galleries, be aware that images won't stretch, but will crop. Don't be using that vertical image that “just fits” in a horizontal gallery and expect it to be responsive. Take the time to crop and size your images. (Tip: best sizing for Showit is 2000px on the long side of the image.)

• Mobile First – This strategy isn't for everyone, but has it's roots in the very real trend we see of users moving to mobile. All this means is instead of building a desktop site first, we start with a mobile site and ADD elements to expand the design to desktop. Otherwise you end up taking a beautiful desktop design and chopping it down to “fit” for mobile. Remember, if your mobile site has all the same content your desktop site has, it won't be very effective and may turn people away. Mobile should be a paired down version of well curated and planned material for those specific visitors. Times to use mobile first design:
  • Over 50% of your users visit your site via a mobile device.
  • You want to optimize the flow of your site specifically for mobile users.

Next time we will look at some Standards of Design. Have you used any of these design techniques before? If so, we would love to see what came from it, and how you used it in the process, so make sure to share a link or comment below!

Jason Toevs

Jason Toevs is the owner of 2BlokesDesign, a custom design firm in Kansas. When he isn't playing with his cats, gardening, or chasing the chickens away for his wife Shelbie, he is focused on gathering, testing and exploring the world to help you find the best online experience for your clients. As a Showit Design Partner & Editor for Showiteer.com he loves celebrating with photographers as their websites become more of who they are as they grow & evolve in their business! Meow.