Creating a GIF from After Effects

1. File > Export > Add to Render Queue
2. Click Best Settings link
3. Make sure you have Best Quality and Full Resolution, hit OK
4. Click Lossless link
5. For format dropout choose JPEG Sequence, hit OK
6. Click the name beside “Output To” and choose a destination
7. Click Render
In Photoshop
1. Navigate to exported JPEG sequence and select the first image
2. Check Image Sequence check box in the current dialog window
3. Click Open
4. A frame rate window will pop up, enter 15 FPS
5. File > Export > Save for Web (Legacy)…
6. Select GIF in the upper right hand corner
7. Under Looping Options, select Forever
8. Click save and choose a destination

Source: Designmodo

Setup for Functional Prototyping on OSX

1. Open Terminal.
2. Install Ruby: https://www.ruby-lang.org/en/
3. Install Homebrew: http://brew.sh/
4. Install node.js by running the command: brew install node
5. install coffee script: npm install -g coffee-script
6. Install grunt.js: npm install -g grunt-cli
7. Make sure your Dropbox is synced
8. Open Terminal  and navigate to ‘Source’ in your dropbox and run: npm init
9. install these packages:
npm install grunt-contrib-sass –save-dev
npm install grunt-contrib-watch –save-dev
npm install grunt-autoprefixer –save-dev
10. Install git: https://git-scm.com/downloads
11. Install Jekyll:  sudo gem install jekyll -v 2.5.3
12. Running Jekyll: http://jekyllrb.com/
13. Install Sublime text: https://www.sublimetext.com/3
14. Install SourceTree: SourceTree (commit using SourceTree)
15. Add http://github.com to Keychain Access
16. push changes to github using terminal (from the source dir) by running command: git push master

Some great apps to optimize workflows

All apps are free, unless otherwise noted.

 

thumbs up sign – Recommended

 

trophy – Must have

 

Inspiration

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456000097973_file.png

 

Ember ($30)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456000021791_file.png

 

Dragdis (Web app) (Free with paid options)
Collect Images, links, videos and texts you find online easy and quick with drag & drop.

 

Pixa ($25)
Organizing your images, the easy way. Collect, design, deliver: effortlessly improve your workflow with Pixa.

 

Inboard ($20)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114532842_file.png
You like Pinterest and Dribbble, but prefer a desktop-based digital scrapbook to view image files where your performance is not limited by your web browser and you don’t get distracted by millions of tabs. View your images in an awesome grid that you can take full screen.

 

Pixave ($10)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114714902_file.png

 

Pixave provides the optimum environment to manage your images. With the user-definable ‘Collection’ feature you manage your images, using folders to categorize and suit your needs. In addition, you can organize numerous images using the highly intelligent ‘Smart Collection’ feature and search for them instantly.

 

Prototyping

 

Change the way you design with the most powerful prototyping platform on the planet. Pixate generates 100% native prototypes, so you can experience your ideas on device as if they’re completely real.

 

Principle ($100) mobile phone
Principle makes it easy to create animated and interactive user interface designs. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.

 

Briefs ($200) mobile phone

 

thumbs up sign Marvel (Free with paid options) mobile phone personal computer
Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes.

 

grinning face Silver (Currently in beta, invite only) mobile phone personal computer
Silver is the first prototyping tool built exclusively for Sketch. It is perfect for making quick, flow-based prototypes, but it also plays nice with Framer.js to help you add micro-interactions to your flows.

Version Control

(Asset Management)

Pixelapse (Subscription)
Visual version control and collaboration workflow for open source and private design projects. Built for individuals, trusted by agencies.

 

thumbs up signFolio ($50)
Simple version control app for designers. It lets you quickly browse and restore previous versions of your design documents.

 

Use Kaleidoscope to spot the differences in text, images, and folders. Review and merge the changes in seconds with the world’s most advanced file comparison application.

 

Sketch Plugins

 

Quickly create dummy data such as avatars, names, and geo location.

 

Import rich data and duplicate design assets faster than ever before.

 

Import rich data and duplicate design assets faster than ever before.

 

A Sketch plugin that lets you save and load colors into the color picker.

 

Chrome Extensions

 

Re-size your browser’s window to emulate various resolutions.

 

Screen capture your current page in it’s entirety, reliably.

 

Simple extension to view image image width, height and file size from your browser’s context menu.

 

View image in current tab.

 

Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

 

LivePage is a developer tool which reloads website resources (such as CSS, HTML and JavaScript) as they change on the server, so you are always looking at the most up-to-date version of a web page. It can make developing websites a lot faster, by helping productivity.

 

User styles are themes for web sites. User styles empower your browsing experience by letting you customize web sites. Take out irrelevant content, change colors, or completely redesign the entire site.

 

Project Naptha (Advanced OCR-ing tool)
Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web. The result is a seamless and intuitive experience, where you can highlight as well as copy and paste and even edit and translate the text formerly trapped within an image. Live demo

 

Design Software

 

trophysparklesSketch 3 ($99)
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

 

Project Comet (Adobe XD Price Unknown)
Design and prototype websites and mobile apps faster than ever with Project Comet,
the first all-in-one solution for UX designers. Coming in early 2016 from Adobe.

 

Affinity – the fastest, smoothest, most precise professional creative software, exclusively for Mac.

 

Mischief ($25)
Mischief is an easy-to-use, intuitive freehand drawing app ideal for sketching, brainstorming and ideation.

 

Icons

 

Icon2Image (Price)
Image2icon is the easiest way to create your own mac icons and customize your folders and files.

 

Photography

 

BatchImageCropper lets you easily crop multiple images at one time.

 

Social

 

Slack brings all your communication together in one place. It’s real-time messaging, archiving and search for modern teams.

 

Music

 

Stop chasing music across the web – to services you don’t use, or sources you don’t have access to. Given the name or link to a song, album or playlist, Tomahawk will find the best available source for you and just play it.

 

Soundnode App is an Open-Source project to support Soundcloud for desktop Mac, Windows, and Linux. It’s built with NW.js, Node.js, Angular.js, and it uses the Soundcloud API.

 

iTunes-like SoundCloud client for OSX.

 

Gear ($6)

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456114934411_file.png

 

The Google Music and YouTube player for Mac and iPhone

 

Yate ($20)
Yate was developed for people who want complete control over their tagging experience.  The application was designed from the ground up for Mac users. It is a 100% Cocoa written application and uses its own tagging library. Yate will tag aiff, dff, dsf, flac, m4a, mp3, mp4 and wav audio files. Yate also supports m4v and mp4 video files.

 

Mail

 

Unibox ($16)
Unibox is an email client that groups your messages by person. This way your emails are organized automatically and you always find what you are looking for.

 

 

Notes

 

Quip is the modern productivity suite that helps your team get work done faster.

 

Paragraphs is built for one thing and one thing only: writing. It gives you everything you need to create brilliant prose and does away with the rest.

 

Byword (Mac – $12 / iOS – $5.99)
Byword is designed to make writing more enjoyable with Markdown. All the tools you need to write effectively, with keyboard shortcuts, word counters with live update, and more.

 

News

 

With Feedly, you can easily organize all your publications, blogs, YouTube channels in one place and consume and share more efficiently. No more zig zagging. All the content comes to you in one place, in a clean and easy to read format.

 

Reeder 3 ($10)
A news reader for Feedbin, Feedly, Feed Wrangler, FeedHQ, NewsBlur, The Old Reader, Inoreader, Minimal Reader, BazQux Reader, Fever, Readability and Instapaper.

 

Bookmarks

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1455993553614_file.png

 

thumbs up sign Raindrop.io (Free with paid options)
Stop chasing music across the web – to services you don’t use, or sources you don’t have access to. Given the name or link to a song, album or playlist, Tomahawk will find the best available source for you and just play it.

 

Git

 

Tower ($70)
Version control with Git – made easy. In a beautiful, efficient, and powerful app.

 

A free Git & Mercurial client for Windows or Mac.

 

FTP

 

Libre FTP, SFTP, WebDAV, S3, Azure & OpenStack Swift browser for Mac and Windows.

 

A simple app.

 

Text Editors

 

Coda 2 ($100)
You code for the web. You demand a fast, clean, and powerful text editor. Pixel-perfect preview. A built-in way to open and manage your local and remote files. And maybe a dash of SSH.

 

TextWrangler is a powerful and richly featured tool for composing, modifying, and transforming text stored in plain-text files.

 

Sublime Text (Evaluate for free / purchase for $70)
Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.

 

Web Design

 

SiteSucker is a Macintosh application that automatically downloads websites from the Internet. It does this by asynchronously copying the site’s webpages, images, PDFs, style sheets, and other files to your local hard drive, duplicating the site’s directory structure. Just enter a URL (Uniform Resource Locator), press return, and SiteSucker can download an entire website.

 

Turn any mockup into a floating guide, and visually align pixels with ease.

 

Automation

 

Keyboard Maestro is the leading software for Mac OS X automation. It will increase business productivity by using macros (or shortcuts) with simple keystrokes.

 

trophy Hazel ($30)
Hazel watches whatever folders you tell it to, automatically organizing your files according to the rules you create.

 

Fake ($30)
Fake is a new browser for Mac OS X that makes web automation simple. Fake allows you to drag discrete browser Actions into a graphical Workflow that can be run again and again without human interaction. The Fake Workflows you create can be saved, reopened, and shared.

 

Screen Capture

 

DreamShot becomes the brains of your screenshot workflow, presenting the most relevant options for dealing with an image. You select a destination, DreamShot sends it, then gets out of the way, with nothing left on your desktop. Try it once, and you’ll never go back.

 

Voila ($15)
Screen recording or image capture, full screen or selective area – capture them all. With an intuitive interface and a powerful toolset, you get to effortlessly annotate images, export videos, organize files or simply share the way you want.

 

Screen Sharing

 

Reflector is a wireless mirroring and streaming receiver that works great with Google Cast, AirPlay and AirParrot 2. Mirror your content to the big screen without wires or complicated setups. Play games, watch movies, demo applications or present from the palm of your hand. Even send your screens directly to YouTube for others to watch live. Everything you do on your device can be wirelessly sent to Reflector!

 

AirParrot allows you to wirelessly beam your screen or media files to a variety of media receivers. AirParrot quickly discovers available receivers on your network, and uses Quick Connect to connect directly to a device running Reflector 2. Easily share your screen, videos, audio, presentations and so much more.

 

Tools & Utilities

 

trophyAlfred 2 ($30)
Alfred is an award-winning app for Mac OS X which boosts your efficiency with hotkeys and keywords. Search your Mac and the web effortlessly.

 

trophy Bartender 2 ($30)
Bartender 2 lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar.

 

thumbs up sign CleanMyMac 3 ($40)
Clean, optimize, and maintain your Mac with the all-new CleanMyMac 3. It scans every inch of your system, removes gigabytes of junk in just two clicks, and monitors the health of your Mac.

 

MagicPrefs (Customize magic mouse preferences)
MagicPrefs Magic Mouse, Magic Trackpad advanced preferences, custom clicks, gestures configuration, expose, dashboard, middle click.

 

BetterTouchTool (Customize magic mouse preferences) (Pay what you want)
BetterTouchTool is a great, feature packed app that allows you to configure many gestures for your Magic Mouse (1 & 2), Macbook Trackpad and Magic Trackpad (1 & 2) and also Mouse Gestures for normal mice.

 

A Better Finder Rename’s huge array of renaming options are organized into 15 intuitive categories that cover all the text, character, position, conversion and truncation features that you would expect from a great file renamer.

 

Type more with less effort! TextExpander saves your fingers and your keyboard, expanding custom keyboard shortcuts into frequently-used text and pictures.

 

thumbs up sign Unclutter ($6)
A new handy place on your desktop for storing notes, files and pasteboard clips.

 

Take control of hidden files on Mac OSX.

 

thumbs up sign Hyperdock ($10)
HyperDock adds long awaited features to your Dock: Select individual application windows just by moving the mouse on a dock item, use mouse clicks to quickly open new windows and many more.

 

Can’t remember a shortcut? Just hold the ⌘ key to get a list of all active shortcuts for the current application.

 

Attach a menu bar to the active app window.

 

thumbs up sign Divvy ($14)
Managing windows can be frustrating, requiring precision control of your mouse or trackpad for clicking, dragging, pushing and pulling your windows to the size and position you desire. Even with all this work, it’s very difficult to get windows exactly where you want them, so most of the time windows are left scattered all over the screen. The solution? Divvy.

 

Magic Launch is a preference pane that lets you customize the experience of opening files on your Mac. Open your files using the original application that created them or create custom rules to decide which application should open a file.

 

A fast, easy, and free BitTorrent client.

 

Thoroughly uninstall unwanted apps. Simply drop an application onto the AppCleaner window. It will find related files and you can delete them by clicking the delete button.

 

File Management

 

Trickster ($10)
Trickster keeps track of recent files you’ve been using on your Mac and gives you super easy and lightning fast access to them.

 

thumbs up sign PathFinder (Finder replacement tool) ($40)
Take full control over your file system! Save your time and work how you want! Say goodbye to the days of weak file management. With Path Finder 7, it’s your files, your way.

 

 

s_F876DC078B9FE5D70897296524C0C4492F043D01AA4C59581282897C1AFE04BC_1456112094552_file.png

 

Default Folder X attaches a toolbar to the right side of the Open and Save dialogs in any OS X-native application. The toolbar gives you fast access to various folders and commands. You just click on the buttons to go to your favorite and recently used folders, manage the folders and files shown in the list, and make changes to your settings.

 

Productivity

 

Trello (Free with paid options)
Infinitely flexible. Incredibly easy to use. Great mobile apps. It’s free. Trello keeps track of everything, from the big picture to the minute details.

 

Alfred Workflows

 

Play Song is a workflow designed to make playing songs in iTunes extremely quick and convenient.

 

Convert color formats and create code notations of colors from the OS X color panel.

 

This simple workflow lets you search emoji codes and their symbols.

 

You can incremental search for Font Awesome icons and paste them into the front most app.

 

Mobile

 

Lanes ($2)
Lanes is a simple way to organize your workflow. An all-in-one task tracker, kanban board, to-do list and swimlane app.

 

Sketch Mirror lets you preview your Sketch designs on your iOS devices.

 

Alfred Remote is your personal command centre for Alfred 2 for Mac. Your iPhone or iPad now becomes a perfect day-long companion to your Mac; Whether at work or play, be more productive than ever!

 

Clear (Mac – $10 / iOS – $5)
Untangle your life with Clear – the to-do and reminders app used by more than 2.5 million people that ensures you stay focused on what matters.

 

Create simple connections between apps like Facebook, Dropbox, Instagram, Twitter, and Gmail, as well as devices like your iPhone, Nest Thermostat, Fitbit, and Philips Hue.

Interactive Advertising Resources

Designers and creative technologists should take note of a few great resources I’ve learned about in the past few years.

The most important is the Interactive Advertising Bureau (IAB). The IAB provides advertising professionals a way of determining what technologies to use for deliverables like banner ads, micro-sites and other marketing techniques.

Then there’s the World Wide Web Consortium (W3C). The W3C standardizes technology and helps to align different platforms by creating and approving drafts to be adopted as the point of record.

Along with the W3C and IAB there’s the Web Hypertext Application Technology Working Group (WHATWG). The IAB, W3C and the WHATWG often collaborate, determining the delta of front-end technology like HTML, CSS, JavaScript and other components like Adobe Flash. In short, they help to make tools available for us to be creative. There are many other groups, but I tend to gravitate toward these three for currents the most.

While working through problems I often use these indispensable knowledge bases:

Here are some tools for Open Source Software Development (OSS) to get you started:

Here are some good Responsive Web Design (RWD), data-binding, and other goodies:

Two CSS compilers:

Here are some compact JavaScript frameworks:

Like Compilers and strong typing? Try one of these JavaScript alts:

Here are some Content Management System (CMS) choices for MySQL and PHPMyAdmin/PHP, templating nerds:

Here are some good test guys:

A couple good code sharing services for debugging:

Debugging scary things:

Fiddler

There are a lot of choices out there, for instance… I’ve been working a lot with MVC .Net to use and deploy all the above (with the exception of the CMS choices), so remember to explore and have fun!

grinning face 

UI Presentation and Structures

There are five main types of UI structures that I like to call “navigation paradigms”. Here’s a brief overview of the structures supplemented by their characteristics.

TreeStructure

Tree (Most commonly used in web design – think WordPress, Drupal, Joomla and SharePoint)

The branches offer various navigation possibilities like breadcrumbs, secondary nav, et cetera.
Logical hierarchical structure

SingleFrameStructure.png

Single Frame (think parallax or other highly interactive sites that animate from section to section)

Experienced as a single page by users – fancy!
No hierarchies – hip and trendy!

NetStructure.png

Net (More commonly used in application and OS design than web design – think multitasking and accessing contact lists)

No clear hierarchy
Smaller, interlinked subsidiary systems
Nodes correspond with the home page

JumpLineStructure.png

Jump-line

Linear screen arrangement
User can reach any page from the homepage
Little interactivity

linearStructure.png

Linear

Linear screen arrangement
no active user intervention possible
each item of information built on others

To create compelling UI architecture one should ask themselves the following questions that entertain certain criteria:

1. Is the information presented in a simple fluid manner?
2. Is the content essential?
3. Is the logical structure manageable?
4. Is the structure intuitive and useable?
5. Is the design consistent?
6. Is the design visually pleasing and delightful?
7. Is the information delivered quickly?

So there you have it! Now go have that conversation with UX with your head held high!

Designing Site Architecture and Wireframes

P4NH_Sitemap-650x392.jpg

After a project kick-off meeting the first steps involve creating a document that encapsulates all the shared ideas. What we’re doing as designers is taking any visual, verbal and documented feedback and summarizing key points, laying out a framework for the project.

A good initial document should contain the following sections:

  • A branded cover with relevant project and contact information
  • Design approach including a summary of the UX/UI problems and their solutions
  • Inspirations – a mood board of sorts – keep it succinct
  • Concepts and thumbnails that give weight to the chosen navigation paradigm and depth to the drafted design
  • The site architecture
  • Wireframes

Though all these sections are important, I’d like to summarize the last two and why these are critical to any UX/UI process.

Site Architecture

A visual site map reveals the bigger picture making sure that the user is never at a dead-end. It also helps developers envision how they are to build the site. It’s a visual representation of the site that is probably based on the chosen navigation paradigm. The example above demonstrates the architecture by grouping pages into a drop-down navigation system commonly used in many sites today.

Wireframes

Wireframes are just that, wireframes. They should include little to no detail and are meant to show how the information is organized. Technically, the more “designed” the wireframes become, they serve more as a distraction than a useful tool. Some customers are different from others so the level of detail depends on what they can handle while considering the overall scope of the project. Visual composites are the next step, but that’s another subject. The example below should give some context.

P4NH_wireframe.jpg