Questions tagged [interface-design]
Questions about developing and implementing graphical elements of a user interface such as controls, aesthetics,
524
questions
0
votes
0answers
31 views
How do you set a grid when you have a sidebar? [closed]
need to design a simple dashboard with a 240px sidebar menu for a 1440px screen size. The layout has to based on Bootstrap 4 Grid.
So I set a grid with a gutter of 30px - but how do I determine the ...
0
votes
1answer
58 views
Display Drawing with true scale
I am trying to display a drawing with true physical dimensions. I want the dimensions of the drawing that's being displayed to be accurate. How do I achieve this?
1
vote
0answers
24 views
Is there a way to convert Rectangle into Outlines in Sketch?
The problem with rectangles appears when you scale them up or down — they doesn't scale rounded corners. I'd like to keep rounded corners proportion to the rectangle size, that's why I thought that ...
0
votes
1answer
59 views
Designing the Rating of a quiz game [closed]
I'm trying to design a quiz game in which users have to answer 10 questions in each level. And when the quiz finished, user gets their Rating. The rule here is that up to 3 mistakes is allowed but ...
0
votes
1answer
21 views
Sketch, how to find and replace “text style”
I have a library file in Sketch and I need to replace a specific text-style with another one, in all the instances it is been used across the file.
Is there a way to find and replace the text-style?
5
votes
4answers
1k views
How to indicate dark mode / light mode options on a user interface?
To indicate a button on an interface that switches to dark mode or to light mode, it's common to have a couple of sun/moon icons:
🌞 for light mode
🌙 for dark mode
But at least part of my brain is ...
0
votes
0answers
30 views
How to set up a font style guide for any font?
I am working on a mobile app UI design in Adobe XD. Before starting the design I would like to setup a font style guide. What I have achieved so far is in the attached image. I am using a typeface ...
1
vote
0answers
36 views
When icons are used as glyphs, is it necessary to create them at double the intended resolution? [closed]
eg. 16x16 is the intended size, do I need to create them at 32x32 or higher for sharpness on screens with high ppi? any help would be greatly appreciated.
Edit: looks like I was conflating ...
0
votes
2answers
20 views
Can you pin a symbol or layer to the bottom of an artboard in Sketch?
I'm working with a footer symbol and I want it to always stay pinned to the bottom edge of my artboard, so when I lengthen or shorten my artboard when I'm adding content, it stays pinned to the bottom,...
0
votes
1answer
47 views
Replicate drop shadow effect
I'm trying to replicate a drop shadow effect displayed here, but can't seem to get it right.
The project has this section which seems to explain how to perform the effect, but I feel I'm doing ...
0
votes
1answer
18 views
WCAG Compliance - Does Acceptable Contrast Apply Only to Text? Or Icons and Other Graphics as Well?
I am completely new to WCAG compliance and I have several questions.
I.e. say that you’re using this tool:
https://color.a11y.com/ContrastPair/?bgcolor=ffffff&fgcolor=3580BE
to check the ...
0
votes
1answer
25 views
How to add images and videos to screen mock ups?
I'm a beginner in UI right now and I wanted to upload my work on Behance. But I want to put my project images on the iPhone screen mock-up. I did know basic things about it but still confused about ...
1
vote
1answer
473 views
When prototyping in Figma, can I make the frames automatically fit the device screen width?
I'm new to Figma, just started learning it today, so maybe I'm missing something obvious.
I have a frame with a design that uses constraints to scale nicely to different screen widths. When I ...
-1
votes
1answer
41 views
A website with a large tree-structure diagram
I have a (personal) project that involves a tree-structure diagram (i.e. hierarchy chart) containing about 450 articles (or whatever the different parts are called) each with about a paragraph or two ...
3
votes
2answers
340 views
Why are these two designs considered outdated and old-fashioned?
I have a project where the main important part is the back-end. But of course the front-end design is important, so I have made two different designs for the demo site.
But both designs are ...
0
votes
1answer
66 views
Looking for feedback to design a tabbed menu
I am working on an e-commerce website. I am creating a Shopify app for the e-commerce website, and I want the shopify app to be within a tabbed menu.
The app has 2 tabs:
Product Mapping: for ...
1
vote
1answer
69 views
How to solve overlapping shadow issue?
In a UI with multiple cards arranged in a grid, the shadow of cards are falling on top of other cards. All these cards are supposed to be on the same level (elevation/depth). Is there any way to solve ...
0
votes
1answer
38 views
Measuring units for Android UI Design
I am designing a mobile app for the Android OS. I am currently using Adobe XD. What is the base screen size that I can use to start designing so that 1px is equal to 1dp or 1sp. Also what is the ...
0
votes
1answer
55 views
Save and Close Icon
I'm building an interface for an admin page. The admin clicks a button to choose an icon to save and close the data table instead of autosave.
I have always been stumped as to which icon is best ...
3
votes
2answers
392 views
What is the name of this UI Element?
I'm looking for the exact name of the UI card (?) element marked with the red dashed lines here that is often used for product purchases. Does anyone know the name of it?
6
votes
3answers
865 views
Do I need to be Creative and Artistic to be a graphic designer?
I don't like to draw things, and I'm not so creative and artistic.
Can I become a graphic/UI, UX designer?
Your kind suggestions are highly appreciated.
0
votes
2answers
64 views
iOS App design Base size
I am designing a mobile app for iOS. What is the base screen size that I can use to start designing the UI of the app so that there won't be any issues while exporting the icons and assets for the ...
0
votes
1answer
180 views
How to set override to “no symbol” by default in Sketch?
Let's imagine I have a Master data cell symbol and several tables that already use instances of it. There are no dividers in the Master cell symbol so far, so I want to add them. I create a master ...
3
votes
3answers
122 views
How do I differentiate between vegan/vegetarian, wheat/gluten or dairy/lactose icons?
I'm a newbie in the UI world, and recently I have been asked to create nutrition icons that are clear and can be easily identified by the users.
I have been having some problems trying to ...
0
votes
0answers
27 views
What is this navigation method called? And how can I implement it into WordPress/Divi Builder?
I'm in the process of doing a reskin on my company's website. Hoping to include a navigation method similar to what's used on Tesla's homepage on the left. I want it to be reactive to where the user ...
3
votes
2answers
576 views
What is the most intuitive and obvious copy link icon?
I'm building a blog interface and I need a button to represent my copy URL link action in my blog post pages. The button will be side by side with other social media share icons. I'm trying to decide ...
0
votes
1answer
33 views
Using text styles that are not included in DLS
We have 15 text styles in our Design Language System and sometimes I face some situations that I have to use some other text styles instead of the existing ones. Is it weird to use some typography ...
3
votes
2answers
209 views
How to begin designing PDF Business Reports
Hello guys how are you?
I would like some help from you because I'm a little lost. Next year I will have to develop pdf files styles in my company. It is a financial company and I was asked to ...
0
votes
0answers
102 views
How to remove background color from bitmap which is added in image in sketch?
I want to add a transparent background color to a bitmap in Sketch.
1
vote
2answers
53 views
Method / Software for Creating Images based on Dynamically Updatable Templates?
So, for example, I want to create 2 ADS but the text and the photo featured will be different between the two.
How can I create the same design using something like a template that can also be updated ...
1
vote
1answer
54 views
Icon to represent component [closed]
I am building a drag and drop web builder.
One of the actions requires that the user select a "component" from the sidebar and drag it across the page. Once they drop it, the component fills the page....
0
votes
1answer
118 views
Scroll bars (horizonal / vertical) on the Adobe XD window's viewport
I'm using Adobe XD to design UI but unfortunately, it does not currently provide scrollbars to navigate the view of my content.
0
votes
1answer
273 views
How to show the link is clickable ? Mobile UI Design
I am prototyping a profile interface for a social network app and I can't figure out how to show that the links in the "Progression" card are clickable.
I put some interrogations points, to point ...
0
votes
1answer
63 views
Could not find a navbar background that fits with my logo
I recently changed the logo for my company but now it does not fit anymore on the navbar. The color of the logo are #3331a1 and #a8b0c6. I don't really want to have a white navbar but seems to be the ...
0
votes
0answers
13 views
Sketch: new raw in symbol when change title?
I think remembered a technique from long time ago: when you had an component in symbol with 4 raws (or repetitive elements) nested, it was possible to had element only with changing name of title.
...
0
votes
1answer
51 views
Design of item listing on sidebar
On the sidebar for a web application I am working on, I have an option to allow users to change their current template.
I think the current design looks ok, but it doesn't really seem engaging or ...
-3
votes
1answer
78 views
What is the name of design language which contains flat humans shapes and semi-gradient shapes?
Recently, lots of websites are using a new design method/language which combined from flat shapes with semi gradient style and flat human bodies?
eg: atlassian.com
eg2:
What is the name of this ...
2
votes
1answer
69 views
How to change the colors of these lines from Adobe Illustrator?
I would like to change these colors of the lines in the red frame, from Adobe Illustrator. Is it possible?
2
votes
1answer
56 views
How to deliver a UX/UI project to the client? [closed]
For a long time i've been learning and improving my skills with UX and UI design. I completely know how to manage tools like Adobe XD or Invision Studio (not Sketch because I don't have a Mac), but I ...
0
votes
1answer
40 views
What color scheme to choose for background color of different section in one page website?
I have a website page with different sections like about us and contact us. I was learning about color wheel schemes but it is still unclear if I should use complementary or analogue scheme for ...
-1
votes
3answers
89 views
How to display a title over an image?
What's the best way to put a title on top of an image?
I'm exploring the following options.
The image and title will be user submitted which make things a little bit harder.
The specific question ...
0
votes
0answers
83 views
Why does the composition/frame of a design looks distorted sometimes?
Sometimes, when I work on some designs, the everything looks fine except the overall frame (I don't know how should I describe it).
For example, see these 2 designs:
And here is how I see them ...
1
vote
3answers
624 views
Sketch - Text not resizing with symbol
Summary
I'm trying to resize a symbol in Sketch and the text is not resizing with the symbol. I have "adjust content on resize" enabled and it's still not working.
What I've tried
I've also tried ...
0
votes
0answers
37 views
Can I shorten/change the name of a font in my app's menu?
I am making an app in which users can select a font, however some of the OFL fonts I have collected have a name which doesn't fit in the font selection menu. Is it ok to shorten or change the name?
1
vote
2answers
110 views
Business Leads Icon
I'm building an interface for an admin page. The admin clicks a button to choose an icon to see how many business leads received.
I have always been stumped as to which icon is best suited for use on ...
0
votes
2answers
35 views
How do I let the user know a menu will appear on touch slide?
If I have an hamburguer icon on mobile devices, how do I let the user know a menu will appear on touch slide instead of clicking the icon?
Is there any visual trick both for the touch slide left and ...
1
vote
1answer
43 views
ADA Color Contrast - Best Practices
We're currently working on a new website and ran some tests to check ADA compliance on our website.
There's a color we're using that isn't compliant on certain font sizes.
We also use this color on ...
0
votes
1answer
928 views
Can we put back button at the bottom in iOS app? Are there any apps in App Store like that?
There is a usability issue of reaching back button in iOS because it is on the top left. I want to put it at the bottom left for reachability. But my developer says it is against Apple guidelines. Can ...
0
votes
2answers
37 views
How to fix the problem for the color schemes differences for the mac and windows screens [duplicate]
I am a product designer, I use MacBook Pro for my design work. Whenever I design an app/website/web pages after it went live the big problems comes up as color differences in the Apple screen and ...
0
votes
0answers
23 views
iOS checkboxes and radio buttons default components
I have a question regarding the default component for checkboxes and radio buttons in iOS.
[Context]
In this flow, the user will have to create a two period charging recurrence (for a service), ...
