I want to create a Mobile UI Kit, Not sure what pixel dimensions should I choose?
In Photoshop mockup templates for iphone X 1125x2436, but in Adobe Xd dimensions is 375x812. And on graphicriver many says pixel dimensions is 1920x1080, but does not sound or look right.
I’ve always found this a little confusing as well. I’ve looked into it a ton, and I still don’t really get it, but what I can tell you is that designing UI for a mobile app is completely different than designing UI for a website or desktop app, you have to go into it with a different mindset, because mobile UI design has it’s own whole new set of rules. Since there are so many different types of phones with their own dimensions and resolutions, you have to design something that can work for all of them. I think the best thing to do at this point is to figure out what the highest phone resolution is right now, and the most common aspect ratio, then just design your UI within that.
With that being said, I would also appreciate it if someone could give a better explanation of how to design UI for mobile.
Think in columns not in pixels. Bootstrap has 12 col grid. For desktop you display them all 12. And for mobile devices you display only 3-4-6 col. You can start with 1124 px grid for large devices. After desktop version, for mobile devices you need to create breaking points for responsiveness . Read here about this https://www.google.com/url?sa=t&source=web&rct=j&url=https://getbootstrap.com/docs/4.3/layout/grid/&ved=2ahUKEwiZxcrh6o3iAhVQ2aYKHaACAsoQFjAEegQIBhAC&usg=AOvVaw0TDqCUNRwh44t9X-RoDi69
Thanks for reply
Thanks for reply,
I am looking for app design UI Kit (dimensions) not for responsive website. So I don’t think I should think about bootstrap col grid. Or is it still needed?
App or website are the same this days. Mobile first is the new trend… There is no dimensions in pixels because you have to adapt on multiple devices. The measurement is in percents and columns.
Ok, but then how do you make sure a photo or other image is displayed at the right size and is always sharp? For example, if you make something to fit a 1920x1080 monitor, then it will look perfect in that monitor, but if you open that same thing on a 4K monitor, it looks tiny and needs to be scaled way up to be seen properly. With so many different phone screen resolutions, how do you make sure that an image always looks right?
You work based on Screen Resolution Stats Worldwide. 4K is too large for today standards (maybe in the future will become standard) Images that span on entire viewport are used mostly for backgrounds. However if you want to ad an image that span on entire screen (wiewport) you need to optimize it to create a balance between size (MB) and quality. The best practice is to use a light weight background image that span on entire screen and on separates divs to add elements like texts other images and graphics transparent .png etc. The main idea is to load your content sequentially for best user experience. If your layout is vector based you van use .svg vector. On bootstrap you can span an image for all devices using this class container-fluid.
How about this to work with, Screen 1125, col - 6 (126 each), gitter width 30.
Thanks you
Ok, Thanks