Design

How the mobile web will rule the world.

Nowadays to make a purchase all you need to do is reach into your pocket and load up any website. You carry a shopping mall with you all day, that is why a responsive website with an e-commerce solution is of paramount importance.

Here’s an infographic with important statistics about the usage of Mobile Web and Mobile E-commerce in 2013.

Drupal Ecommerce Infographic

 

If you use Sketch you know about the abundance of tools and resources available to help improve your design. In this article, I'm going to show you how to set up your document and get it ready for the design hand off.

 

Plugins and Resources:

First things first, gather the necessary tools for your design. One of my favorite things about Sketch is the open source mentality when it comes to plugins and resources, designers and developers can share innovative ways to improve your design workflow.

 

Design is a process. It involves many people, skills, programs, and timelines. To help you get a better idea of our design process, I came up with this overview, which begins with the initial meeting and ends with handing off the designs to the development team.  

Icons representing - Pow-Wow, Sketch, Invision, Development

Sketch is a powerful tool, and it has a ton of cool shortcuts to make it super efficient. Here are a few of my favorite ones.

Hold ⌘ while hovering over items

Quickly select objects from the Artboard with just one click.

Gif demonstrating command key and hover shortcut

 

TAB

Move down the layer list.

TAB + SHIFT

Move up hold Shift and press Tab.

Movement and interactivity improves user experience, making sites and apps more engaging and memorable. 

Currently I'm using Sketch to create mockups, and presenting them to clients and developers via Invision. Both of these tools work seamlessly together and are great at presenting ideas clearly. However, animation is still to be introduced on those apps. I decided to try out Framer which happens to work well with sketch. 

Hero background videos

They are pretty much everywhere, but who can blame them. Video backgrounds add a beautiful depth to a website, however, they can be a bit distracting if added as a second thought. A well-balanced page will leverage the visual interest of a video by giving it purpose. Invision is a great example of a video background done right. The video is beautifully integrated with the site and if you choose to watch it, it seamlessly allows you to get a closer look at their work.

BPG stands for Better Portable Graphics. BPG is a new image format that delivers amazing quality, and a smaller file size.

Should JPG be scared out of its boots?

Probably not yet. But French programmer Fabric Bellard, who created the BPG files, sure hopes so.

The proof is in the pudding:

JPG comparison BPG 1

The Good:

In design, empathy is one of the most powerful tools. When used correctly it can create some outstanding work. Understanding how others see, feel, and experience something is key to great design.

Research* proves that the ability to receive and process information is heightened when we are empathetic. This form of thinking causes measurable changes in our cognitive style.

How the heck do you tap into that?

Simple… put yourself in their shoes.

People remember things in different ways. For me, writing something down and making it somewhat of an interesting visual mess really works.

Here are some of my sketchnotes on a few Drupal Sessions 

Battle for the Body Field by Jeff Eaton

sketchnote

Subscribe to Design