UXD General Assembly Week 6

app-iconScreen Shot 2016-04-16 at 3.05.50 PM.png

WIREFRAMING

This was a technical week. It was time for us to turn our low-fi prototype(paper drawing) to medium fidelity prototype(Sketch, Axure etc). Instructor actually gave us some tips when we planned for our interfaces.

  1. Show only what you need user to see. Categorize and hide secondary features. If the screen displays too much things, everything is crying for attention. Try maintain less than 7 categories for each level.
  2. Keep your user focus by showing continuous flow.If you show everything all at once, users lose focus and you might risk users are not going to focus on your core features.
  3. Indicate user progress from time to time. Nudge user if they complete a test or if no internet(Empty state) so that users do not confused what are they suppose to do now.

TOOL

For Mac user: Sketch is definitely easy to use. Recently there is Adobe UX. The interface and usage are similar to Sketch, till today-date, it’s still in beta.
All the elements are in vector and it can be expanded (by width or by height) without pixelated.

If you are familiar with Photoshop, this will a piece of cake to you. For others, don’t worry, I’m totally new to this as well and after playing it for 30 mins and it’s easy too.

TUTORIAL

You can get other tutorial lesson in the following link or get some at Udemy. Don’t worry too much in mastering it. I start to remember more and more shortcuts keys which helps me to design faster.

Don’t bother to use symbol feature at first because at least for me, it screwed up my design when I change letter to italic and all the texts changed at I had a hard time revert as I only realised after awhile.

Tutorialhttps://designcode.io/sketch

Shortcuts: http://sketchshortcuts.com/

 

TEMPLATE

I like their template feature which you can get all the “ready” design and icon before you get started.

sketch_template

 

TONS of Free Sketch template: http://www.sketchappsources.com/

VISUAL BASIC DESIGN

This was a very long informative lessons. While some of the aspects like lines and shapes might sound easy to you but the problem is how do you present them in a same screen harmoniously?  What’s about colours? Which one is your primary colours/fonts and how often you should use them without too many texts shouting at your face?

q0010

Where you would look at for the first glance? Are they “screaming”?

Screen Shot 2016-04-16 at 9.12.32 AM

What’s the difference?

 

I’m not too good in explaining this but I think it’s better to digest them in videos.

The fundamental of design (3mins): https://vimeo.com/32944253

Readability vs Legibility (3mins): https://www.youtube.com/watch?v=74sZJ4b0_Lc

More: Visual Basic Design

LINE
COLOURS
SHAPES
TEXTURE
TYPOGRAPHY

I like to study this the most because it affects the look and feel of your product. Here are some advices to mix and match your fonts family.

font-infography

 

MORE?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s