Which type of graphic should I use for UI elements in web and mobile? If I need to create @5x image size and then just reduce it or I need to create 1 vector image (like a button or icon) and just use this for all screen resolutions?
2
-
It would help to know a bit more about the context you're making this decision in. Perhaps you'll receive more specific suggestions :)– AdrianoCommented Feb 1, 2021 at 0:42
-
This isn't really a User Experience question. The end user doesn't care if you'e used a Vector or Raster image. So the issue you're having is with implementation, not with user experience.– JonW ♦Commented Feb 2, 2021 at 11:55
Add a comment
|
1 Answer
If you are designing UI elements use vector graphics.
Use raster only for photos.
If you use vectors the elements you design will maintain their sharpness at any resolution.
EDIT: (I thought it would be better to add the answer to your comments in here)
I just want to understand which way create graphics.
It depends.
Vector and raster are different ways images are rendered on the screen.
With raster the image format stores the information of every pixel composing the image.
With vector the image format stores the position of each of the points of a path (and some other information; vector files can also include raster images). Then during render, the image shown on the screen is composed for each resolution.
There is no a "better" format, it depends on what is your goal.
Nowadays designers use software like Sketch, Figma, Adobe XD to design user interfaces because they render the images in a very similar way the browsers do. And they all work in vector.
In conclusion:
My advice would be to use the software you find yourself most comfortable with, and see how you go. The important thing is to start designing!
I am sure you will get familiar enough with UI Design that you will find the answer to this very question by yourself in no time :)
-
So it means that I don't need to create one button in size like 120x120px and then reduce it to 80x80 and 40x40 px? Just create 1 vector image and save it? For example: iOS requires for me as designer create [email protected], [email protected] etc Commented Feb 1, 2021 at 0:44
-
Alright, so do you have a list of specifications you need to follow?– AdrianoCommented Feb 1, 2021 at 1:17
-
You mean "alright" for this 'Just create 1 vector image and save it'? For now I don't have any specifications to follow. I just learn and want to understand which way create graphics Commented Feb 1, 2021 at 1:47