23
votes
Accepted
What is meant by 'designing an icon at 100% scale'?
Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at.
If you are designing a 24px × 24px icon, you set up your artboard in ...
- 40.6k
13
votes
Accepted
Alternative for Sketch on Windows?
Some other valid options for 2017:
Gravit Designer:
This is a very young product and as such it's still lacking many features, but for now it's a good vector editor, and the roadmap promises a lot ...
- 7,361
12
votes
Alternative for Sketch on Windows?
2018 update:
Lunacy — reads and saves .sketch files (native Windows app, free)
Figma — reads .sketch files (browser-based, freemium)
Disclosure: I'm one of the authors of Lunacy. I have no relation ...
- 379
7
votes
Material Design: Should the status bar look different from the action bar?
I don't think this is referenced directly, but if you look at at the color section there's this paragraph that mentions the status bar vs toolbar:
To create contrast between elements, you can use ...
- 26.4k
6
votes
Accepted
How to create proper Vector Images that can be used as an Android Vector-Drawable?
Solution
Save as a "Plain SVG" in Inkscape.
Note: As of Inkscape 0.91, if you save as "Plain SVG" and then just do a normal "Save", it will save again as an Inkscape SVG. ...
- 6,952
6
votes
Strange Webpage Font Rendering on Android
This is called a ligature. The tend to be very subtle, like the ones used for te ff, fi and ffl combinations. This one is... less so.
You can deactivate ligatures (all of them) using
-webkit-font-...
- 25.2k
5
votes
Alternative for Sketch on Windows?
This a tough one, as Sketch is pretty amazing. Photoshop is currently adding in Sketch-like features, trying to catch up. And Adobe is also, as previously mentioned, now pushing their new Adobe ...
4
votes
How do I keep my floating action button from blocking other components?
This works for me. Add bottom padding to RecyclerView
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="...
- 141
4
votes
Andoid style guide - px to dp, how do i convert?
1 dp (density-independent pixel) = 1 pixel at 160 PPI (or mdpi)
From developer.android.com
Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express ...
- 40.6k
4
votes
Convert PX to DP
Photoshop uses PX as a unit of measure for the forms and in development the app uses DP, I know how the conversion works From PX to DP
The conversion will depend on how the original design in ...
- 12k
4
votes
Secondary color is a light version of the primary color
It's often a hard job to sync to a client's taste so what I will give you is a tool that will help you make things a loooooot easier:
The color tool allows you to set a primary color (in your case #...
- 4,945
3
votes
Accepted
How do I export a graphic to support multiple Android screens in Illustrator?
Each asset you need for the app will have to be saved as a bitmap image (PNG or WebP) at the various densities needed. If it’s appropriate, you can also use Android Vector Drawables, which are an SVG-...
- 12k
3
votes
Accepted
Why PSD design ppi matters on iOS, but not on Android?
Assuming the same pixel dimensions, PPI (or DPI, but it really is PPI) makes no difference at all.
A 100x100 pixel image at 72PPI is exactly the same as a 100x100 pixel image at 300PPI. No difference ...
- 40.6k
3
votes
What color should be given to the ripple feedback?
Some useful logic I got from Android SDK packages android.support.v4.graphics and android.support.v7.graphics.
The ripple color is white or black with related transparency and animation. Color (white/...
- 131
3
votes
Sizes and dpi confusion
Here's the best explanation I've read on what DPI actually means:.
The short version: If you change the DPI of an image it has no effect on the quality of that image. DPI is only relevant in the ...
- 131
3
votes
Accepted
Secondary color is a light version of the primary color
The Material Design guidelines are exactly that; guidelines. You don't have to follow what they say to the letter. They're meant to help you with the design process and create a consistent visual ...
- 40.6k
3
votes
How to export asset at different densities for Android platform (mdpi hdpi xhdpi xxhdpi xxhdpi)
From what I understood from the question;
You can find the presets near the make exportable section. Please follow the images.
You can edit the preset or add new presets in sketch preferences.
2
votes
Accepted
How to save my icon into 192*192 resolution with out spoiling its shape
You can always create a 192x192 px square and make it to 0% opacity, put it on the back and then export it. The export will still "see" the 192x192 px square on the back as part of the image, ...
- 608
2
votes
How can I set custom units in Photoshop?
I'm not aware that you can, however you could always set a grid in the preferences to 150px with 10 subdivisions.
Then turn your grid on with CTRL or CMD + '
- 1,833
2
votes
How do I keep my floating action button from blocking other components?
Bouncing off the "Relocate the button" idea in the accepted answer, the Scrolling techniques part of material design guidelines has one possible implementation of that idea.
Namely, the ...
- 121
2
votes
Create 2 morphable SVGs
Making your own limited exporter should be pretty easy if you know how to loop each shape and vertex. Now I personally can not help you with Sketch or Affinity editor since I have neither. But this is ...
- 57.9k
2
votes
Can I use material design for both Android and iOS?
Apple has the iOS Human Interface Guidelines, which set some limitations on design but they shouldn't prevent you from implementing material design in your app.
The only real limitations you have to ...
- 40.6k
2
votes
Accepted
Is this a native iOS design?
Tab bars in IOS go at the bottom of the screen.
Check out these IOS Human interface guidelines, as they call it,
from Apple. They have guidelines for all the components that are available to the ...
2
votes
Convert PX to DP
Your formula is incorrect. As a reference,
Android Development Guide says,
px = dp * (dpi / 160)
so the actual formula for dp is
dp = px / (dpi / 160)
Hope that helps!
For the second part of your ...
- 323
2
votes
Accepted
What software do you recommend for creating a logo
To give you the answer you're looking for, most people would probably still be using Adobe Illustrator to design logos. There are some free alternatives to that and of course, Zach's answer should ...
- 29.3k
2
votes
Choosing a color scheme for 3 layers of material UI cards
Well, this is exceptionally opinion-based...
You could merely drop the variation behind the tiles. It provides nothing which is beneficial. The tiles themselves offer enough separation.
If you ...
- 209k
2
votes
Accepted
How to improve this GUI for smartphones?
I didn't really want to answer, but I just blurted out everything I had to say about it in a comment and it got too big. I wrote this on mobile late at 2 am so it may be a little whatever. I may come ...
- 15.5k
2
votes
How to improve this GUI for smartphones?
As I see it, the main problem is the large serif font you have chosen. This of course is my own opinion, but I really don't like it, and I don't think it matches or compliments the other text or the ...
- 86.3k
2
votes
Good way to highlight important values in limited space
I would choose to be clear and prominent in highlighting.
Sample color is irrelevant. Alter to fit the app theme.
- 209k
2
votes
Accepted
Cannot integrate Zeplin into Figma project
It seems like your are viewing the file with only viewer permissions. In order to activate Zeplin integration, you have to have access to edit the file.
Contact the file owner so they could upgrade ...
- 255
Only top scored, non community-wiki answers of a minimum length are eligible