Questions tagged [website-design]
Questions about designing the aesthetic look of websites, both practical and theoretical. For questions about coding the structure of a website, please go to Stack Overflow. For questions about the user experience, please go to UX.SE. Ask anything related to designing graphics and visual layouts here on GD.SE.
1,461
questions
4
votes
3
answers
4k
views
What is the optimal contrast ratio for best readability?
According to the W3C (and another question on this site), the contrast ratio between body text and text background should be at least 7:1 for good legibility. Google takes this up in their typography ...
- 173
0
votes
2
answers
46
views
What formats are commonly used in animated elements on web pages?
What is the industry standard format for animated elements on web pages? I know these can be videos and GIFs, but it doesn’t seem as if these formats are providing high enough quality, and video files ...
- 36.2k
0
votes
1
answer
326
views
Svg file exported from illustrator rendered incorrectly on IE and Edge
The svg file code:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="811.49" height="817.74" viewBox="0 0 811.49 817.74">
<path class="b" d="M692.4,290.2c5.4-4.2,6....
CommunityBot
- 1
109
votes
12
answers
392k
views
Is there a free 'Helvetica Neue' alternative?
Does anyone know any other fonts similar to Helvetica Neue (free for commercial use)?
I'm working on a big website project where 'Helvetica Neue' is used heavily. I need a font that looks almost the ...
CommunityBot
- 1
13
votes
5
answers
9k
views
Is there a specific term for horizontal gutters?
Context
My team is working on a responsive website and we allow the user to configure some of the properties of the page, including the spaces between the grid "cells". We had a conversation about the ...
- 1
0
votes
2
answers
439
views
How can I add a hyperlink to a text in adobe xd?
I cannot add a hyperlink in adobe xd text. I want a text which should show a hyperlink on drag or onclick of it.
Like we can do in Figma by clicking the (CTRL + K) key.
So my question is how can we do ...
CommunityBot
- 1
1
vote
0
answers
35
views
How do I go about colouring visited links?
I'm making a website for my software company. Originally, I made the "visited" colour for links a darker version of the primary link colour. Looking back, I decided that the dark blue colour ...
- 17
0
votes
1
answer
98
views
No idea how to reproduce this gradient, any advice?
Any idea how one would reproduce a similar effect? gradient but how, i have no idea
- 4,061
0
votes
1
answer
49
views
What is the best way to handle dozens of partner logos in dark mode?
I am preparing a website to look good in dark mode. Some pages have a ton of partner logos that look very bad when in dark mode because they have black text for example. But they use additional colors ...
- 11
1
vote
1
answer
141
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 ...
CommunityBot
- 1
9
votes
8
answers
12k
views
Is there any way to save a Web page screenshot with a transparent background?
I prototyped my web page directly in HTML/CSS, using custom fonts for header text.
The font rendering however is very different on Windows, so I would like to export some parts of the Web page to ...
- 143
0
votes
1
answer
77
views
Need help with selecting a color pallets for light and dark modes o a site
I'm building a e-commerce site as part of a project and to make it more catchy, wanted to add a dark mode to my site. And, also I'm open to suggestions on the colors used for light theme built ...
CommunityBot
- 1
2
votes
1
answer
76
views
What are the ways to present an unfinished software / WWW to a client while making it obvious it is work in progress?
Sometimes I would like to present some work and indicate clearly - this is work in progress - waiting for the final designs - but you can already test the functionality.
1st thoughts - pink comic sans ...
CommunityBot
- 1
1
vote
6
answers
4k
views
How much SVG is too much SVG?
I make vector illustrations and I also do a little bit of web design. I really want to combine the two. I have some ideas for some image heavy websites that use vector images in SVG format, and I ...
- 36.2k
0
votes
0
answers
50
views
Need help with a color-coded design
I am but a simple BA, and I am currently working on adding functionality to an existing web application. I am told there is no budget for a UI designer! So I was hoping I can get some feedback on this ...
- 11
1
vote
1
answer
946
views
Position sticky in Figma
Is it possible to apply fixed positioning depending on the point where the scrollY is (on the vertical axis)? Just like you would with CSS with position sticky?
CommunityBot
- 1
2
votes
3
answers
1k
views
On Display Resolutions, Scale and Layout in Windows 10
On my last project I was designing a website in Figma and I realized there is a problem I was not so aware of.
In Windows 10, at the Display Settings, there is an option for Display Resolution, this ...
- 1
0
votes
0
answers
76
views
Mobile app design size
Mobile app design size
What size is more appropriate and common for mobile application design in XD Figma software?
CommunityBot
- 1
1
vote
1
answer
70
views
Optical Illusion with status indicators
I'm currently setting up a small html front end for the result of our automatic software build. We develop on three platforms ( windows, macos and linux ), so I thought of just displaying the icon of ...
CommunityBot
- 1
15
votes
3
answers
16k
views
How to create a lighter/darker shade of a color for the hover state of a button
I've been designing buttons for a while now but when it comes to selecting the color(s) for the hover state of either a gradient or solid its been mostly been a matter eyeballing a darker tone.
Is ...
- 101
30
votes
10
answers
39k
views
A good monospace, condensed and open-source typeface?
I'm looking for an optimal typeface for report tables that will contain many columns (the reason for condensed).
The reason for monospace is that these reports will contain a lot of numbers and we ...
- 140
0
votes
1
answer
45
views
How to optimize a website design?
If you have a working website, is there a way to tell if parts of it are bad or good?
For example, I have created a cryptocurrency platform which I develop as a hobby project whenever I have spare ...
- 13.3k
1
vote
3
answers
86
views
Style reference: What do I ask the web designer for so that I can develop what has been designed?
A graphic designer has finished the design portion of a large web project my team and I will be developing. (Only jpegs were sent.)
I will be responsible for all implementation of the design, ...
- 13.3k
1
vote
0
answers
44
views
How to tell a client their Logo needs reworking? [duplicate]
I am designing a website for someone who has given me an undigitised logo of them they have not used anywhere yet. I do not know where it came from so need to make sure it isn't just a slightly ...
- 36.2k
13
votes
3
answers
10k
views
How do you animate SVG for the web?
Vector graphics are now taking over the web and even mobile applications. Icons, buttons and elements of web pages or mobile apps are now becoming increasingly vector based, dropping bitmaps because ...
- 13.3k
1
vote
1
answer
70
views
Creating complex animation for web
This question is a rebirth of How do you animate SVG for the web? with little additions to modern realities.
My question is this - how to create complex animation for the web? By complex animation, I ...
- 13.3k
31
votes
3
answers
31k
views
What's the best way to animate an illustration for the web?
I have a couple of illustrations done in Illustrator and I am planing to animate it for a website that I am working on, I've heard of Create.js toolkit with flash, but is it the best way to go or is ...
- 13.3k
1
vote
2
answers
992
views
Why is there no unit for (EM * line-height) or (REM * root line-height)?
This issue has been really vexing me for a while.
Across the web (and in CSS frameworks like Bootstrap), REM is commonly used for everything from padding (example: padding: 2rem;) to border-radius (...
- 11
0
votes
0
answers
49
views
What is the 60 30 10 color rule?
What is the 60 30 10 color rule for website?
How to choose the best color scheme for your website?
-2
votes
2
answers
72
views
Designing a banner advertisement
I have to create a 728*90 pixels banner advertisement for a website that has a product image and text. The product image I have is a 5mb .tiff file. What program should I use to create the advert? I ...
CommunityBot
- 1
-1
votes
2
answers
112
views
What is the minimal color palette that as long as we stick to it, then in general, there won't be any color contrast problems whatsoever?
I am not an ophthalmologist and not very familiar with color cognitive biases or blindnesses, so there might be a false premise in the following question or in possible discussions.
I also don't ask ...
- 57.6k
1
vote
2
answers
324
views
Web design for retail / e-commerce site - essential elements?
I'm developing a Rails site for my company that's going to be a web store for our entire inventory. I don't really have a lot of experience with design (I am the one-man IT department at my company, ...
CommunityBot
- 1
0
votes
3
answers
1k
views
Looking for examples of "thank you" e-mail designs
I've been tasked with creating "thank you for attending" HTML e-mails/graphics for a number of events. I've already done a few, but they all need to look distinct and I'm running out of ideas. Does ...
CommunityBot
- 1
1
vote
2
answers
15k
views
How to create a fade effect with CSS on background with an image on top of it?
How to create a fade effect with CSS on background with an image on top of it?
I'm trying to replicate the image slider on https://www.masterclass.com/
CommunityBot
- 1
0
votes
1
answer
35
views
Why is my SVG File for WP website not sizing it pixilates when viewed larger
I have created a header logo SVG in illustrator, using the code to insert it, and if zoomed in, it gets soft and pixeled.
1st Logo) The Top one is a SVG Code from Adobe Illustrator Inserted in HTML (...
- 83.5k
0
votes
1
answer
87
views
Difference between corporate design and brand design?
Hi guys I need your help! For a study project I have to change the appearance of a real company. Now it looks like the company A want to implement a new project. This should not adopt the design of ...
CommunityBot
- 1
0
votes
0
answers
57
views
Is this approach to website design adequate or am i making a mistake?
I'm not conversant with this topic, therefore i watched a tutorial about a one-page dynamic PHP website (quite educational in my opinion) in which the creator designed the following pages.
For each ...
3
votes
1
answer
80
views
Do my components have enough white space?
I've been working on a project but the more I see my components, the more I think they don't have enough white space.
The two components with which I have more doubt are a dropdown and a group of ...
- 29.1k
0
votes
0
answers
38
views
How to develop separate visual identities for different educational programs on the same website
I have been asked to work on a visual identity project.
The company is an academy (parent company) which has a single website.
However, the academy separates its programs into 4 fields of music ...
- 1
0
votes
1
answer
83
views
Advantages of non-white background in typography
Financial Times website has a non-white background, namely, 255,240,229 in sRGB. However, the text is not black: 50,48,46 (the title is black).
Are there any advantages of such color scheme for web ...
- 8,471
0
votes
1
answer
36
views
When designing a simple website toolbar layout in powerpoint office 16, is it possible to animate menu items to expand and collapse upon clicking?
I am designing the layout/look-and-feel of a website in Microsoft PowerPoint (Office 16) on Windows 10.
The website I am designing will have a horizontal toolbar at the top that will allow the user to ...
- 208k
43
votes
5
answers
15k
views
What is the purpose of using a very dark color for text instead of a pure black?
I have seen that some web designs implement an almost black font color (hex #001c00) in their designs instead of a pure black color (hex #000).
Does the design actually benefit from this or is this ...
0
votes
1
answer
94
views
Serving a book as an interactive webpage where readers can flip pages, with some page flipping effect
I have a 60-page (i.e., 30-sheet) book (to be more specific, a photobook), in JPG format.
I'd like to serve the book as an interactive webpage where readers can flip pages, with some page flipping ...
CommunityBot
- 1
12
votes
6
answers
6k
views
Is programming a website for mobile first really necessary?
I've read through a number of sources which state mobile first design is almost essential, which I can't deny it does have obvious benefits such as faster load times for mobiles which generally have ...
- 101
7
votes
1
answer
116
views
What's procedurally important in web building circa 2022?
I'm essentially seeking a "crash course" or explanation in any web building changes over the past few years - best practices, new methods, new pitfalls, etc.
It's been a number of years ...
- 208k
-1
votes
1
answer
332
views
What is the name of this website design style which almost look like MacOS inspired
I am just a front end design buff. Now a days I am observing website design looking like Apple's UI design for it's mac and ios applications, but not able to find any article or tutorial explaining ...
CommunityBot
- 1
8
votes
6
answers
20k
views
how to add one smart object in multiple files in photoshop?
I know I can do multiple iterations of the same Smart Object within the SAME document and have it change all instances, but what about Smart Objects placed across DIFFERENT documents? That would be ...
CommunityBot
- 1
0
votes
1
answer
54
views
Color scheme implementation suggestions for dark purple and neon pink
(Although 'opinion' certainly may be in play here, there seem to be some consistent best practices about color usage on the web, and this question is about how to handle the scenario where violations ...
- 57.6k
10
votes
3
answers
1k
views
How do designers choose shapes in a design?
A lot of times, while browsing through sites like Dribbble, one comes across sites that use shapes. For example, this one:
Sorry for being naive, but is there a reason behind choosing a particular ...
- 1,843
1
vote
1
answer
343
views
Tool to create generative / procedural abstract art for website backgrounds
I need an abstract, unobtrusive background for a website, something similar to
or
Is there a tool that can procedurally generate such images with great variation?
It should have many parameters that ...
- 169