5 trends in logo design 2016
Mono-Line Logos Last year, we began to observe how line art is gaining momentum. This is because designers are still very fond of flat design, and it is switching to…

Continue reading →

Changing the site design: quick restart of your project
I wrote many times that the web design master must be creative, must look for new solutions to everyday situations, keep an eye on fashion ... But unfortunately, fashion is…

Continue reading →

Visual Regression Testing with PhantomCSS
If you worked on large, serious projects, you probably already felt the importance of automated testing during the development process. Depending on experience, this awareness may come suddenly like a…

Continue reading →

Web Design 2016: Chrome attacks!

From the author: The year 2016 has ended, it is always interesting to go back and see how much the workflow has improved over the previous 12 months. It’s amazing how much has changed over the year: your tools, techniques.

Personally, I remember in 2016 design and UX that Chrome applications have become a full-fledged version of web design. I wrote in 2016 about three of them.

Web Design 2016: Chrome attacks!

In April, we discussed BoxySVG by Jarek Fox, a cool and small SVG editor. The application works in Chrome, but it’s better to download it as an application for ChromeOS.

In September, I told you about Pingendo, a prototyping tool with which you can create prototypes running Bootstrap, as well as another Chrome application. Since September, I have created two prototypes using this application.

Introducing Figma
However, perhaps the biggest impact on my workflow in 2016 was the November article by Adam Rashid Should Sketch Designers Consider Figma ?, which I edited. Figma is another app for ChromeOS.

Now Adam will tell you without hesitation that he is a Sketch fan, he is releasing Sketch training courses. And he, all excited, decided to write about a competitor to Sketch and gave me an article to check. At that time I did not know anything about Figma, but as soon as I read the first draft, I immediately became interested.

Web Design 2016: Chrome attacks!

Six months later, I use Figma every day. I was not going to, it just happened. I have Sketch, Adobe XD, Photoshop and even Fireworks, but at the moment I spend more time in a free web application.

So why Figma?
This is not a UI. Sketch was the epitome of what a modern UI design app should look like; Figma did not go far to the side. Layers on the left – properties on the right. If you worked in Sketch, you can figure out with Figma (or XD, for that matter).

In addition, Sketch files are usually easily imported into Figma. Of course, this is not enough to switch to Figma.

Did you switch to Figma because it’s free? No, don’t think. I like free apps, but I already paid for others. In fact, I lose my money without working in it.

There is a more surprising reason (at least for me).

Figma multi-user editing – a design revolution
Multiuser editing is a special feature of Figma, which significantly distinguishes the application from Sketch, Photoshop and even Adobe XD.

Web Design 2016: Chrome attacks!

Figma allows you to access design through the URL and username directly from the application. No downloads or synchronization with intermediate cloud services. Designs in Figma live online, almost like Google Docs.

When two or more users look at the same design in Figma, you see user cursors, like in Google Docs.

When I first saw this, I thought “um … sweet.” But over time, I realized how useful this feature is. That’s why.

1) Figma documents are living style guides
When you share a Figma document with other developers (view only), they can click on ANY element on the page and view its properties in the right pane. Properties that can be viewed:

fonts, size, saturation

width and height

line height and indentation

color

shadows and effects

Web Design 2016: Chrome attacks!

Figma documents cannot completely replace good style guides, but with their help developers can easily answer almost all design questions.

Once I watched as our Manila developers clicked on my design in Figma while I explained everything to them via Skype. Figma also has a nice built-in comment system.

2) Developers do not need to contact you for minor edits in the schedule
Often you need to make minor corrections to the icons and drawings, for which you usually need to contact the UI designer. Figma allows anyone to edit and refill graphics at any time through a browser. You only need to log in.

Web Design 2016: Chrome attacks!

Moreover, full version control allows you to roll back to the original at any time.

3) No need to make change reports for project managers
As designers, we often spend time explaining to interested people what stage the project is at. In Figma, they themselves see what stage the project is at, and you no longer need to constantly ask you about it.

When meeting with customers, you can immediately go to important issues, rather than explain what you have already done.

Conclusion
The multi-user viewing and editing function collects all people on one page. The project manager, marketers and developers are all involved in the design process. They literally watch you work, which increases your sense of control. Great side effect.

Will all applications benefit from this approach? Probably not. I have never seen something like this in Google Docs. Web design and app design seem to be particularly well suited for this.

The psychology of web design: playing in a new way
Psychological aspects of design The connection between psychology and web design is not necessary to prove. This is obvious, if only because the transmission of information by means of Internet…

...

Working with empty space: why emptiness affects design so much
in web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly…

...

Working with empty space: why emptiness affects design so much
in web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly…

...

JQuery preloader
There is a delay when loading the page content asynchronously or sending a request to add / edit. A preloader is an animation during this delay, which allows you to…

...