Adobe Experience Design CC-Adobe Xd 0.6.34 Beta

Brief Overview of Adobe Xd version 0.6.34 Beta.

TLDR:

Great features it already has.

  1. Artboard templates
  2. Intuitive UI, easy shape tool management
  3. Customizable grid with snapping
  4. Shape over image masking
  5. Boxed and Free Flow text modes
  6. Easy colour picker with saveable swatches
  7. Transparency support
  8. Object path manipulation
  9. Pen tool
  10. Hotspot prototyping
  11. Repeat Grid feature
  12. Symbols

Desired features currently absent.

  1. Assign export type to objects
  2. Mass export of separate objects without manual selection
  3. Export jpg
  4. Center grid to Artboard
  5. Pen tool – better path management
  6. Text Styles, saveable and reusable
  7. Borders – outer expansion

Adobe has made great leaps with their new, still Beta take on UI UX design called Adobe Xd.

first impression on the build is that the program layout is very free and easy to engage with. Nothing is sticking out as “in your face” annoyance as many Beta apps do.

The general feeling while using it is breath of fresh air, no pressure, just do your own thing.

I really like the overall workflow of the application. From start to finish it was mainly a smooth ride. I wish there were few things that in my opinion would benefit the whole workflow and experience but hopefully they will be included in the final release.

First Launch of the Adobe Xd

Adobe Xd - artboards

We are greeted with this pop-up that has Artboards ready to be used. They are simply correctly sized artboards and do not come with any special features or UI Kits. It is simply a handy timesaver.

After choosing an Artboard (canvas) we get to view full interface and all the tools.

Adobe Xd-UI

Tools

On your left you’ll notice the selection tool (V) yes v shortcut works in Adobe Xd (Im looking at you Sketch). Then we have a rectangle, circle, line and a pen tools. Below pen tool we have type tool “T” and below it we have Artboard drawing and resizing tool.

Asset Management

Adobe Xd has two types of collections “Layers” and “Symbols” on the bottom left we can see the icons for them. Layers are collection of any object residing on canvas and symbols are simply the symbols we made out of some of the elements.

There is one more “grouping” which is off Artboard grouping. Meaning, any shape or object that is completely off the Artboard gets grouped in the  “Pasteboard”.

Pasteboard

Tool panels to the right

Right side of this app we have tool panels with alignments, distributions, special adobe repeatable function “Repeat Grid” and vector shape modifiers, add, subtract etc.

Size, resize management

Adobe Xd also tracks sizes of canvas as well as drawn objects and text as well as tracks their positions which leads me to the elephant in the room – rulers and guides.

Rulers, Grids

At this point Adobe Xd has no rulers or guides but it has grids. User is free to change the grid size to any size. It is not clear if they will be added later or adobe wants to pull “apple” on us.

In either case this is a very usable software for UI and UX design.

Prototype

Unlike competition Adobe Xd has prototype view and is able to visually link hots spots to other Artboards in the same document.  This allows user to create interactivity right in the app without third party plug-ins.

That is all I can think of for now. Thanks for reading and stay tuned for detailed feature and tool function videos. 

 

 

Fibonacci sequence & the Golden ratio

Fibonacci sequence is series of numbers in which each number is the sum of two preceding numbers. example: 0,1,1,2,3,5,8,13 etc.

So why should we care about this?

It is very interesting because the sequence is used by nature resulting in Golden Ratio.

Highlight here I’d like to point out is that Golden Ratio is not agreed upon concept or a design fad like rounded corners or 45 degree boxes, it is aesthetically pleasing division of space that has remained so without human interference.

We literally have no control over it. When we see something with this ratio we automatically “like it” and are attracted to it, just like to proportions. It invokes joy and inner satisfaction.

Personally I like to also visualize 0 in the sequence, since second number is same as first because 1+0 = 1 and this is the only time when the next number is same as previous one.

Can you create Fibonacci sequence visually by yourself?

Sure! the first block you draw make it 1:1 ratio (or 100x100px) second block would be the same. But the third block would be the sum of previous two times two , so (1+1) x 2. (2 x 200px).

FIbonacci sequence calculation

golden ratio curve

How is Fibonacci Sequence tied to Golden Ratio

Fibonacci ratio between the sums exponentially grows closer to a Phi 1.618 the Golden Ratio. We witness in nature and has been used by artists and architects for centuries.

 

Golden Ratio Phi 1.618 Expansion

You’ll notice Phi ratio does not have two cubes 1,1 as starting point. It’s infinitely 1.618 down the rabbit hole.

phigoldenratio
Phi 1.618 ratio

 

Example of Phi divided page would look like this

phi1618

Parthenon was built in 447 BC with Golden Ratio

Parthenon Phi 1.618
Parthenon Greece, built 447 BC

 

I try to use this ratio as much as possible in my designs.

business card golden ratio

 

logo goldenratio