Part 3 of 5: How to Design a Fantastic Online Experience – (Design Techniques)


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!

With two separate businesses, Kelly and Andra both had successful small enterprises on their own. Despite both being introverts, they both knew they wanted to add a member to their team by having a joint venture. After some brainstorming, and evaluating their skill sets, a new design and branding company, With Grace and Gold, was founded […]

Read More

Creative Connections: Showit Designers, With Grace and Gold

The Alexandria is a gorgeous and sophisticated template that will showcase your work in a very elegant fashion. Website design by Gillian Sarah. View The Alexandria View all designs by Gillian Sarah

Read More

The Alexandria by Gillian Sarah

Baileyana Rose is now available FREE inside of Showit thanks to Design Partner Digital Grace Design! Baileyana Rose is a classic and refined template perfect for a light and airy, fine art photographer or feminine event planner.  This Showit template is easily customizable to fit your brand, and includes: • 5 main site pages • […]

Read More

Free Website Design: Baileyana Rose by Digital Grace Design

Learn more about Showit

CHoose a design to Start with

Brand your business like nobody's business with the drag-and-drop website builder made for creatives like you. 

No thanks

     Watch the Free webinar