UI

16Jan

2017 UX Roundup

This post started off as an email to my team that I thought might have some useful content for other UX folks. This here is a collection of articles, webinars, tools, and other thingies that I encountered over the year that I think are worth sharing, with some inspiring quotes sprinkled in along the way.

Articles and Video

Have no fear of perfection, you’ll never reach it.
– Salvador Dali

Interesting read about how to prepare for the next stage of UX

READ: https://www.fastcodesign.com/90135223/the-golden-age-of-ux-wont-last-heres-how-to-prepare-for-whats-next 

Notes from article:

• Don’t just understand users, understand the business
• Think product strategy (understand the totality of the product you are designing for)
• Understand how UX affects growth

Instead of thinking outside of the box, get rid of the box

-Deepak Chopra

Video webinar from Jonathan Wheeler, Sr. UX guy from Oppenheimer

WATCH: https://www.invisionapp.com/webinars/ux-leadership-everyone-designs

Main takeaway from video:

  • Don’t be a gatekeeper pf design, be a design facilitator

The above video was from the great webinar series from InVision called Design Talks that has over 60 videos thus far covering topics such as UX Leadership, design systems, and user research

WATCH: https://www.invisionapp.com/webinars

A person who never made a mistake never tried anything new

- Albert Einstein

State of UX in 2018: UXdesign.cc

This list does a pretty thorough job of going over the field
READ: https://trends.uxdesign.cc/

Notes:

• “UX Designer” as a title is starting to differentiate; some people are specializing in UX for specific domains, while some are morphing into Product Designers, the new generalists.
• UX is moving beyond the traditional screen and must learn to accommodate new technologies and ways of interacting
• Understanding the complete diversity of your users is becoming more important the more diverse people become (interesting examples are software systems that assume Asian eyes are closed)
• Storytelling will only become more and more ubiquitous; UX and copywriters will collaborate more
• Branding is more than just a logo; how can a brand be expressed throughout an experience?
• AI is now a real thing (Amazon Echo, Google Dot, etc.); How will we design for it?

Anyone who influences what the design becomes is the designer. This includes
developers, PMs, even corporate legal. All the designers.


- Jared Spool

More trends for 2018

https://theblog.adobe.com/10-ux-design-predictions-for-2018/
https://blog.prototypr.io/heres-where-ux-is-going-in-2018-top-7-design-trends-d0cb73e51b45
https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6

Quote I most identify with:

“I really hope 2018 is the year designers commit to designing with accessibility in mind. 
We need to stop using ultra light grays for essential elements, we need to stop animating 
every single pixel just because it looks nice, and we need to stop making it harder on people 
to understand the content of a page only because we want to prove ourselves as designers.”
— Hubert Florin, Product Designer at Slack; me too, dude, me too

UX podcast: High Resolution

This series has 25 interviews with industry leaders from companies like AirBnB, Uber, Facebook and Slack. You can watch them as videos or listen to them as podcasts.

WATCH or LISTEN: https://www.highresolution.design/

User Research webinars from Usertesting.com:

A ton of content here with a focus on user research and testing

WATCH: https://www.usertesting.com/resources/webinars/

Online UX conferences from UXPin:

UXPin had some great free online conferences in 2017 that you can access as videos.

WATCH: https://www.uxpin.com/studio/webinars/

Tools

Most of the tools I used in 2017 I have been using for years but I did pick up a few new ones.

Note taking and collecting: Milanote

This is a cloud-based tools for collecting notes, inspiration, links, images, and it allows you to organize them into boards. I have a board where I store interesting articles and links and one where I add images and examples of good design that I use as an old-school morgue file.

The tool has free and paid accounts and is definitely worth checking out.

CHECK IT OUT: https://www.milanote.com/

InVision: Boards

I’ve been using InVision for several years now but 2017 was the year I really started using Boards. I probably use this feature a bit different than intended. I have a board that I use as a morgue, which is an old-school term for a collection of inspiration. Another board is literally dozens of ebooks that I have collected. Putting these files on a board makes it easy to share them with the whole team. I use boards for large scale projects to store mocks, zips of assets, palettes, and specs. I also have boards that are filled with terms and their definitions, organized by category (such as Psychological concepts, Design Principles, and Quotes).

InVision has free and paid accounts and is a great tool that is about to launch a bunch of possibly groundbreaking features in 2018.

SIGN UP HERE: https://www.invisionapp.com

SnagIt: Update for MAC!!

SnagIt is a screen capture tool that has been an absolutely essential part of my workflow for YEARS. Unfortunately, the MAC version has been stuck in time while the PC version was much more full-featured. Well, 2017 brought us MAC users a real upgrade!!!! And this is such a cheap tool that upgrading is a no brainer. I use this tool to take quick screen grabs but also to make short videos that explain interactions or to show how an interaction works on another site.

LEARN MORE: https://discover.techsmith.com/snagit-brand-desktop-new-label/?gclid=Cj0KCQiAp8fSBRCUARIsABPL6JZ_yGEvSPTcybYWsoldn9DKE3rwtoXhBgnPNF1yFLAkSMCYepuXc1saAldtEALw_wcB

31Oct

From Fireworks to Sketch: Getting your Fireworks vectors into Sketch

So anyone who knows me as a designer knows that I have a very strong love for Fireworks as a UI tool. I started using it back in version 2, in the nineties, and it is the primary tool that I have used in my career for designing user interfaces and graphic elements. I have never understood the love for Photoshop as a UI tool. Every time I have tried to accomplish a UI task in Photoshop, it took way too long, if it could be accomplished properly at all. I am a firm believer in designing in vectors and in using the right tool for the job. I love Photoshop, but for editing photos. Photography is a hobby of mine and Lightroom and Photoshop are absolutely essential to my photographic process. But for web design and UI work, Fireworks has always been number one, with Illustrator for more complex vectors and certain other tasks.

When Adobe announced they were not going to keep updating Fireworks, I was one of the folks that died a little inside that day. I had been singing the praises of this tool for years and now it was being taken away from me, with no viable replacement in sight. Then Sketch came around. I bought the first version but never really used it. Fireworks still worked fine and I didn’t see a reason to switch yet. Now it’s almost 2016 and I am seeing the bugs starting to affect my team. The other UI designer on my team at work cannot even get Fireworks to open on her system, so she can’t open any of my layered png files. I refuse to use Illustrator as a UI tool so that meant it was time to move on. Sketch 3.4 is now on both of our systems. Now the fun begins-matching up the features and functionality of Fireworks versus Sketch.

Surprisingly, I can find little info on the web to help Fireworks users transition to Sketch, so that is why I am doing this series. Giant issue number one: your Fireworks files will not open in Sketch as layered vectors. This is a huge issue. Folks like me who have been using Fireworks for 15+ years have hundreds to thousands of files that we can not open, except in Fireworks. How do I get my Fireworks vectors into Sketch?

Don’t try copy and pasting-they will come in as bitmaps. Don’t try saving as .ai, not if you want to open them directly in Sketch. You have to open them in Illustrator first and then save as .eps, then open in Sketch. I found a simpler process.

My process for converting Fireworks vectors into Sketch

  1. Open Fireworks, Illustrator, and Sketch. If you don’t have Illustrator, well, phooey, who doesn’t have Creative Cloud at this point? Try one of the other vector programs.
  2. Open your file in Fireworks.
  3. Select your vectors and go to Edit > Copy as vectors.
  4. Paste the vectors into Illustrator; with the vectors still selected, copy them from Illustrator.
  5. Now paste them into Sketch. They come over as perfect vectors.

One of the cool things about Sketch is the infinite canvas. I was able to combine multiple vector icon sets into one master icon set in Sketch because the canvas can be as large as you want it.

So, what about more complex layouts that include bitmaps, text, and vectors? There is no easy solution for these-you will have to do some cleanup.

My process for converting complex Fireworks layouts into Sketch

  1. Open Fireworks, Illustrator, and Sketch
  2. Save your Fireworks file as an Illustrator 8 .ai file.
  3. Open your file into Illustrator; you may need to click the Update text button.
  4. The file will open and all of your text and vectors will be there, but your bitmaps will have come over as x-ed out boxes.
  5. Copy from Illustrator into Sketch.
  6. Now it is clean-up time. You will have to either copy and paste bitmaps directly from Fireworks, or save individual bitmaps that have transparency. If you have a bitmap that is transparent, copy it and save it into its own Fireworks file, then export as png 32-it will preserve the quality and the transparency. You can then open these files directly into Sketch and add them back into your layout.

So, it’s a lot of work just getting your files into Sketch. I really wish Sketch would have figure out a way to work with Adobe to allow layered png files to open in Sketch, but that’s life. I have cursed Sketch’s existence quite a few times trying to figure out how to accomplish certain tasks. Hopefully this post can help others transitioning suffer a wee bit less.

Happy designing!!!

© Copyright 2016 Michelle Pakron, All Rights Reserved