Gary Bacon

Sketch 39 Top Features Including Symbol Resize

Resize Layers in Groups & Symbols

“You can now define how layers within groups and Symbols should move/resize when the user resizes a group or symbol.”

This is what excited me the most about the update. I have been wanting this for a long time.

Not only can you change the label of a symbol dynamically. You can now smartly resize symbols and groups. This will save so much time in day to day design activities.

Sketch Cloud (beta)

“Introducing the first version of Sketch Cloud (Beta) — a free service that lets you upload Sketch documents and share them with the world.”

cloud-browser@2x

Solving Complex Problems & Dispelling Anxieties

How’s that for a headline? Rolls right off the tongue. Let’s dive into creating solutions, getting rid of clouded thinking, and making forward progress.

Artfully Frustrated, Again

There are times where I find myself being Artfully Frustrated, again. I have to remind myself that others experience this, it’s a sign that I’m still growing, and to push on forward.

That frustration comes from a drive to constantly be improving. As with all things in life, there is a balance. When that drive escalates to perfectionism, then it can be a problem. Dysfunctional perfectionism is at the heart of depression, anxiety, workaholism, procrastination, and suicide.

How do we change for the better? By focusing on what we do have, being thankful, expressing gratitude, and being authentic.

Authenticity & Gratitude

Authenticity is the daily practice of letting go of who we think we are supposed to be and embracing who we really are.

When we are focused so hard on expectations, even those that are imposed by our own self, it leads to anxiety.

Instead, we should trade those expectations for appreciations.

The best way to get rid of that worry is to express gratitude. The two can not coexist.

In the book Flourish, author Martin E. P. Seligman suggests keeping a gratitude journal or the Three Blessings Journal. At the end of every day write down three things that went well and why they went well.

When I worked at the Apple Store for a summer in 2010, we were trained to ask customers open-ended probing questions. It gets at the heart of why a customer is shopping and how best to meet their needs. This Forbes article paints a clear picture:

Probe politely to understand all the customer’s needs. This simply means to ask a series of closed and open-ended question so you can match the customer with the right product, not the most expensive product. In the Apple Store, a closed-ended question elicits a simple yes or no such as, “Will this be your first Mac?” An open-ended question is more general and gives the sales associate (specialist) more information to guide the conversation. For example, “What will you be using the iPad for?”

Asking why probes further and gives clarity. That’s why we do it in the gratitude journal. I’m thankful for my brother. Why? He is always there to talk with me when life seems overwhelming. Even further…Why? It’s great to have someone to talk to when you feel alone in your experience.

How to Customize Your Snapchat Snapcode

Snapchat made a pretty standard landing page for adding people. Here’s mine. It shows your username, snapcode, and a link to download the app.

As an experiment, I made a Snapchat page to promote what I’m snapping about. Turned out pretty sweet.

Snapchat Page

As you can see, I’ve customized my Snapcode. You can do this with your brand, image of yourself, favorite pet, or the theme of what you’re snapping about.

Brilliant Iteration

The wonderful thing about design concepts and patterns is that they can be reused. Whenever you hit on a core idea, it can be expanded to many different applications.

Recently, Apple has introduced Force Touch or haptic feedback into their products.

On the iPhone, as you press harder, you get a slight buzz on your finger and then a contextual menu pops open for a given app. As well as a feature called “peek and pop” that allows, on a harder press, the app to render a bubble with a contextual preview.

On the Mac, when you “click” something, the trackpad feels as if you are pushing it down, but it’s not moving. The click sound is coming from the speakers. It is tricking your brain into thinking that there was a click.

Design Workflow

Over the last year, I have made it a goal to continue to refine my design process. Iterating on design includes the process and tools as well as the art that you are creating. As a user experience and user interface designer, I have be able to work efficiently. These are the tools that I use on a day-to-day basis:

Sketch

I’ve used many programs over the years: Photoshop, Illustrator, Fireworks, etc. None really hit a sweet spot for me in terms of creating mockups, prototypes, and user interface elements. Once Adobe announced the decision to kill off Fireworks, I made the switch to Sketch. I have loved every moment of it.

The app is completely vector and Mac native. Thoughtful features include: multiple art boards, infinite canvas, retina support ( @2x, @3x ), SVG generation, OSX Versions support, etc. Highly recommended.

A Better Presentation: UX Edition

Wrapped up attending the ModevUX Conference today. One thing I always notice during keynotes is that presentations could be improved. No matter what the conference, these principles can be applied and are usually warranted.

Bad Presentation

One of the biggest points, that I can’t stress enough is put all key information towards the top of the slide. This includes: links, twitter handles, key concepts etc.

New Awesome Bar in Google’s Chrome Canary

In Google’s Chrome Canary the awesome bar has been tweaked. Not a fan of the interface adjustment. From the perspective of a search engine, it makes sense. However, from the perspective of the user it is a bit more confusing.

Screen Shot 2014-04-30 at 10.17.21 AM

Once the page has loaded, the URL is now in grey on the left hand side and the user can search on the right hand side. This reminds me of old versions of Safari but with a twist.

Localized Product Designs: LG Microwaves

Inspired by a Pogo video, I researched the microwave displayed, and what I found was varying products depending on the geographic region.

American Microwave

The product geared towards Americans, a microwave / oven combination. Now you too can warm up pizzas, frozen foods, and biscuits. Talk about stereotypical fattening American cuisine. Leaves one wanting something to actually help you cook. Perhaps the goal was to focus on “heating”.
LG 1.1 cu. ft. Countertop Microwave Oven with Baking Oven
It even has an “Auto Pizza Mode” that “… automatically adjusts cooking times for fresh or frozen pizzas in addition to various baking treats and frozen foods.”

Responsive Design Warrants a Change in Workflow

Change the Workflow

Responsive design warrants a change in design workflow. The days of slapping together a Photoshop comp, getting it approved, and then coding are over.

This is is a waste of time.

There are too many hurdles and platforms to test. Things need to be flexible. Setting a design in stone as “final” is too limiting with so many devices to support.

Icons as Fonts for Responsive Design

Icon Fonts for Retina Ready Responsive Design

In Responsive Design, one uses Media Queries in the CSS to rearrange elements on the page to flow irregardless of what the device may be.

As we touched on before, you can use Media Queries to check if the screen is a Retina display, and if so replace an image with one that is double the size so that it remains crisp. Using an icon font, there is no need.