Sommaire
A project in mind? Let's work together.
Introduction
At 40/60 studio, we seek to optimize
our time and effort to be able to focus on creating.
These tips allow us to save time during a UX audit, as well as during the rapid composition of screens or during a pixel-perfect UI!
1. Visual Inspector
Visual Inspector is a Chrome plug-in that will allow you to quickly understand the composition of a page and how it was designed. Ideal for starting an Ux audit, you will find the inspection to study the grid, spacings, colors and typography variants.
2. Google Analytics
Conversion is still a priority for a lot of websites. As a UX researcher/designer, you need to track user activity on your website, know where they're coming from, how long they stay on your site, and how to improve your conversion rate. Google Analytics allows you to track all of these metrics.
Three variables are of particular interest to us in the agency:
- acquisition channels
- The bounce rate
- The routes taken
If you want to use Google Analytics, start with the help of google analytics help center.
3. Fast alignment and smart layout
Quick alignment is a very useful feature that you'll find on Figma and Sketch. It allows you to select a group of elements and align them in 1 click using the blue button at the bottom right.
Smart layout is a Figma feature that allows you to manage
the layout of the elements of your design.
The purple lines between the elements allow you to quickly adjust
the spacings between the objects while the circles give you the possibility to interchange places between them. It's fast and super easy;)
2.gif)
4. Scale Layers
To avoid having your elements misdistributed when you change scale, I recommend using the Scale layers tool in Sketch. It's a simple solution that will save you a lot of time.
Select the elements to be resized and click on “scale” in the header — you can also use the CMD +K shortcut to change the size of your elements in percentage or pixels.
Note here that this feature does not yet exist in Figma...
5. Dimension and position fields as calculators
You may have never tried it, but it is possible to use position and dimension fields as calculators. This feature is available in almost any design software including Figma, Sketch, XD, or Illustrator.
For example, if you have a 100px wide rectangle, you can quickly divide it like this: 100/2 and the rectangle will be 50px. Likewise, to multiply it, simply make 50*2.
6. Font Ninja
Font Ninja is an application that allows you to identify a font on a website in one click. To use it, download the Chrome plug-in and hover your mouse over a font.
I use it in addition to Visual Inspector to be able to write with the selected typeface.
7. The suspension points
Using suspension points is a great tip to avoid breaking a design.
It is often thought that all text should be visible in a single interface. But most of the time, the user is able to understand the meaning of abbreviated or reduced text. If not, give him the opportunity to click on the text to enlarge the sheet and see more information.
However, if it's key information for the experience, it's best to avoid ellipsis.
8. Create your color palette
One of the quickest ways to create a color palette is to use Illustrator.
The “shape gradient” tool allows you to select the gradients you need in 2 clicks.
How does it work? First, create the squares. The first with your chosen color, the second to make the gradient.
Then, select the 2 objects and click Object > Shape Gradients > Gradient Options. Define the number of steps. I recommend it 4.Click again on Object> Shape Gradients >Create.And There you go, you now have your color palette!
9. Manage your content with Content Real
When designing interfaces, we are always faced with the problem of content.
Today, the first instinct of designers is to use the famous “L o r e m i p s u m” in order to visualize the text boxes.
To this, we note two problems. The first is the loss of time. Unlike Illustrator, Figma and Sketch don't have the ability to automatically fill text boxes in”L o r e m i p s u m”. So, we waste a lot of time going to Latin text generator sites. The second problem is the lack of precision. The”L o r e m i p s u m“gives us no idea about the nature of the content. Is it a [dynamic commercial hook]? A [name first name]? etc.
Content Real allows you in a few seconds to place content adapted to its design in order to give it more realism.
Small defect to note, the plug-in is American and the content is therefore English, with American cities...
10. Manage your icons with Feather icons
Feather icons is a simple application that allows you to organize and store icon libraries. This saves you from having to download an icon every time you need it.
My second favorite icon bank is Boxicons, which is less beautiful but more complete.
