2FRESH Design & UX Tips #1
— by Jarin Němeček
We love Sketch
Sketch is an amazing tool for UI and UX designers. It’s easy to use and super fast. Its performance is most noticeable while working with large documents packing huge amounts of pages. You can’t really compare it to Photoshop or any other design tool. I started using it about a year ago and since then, Photoshop has evolved into a photo editing tool only. Right now, I’m toying with the idea to rid my workflow of Photoshop completely and try Affinity Designer & Photo instead.
Group resizing is a big thing in Sketch 3.9
Group resizing is a very handy way to design your UI elements, especially when working with flexible layouts, tables or fluid elements. Check this out to learn more.
This article describes in depth all the new features of group resizing in Sketch.
Craft & Prototyping in Sketch
To breathe life into your design, use Sketch with theCraft plugin from Invision, packed with time-saving features. It gives you the ability to turn your pages into interactive prototypes! Sketch Prototype is still Beta but I’ve tried it and it seems to be a huge competitor to Adobe XD, especially with Sketch’s editing features compared to those of XD.
https://www.invisionapp.com/craft
More Useful plugins and tools for Sketch
You can make your Sketch workflow even more powerful with lots of amazing plugins. Have a look at these resource pages.
https://www.sketchapp.com/extensions
http://sketchhunt.com/tools
http://sketch.land
Join the Sketch Group on Facebook for the hottest Sketch news
https://www.facebook.com/groups/sketchformac
UXPin is dead. Hail Axure.
Prototyping makes up a big part of my job. I wanted to try something new in my latest project (a TV interface design) and I chose to use UXPin. It eventually turned out to be a bad decision.
I’ve been working on this prototype for about 7 months already and I’ve suffered a lot. Overall, UXPin’s speed and workflow performance is very slow. My prototype has a lot o full HD images and contains more than 350 pages. Such a huge project took more than an hour to export.
The latest UXPin update killed 7 months of my work.
The latest update of UXPin failed its users in many ways, the most prominent bug being that it holds triggers and callbacks when jumping to other pages. It remembers events from previous pages and causes unpleasant glitches when handling the prototype. The way of exporting HTML files has also changed and now it takes even longer with the output files being 3 times bigger. Old images are no longer jpgs and it’s hard to change them offline.
I tried to communicate with their Helpdesk, but it took so long that eventually I decided to recreate the whole prototype in Axure from scratch. It took me more than 12 working days.
Goodbye UXPin. Hello, good old friend Axure.
I’m sorry that I fell for the more attractive and eye-catching UXPin instead of my good old friend Axure. It’s more robust and gives you far better tools. Global Variables, Masters, Dynamic Panels and the ability to code your prototype give you complete control. However, when it comes to large projects, one suffers here too. Saving is quite slow and, at times, the latency is significant, too. Still far better than UXPin, though.
Our Minimalist Guide to Human-Centered Problem solving
These days, a designer is no longer a Photoshop guy creating stunning images based on Wireframes created by someone else. Designers should be included in the project from the very beginning. We should be part of the creative process, of doing research and generating ideas, creating prototypes and, finally, of testing them with end users. We’re scientific designers, engineers.
Learn more about the importance of this process in our simple Toolbox
http://toolbox.2fresh.cz
Download HCD Guide
PDF or Sketch File
Become a better designer. Learn how to code.
At the very end of the design process, we need interactive prototypes, or even interactive stencils that will explain to our coder how specific elements work and behave.
Designing all the possible states and interactions will help you a lot and save a lot of time in the final implementation. Moreover, it’s an easy way to get feedback from your end users and clients. Therefore, you should know how to code. It’ll make you an even better and stronger designer. Here are some tools which you might want to learn to use and try to implement into your workflow:
Webflow
is a very strong web design tool. You can build entire websites with it and it’s great for defining basic elements such as the Responsive Layout, Typography, Buttons and all the other interactive elements of your design.
https://webflow.com
https://help.webflow.com/courses/getting-started
https://www.facebook.com/webflow
Framer
is a powerful interactive prototype tool for any device. It uses simplified Javascript — Coffee Script, and it’s quite easy to learn. It’s great for the last stage of prototyping when you need to define all your interactions and animations. You can easily export your Sketch or PSD files into Framer and turn them alive.
http://framerjs.com
http://framerjs.com/resources
https://www.facebook.com/groups/framerjs
Hype Pro
is an interaction and animation tool for web content. It’s easy to put nice finishing touches to your prototypes or presentations with it, such as advanced HTML5 animation.
http://tumult.com/hype/pro
Helpful tools for everyday use
Sharing is caring. Here’s a list of handy tools we love that you may like to have a look at, too.
Magnet
I’m not a very big fan of the mac OS X Fullscreen mode, so this tool is just perfect for me. It can enlarge any application into full / half / quarter screen so you can manage your desktop and applications much more easily without that dreadful dragging. Check it out.
DaisyDisk
This app will help you analyze your hard drive and find out what’s taking up your disk space. It’s a great tool for dealing with lack of HDD space.
ScreenCloud
This app will let you share your screenshots instantly with your team or clients. It will upload your screenshot to a cloud and copy the link to your clipboard. Neat!
f.lux
F.lux makes the color of your computer’s display adapt to the time of day, warm at night and sun-like during the day. Did you know that you might be staying up too late because of your screen’s color? Using f.lux can make you sleep better or simply make your computer look, read and feel better.
