My first feelings from Adobe XD

First of all, I am Windows user. So I was not able to work with Sketch. So I was waiting till Adobe has launched a new designing, prototyping tool XD.

I was quite new in that kind of tools, but I learn it in just a few minutes. The most important thing on the XD is what kind of tool it is. It’s so specific tool for work in the apps and websites sort of design. That’s the reason maybe why I learn working with XD so fast.

Better view on your product

I was working with photoshop. For me the problem between developing and designing was with fonts at all. Different view of fonts in browsers as in Photoshop. Rendering was soo different. Now with XD the view is the same.

Really great work with UI kits

The most valuable thing is working with UI kit. We have allready done the UI kit for all of the elements which are using for mobile/desktop app like: buttons, headline, paragraphs, colors, charts, logos. All of them includes paddings, margins and the other things for better cooperations with devs.

Whole app in one place

I can remeber my times, when I was starting with designing of websites. One psd for one page. The size was sometimes soo big (200mbs). Of course, now Adobe Photoshop inludes artboards. But so many artboards means big file. I can’t imagine to have a design all of the pages in one psd file.

We are using cloud drive also and I can’t imagine to work with such a big files, too slow for uploads, saving.

But with XD it is posibble to have whole app in one file. Also with the basic prototypes for devs and marketing. Without using other tools.

There are still a lot of things to do

I am not talking that the tool is soo-super-cool. Not at all, but it is time-saver and with the good cooparating and documentation for devs you are able to design pretty great things. And for a beta it’s absolutelly usefull.

What I am missing a lot:

  • Gradient colors — for me its necessary to have this solution. For a backgrounds, buttons.
  • Share link — missing it a lot, when I need to cooparate with other people it would be so helpfull to have a shareable link with the prototype.
  • Notes — would be great to have a notes in the xd file. For the notes, or devs documentation. Like for the CSS and other staffs.
  • Show/export CSS — for me the necessary to have this solution, or to be able open the file in Avocode or the other apps like this.
  • Microinteractions
  • Export/import .svg, .ai files

There are also other things, but at all. The tool is in beta, the adobe devs and also community growing so fast and I see the future in a tool like this.

And what about you? Do you use the Adobe XD app?

If you like it just share it via social buttons in the end of the article.

Yeah and don’t forget to let my know what you would like to see next time via Twitter.!🙂

Why I fall in love with UI interactions

I supposed everyone knows the term “UI interaction”. But if no … well here it is the meaning of UI interaction by myself 🙂 :

What the UI interaction is?

First of all, we should know what the User Interface Design is. The UI design is the design interface for software and machines which are helping to make the user’s interaction as simple and efficient as possible. The good User Interface is  focused on maximizing usability and the user experience.

So the UI interaction is space where interactions between humans and devices, apps etc. The goal of this interaction is to allow effective operation and control of apps: in my way of design.

Nowadays all of the apps around the world has to be able to stay in touch with common interaction trends.

Who is giving the direction of this trends?

I have to confess, I don’t know. But what I know pretty well is that there are my top candidates who coordinate the direction of UI animations by their way and has got such a big influence to the whole online sector.

iOS animations

Of course, there are Android and Windows too. But for me the iOS one of the strongest pillar of the UI animation in the mobile sector. Can you imagine your mobile phone just static? Without kind of animations? Me not … at all. The animations help us with better orientation in the mobile phones and apps.

Here is a great example of UI interaction of Sign In process to the mobile iOS app by 

login

Google Material Motions

Sure you have heard about Material Motions by Google. If not, look at the guidelines by the biggest tech company. I am sure, Google is one of the leaders in that area. Actually, everything they do takes effect in the whole tech area. Even wich the interactions.

 

Do not be aware of micro-interactions

Microinteractions are the contained product moments that do one small task.

Microinteractions can say something about you. Like, how you product is detailed designed, how the small processes are understandable. All of the small interaction changes you will develop, can help your customers at all. Also microinteractions can guide users in how to work the system.

Try to use “Show system status”

It means that your customer (user) needs to be informed about what actually he did. the interface should keep the user enlightened about what is happening. Just look at the simple example of scrolling bar

1-25uROlsf4CoKLwRBjqLLBA
Img used from article: https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.drekelgbu
Highlight Changes

Highlighting can help use in a place where we need to know, that the user see it. And here can change an animation like that. The other reason could be the orientation of user between most and less important statuses. Look at the example of simple text highlight:

copy-text-prototype
Source: https://dribbble.com/shots/2425078-Copy-Text-Prototype
Visualize inputs

For me one of the greatest (most important) things in each applications. I love the Sign In/Up pages using the inputs effects.

Just have a look on great examples of micro-interactions for inputs.

form
https://dribbble.com/shots/1937503-Input-Form
button
https://dribbble.com/shots/1962910-Selection-Interaction

 

You must be able to learn about interactions

If not, you are out, or will be out in a few months. Just look around. There are no more static websites, apps. Everything is coming more understandable. And I know that one part of great understandable are interactions. So don’t waste your time and try to learn something about.

Recommendation: Micro Interactions Book

 

Check the muzli blog page and stay in touch with UI interactions

And look for a UI Interactions of the week. You can find here a lot of inspiration for your new apps or designs.

 

How the Nick Babich design with care. And I totally agree with him. The good design is about details. And details of the good apps could be interactions which can make your product more trustful, understandable and enjoyable. 🙂 And that’s the reason why I fall in love with interactions.

 

If you like the article, just share it via social buttons in the start and the end of the article. Or just retweet this one 🙂 .

I’ve just read a new article about UI interactions by @bilekUI. #design #UI #interactions Twitter

Yeah and don’t forget to let my know what you would like to read next time via Twitter.!:-)

subscribe

 

Daily UI: Booking Cinema Ticket Concept

Daily UI Cinema Booking Concept. Hope you will like it. Appreciate is welcome 🙂

If you like it my work, subscribe my newsletters and stay in touch! 🙂

Stay Amazing,
Peter.

 

Cinema_booking_system

 

Do you like my articles?

Become my newsletter subscriber.
Follow me on Twitter.
Or wanna try to follow me on Instagram?

“I am so glad for any feedback: I know that there is a lot what to learn. Like my english etc. but with your feedback I will become better. Thanks !”

 

Edition 6: Inspiration Design

Hi,

Monday is here! 🙂 Let’s check some interesting designs which I picked up from Muzli and other designers portals. Enjoy it. If you would like, share with me design what you especially love throw twitter. Twitter

Opening screen for banking App 

touch-id-gif

When I first time saw this animation. I simply fall in love with. The idea of an opening app is breathtaking. I love all on this picture. Colors, gradients, animation. Looks really nice and clean. In my opinion for many of users will be trustful part of an application.

Create the new Instagram Logo in Adobe Photoshop by Howard Pinsky

First, of I would like to say that I love the new Instagram logo a lot. But this story about how to make the Instagram logo in few minutes is funny. I know that people who are not interested in, don’t know how much time team of designers spent on creating of this logotype. But it is funny you know 😀

WAYWARD – FREE FONT

font

Wanna try some free font? Try this one 🙂 . It is a really good font for quotes and print design as well.

 

Do you like my articles?

Become my newsletter subscriber.
Follow me on Twitter.
Or wanna try follow me on Instagram?

I am so glad for any feedback: I know that there is a lot what to learn. Like my english etc. but with your feedback I will become better. Thanks !

Why I started with UI elements?

Hi my friends,

a few days back I started designing UI elements packs. Ask why? Becouse I need to learn how to make more sense into my design. I want to be better in UI, so I started with creating of packs. You can find my works on my instagram or behance profile.

Hope you will enjoy my work and it will be helfull. And don’t forget to subsribe my newsletters. I will attacht links with free psd with some of this elements pack! Enjoy it!

 

basket_UI_pack_2calendar_UI_pack_1