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 ...

learn more… | top users | synonyms (2)

1
vote
2answers
120 views

Can anyone recommend a design book that has a strong pragmatic web orientation?

I've been looking through the site recommendations and other people's posts requesting beginner's design books but have yet to find anything that meets my specific tastes. I'm not looking to make ...
1
vote
1answer
36 views

Designing properly for the web - grids for bootstrap and preparing files in photoshop

I have graphic design skills but never designed anything from scratch for the web (except using wordpress templates). I have a lot of experience in Photoshop but not a lot in web. I want to start a ...
0
votes
2answers
61 views

Using Generate Image Assets to get repeating background from a shape with Photoshop CC

Rephrasing my question for clarity. I have a navigation bar that I've created from a Shape that has a border and a gradient. How can I use Generate Assets, or Extract Assets to get 2nd end caps and ...
2
votes
1answer
29 views

When trying to achieve the “ideal” letter count per line how do you balance container size and font size?

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both ...
3
votes
3answers
119 views

Illustrator is cropping exported icons despite artboard being Fit to Selected Art

I'm trying to export certain graphics from an Illustrator file. I'm selecting the object, fitting the artboard to the selected artwork, and saving for web & devices, PNG-24 format. When I look at ...
4
votes
1answer
113 views

Are zebra stripes on tables more effective than good spacing and visual contrast?

In old forms or webpages I often see a lot of zebra striping used on the tables because the way the table was designed it was difficult to see the rows and columns easily when you want to locate ...
5
votes
1answer
94 views

Web design for Legal pages: What are some things to keep in mind?

So I have been looking around but cannot find any good advice on how to go about designing a page for legal matters. These pages would clearly state Privacy Policy, Terms of Service, etc. I think ...
3
votes
2answers
2k views

How to handle multiple page design projects in Photoshop

Recently we have moved from using Fireworks to using Photoshop for mocking op website designs. As I've been used to Fireworks for doing this, I'm running into some issues organising my mockups. Where ...
0
votes
2answers
52 views

Changing color scheme of calendar icons?

Here's the image I'm working with: I'm wondering if it's possible to automatically change all the images to using a color scheme close to #489fdc. I've tried making changes in Paint.NET and ...
5
votes
5answers
425 views

Best practices for full width browser images?

What are the best practices people follow in respect to images on larger viewports? What size browser should we design for? Meaning how do we deal with high resolution monitors and what % of users ...
24
votes
12answers
2k views

Do web designers need to know how to code?

As a web developer, both front-end and back end architect, I work with many different designers and sometimes find it frustrating working with design comps where no thought was put into how to ...
2
votes
3answers
83 views

How should I prepare my fonts to support a Chinese version of my website?

Wondering... Should I first make sure the font I selected for English supports Chinese characters as well, or after selecting any font for English then search for other font for Chinese that matches ...
5
votes
3answers
345 views

Do most web designers make their own textures?

I'm a web developer by training who is branching into UI/UX design. One of the things my design work lacks compared to experienced designers is subtle use of texture, such as on these sites: ...
8
votes
2answers
364 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 ...
0
votes
2answers
90 views

Critique: how can make this 3-column dashboard design flatter?

Attached you see my current design of a 3 column dashboard. How can I improve this design in a more "flatter" way? Be warned that I am no designer, so if you have links to tutorials that would also ...
5
votes
3answers
157 views

How can I left-align the text in a table of divs so that the rows are evenly distributed?

I'm trying to arrange some names. I changed them out before posting using generatedata.com but the real ones are in alphabetical order from left to right each row. I'm trying to figure out how to get ...
0
votes
2answers
101 views

How to optimize my pictograms for Retina screens?

Surprise when I saved my pictograms for the Web (from Illustrator): They are strictly not as clean as expected => totally blurred. Here's an example from my Retina smartphone: And the initial ...
0
votes
0answers
34 views

Why do photos jump around when exporting from Muse?

My company is trying to slowly move towards digital and we are in the process of learning Adobe Muse as a stepping stone to more legitimate web practices. One issue we continue to encounter is our ...
0
votes
1answer
37 views

Changing Color Scheme Automatically?

Here's my image: I'm wondering if it's possible to automatically change all the images to using a color scheme close to #489fdc. I've tried making changes in Paint.NET and Photoshop, but haven't ...
1
vote
2answers
222 views

How to export .svg file from Adobe Illustrator with shape IDs?

My question is very simple. How to export an SVG file from Adobe Illustrator with shape IDs? When I export as SVG my group names turn to groups with group name as ID, that's the behavior I would ...
5
votes
4answers
898 views

Good sites to find textures online?

I'm always on the lookout for good textures, as they are pretty subtle but can add a lot of life to your site. Recently I found Tileables (http://tileabl.es/) which looks pretty cool. Can you ...
3
votes
2answers
108 views

Should my website's typography use the same font as my logo?

I am working with a logo that is using ChunkFive Roman. What's the standard web design practices regarding this? Is it good design to use the same font as my logo for primary headers? (also a side ...
-1
votes
1answer
35 views

Web Design, Custom Image changed with drop down selection box?

I am curious to know how those "customize -random product-" objects are built. I assume some sort of flash is involved. There are many websites that allow you to customize shoes, shirts etc, and when ...
0
votes
1answer
134 views

How to visually differentiate between manual and automatic edit capabilities

I'm having some difficulty find an icon or solution to differentiate operation in the same table, but with different origin. In my table I have operation imported from a central system and others ...
1
vote
1answer
202 views

SVG files render differently in browsers - typography

I have a problem with svg backgrounds that render differently in browsers.In Chrome the letters are correctly gill sans light and two words are bold. That's not the case in Firefox. How do I fix this, ...
0
votes
2answers
69 views

illustrator pencil tool jagged line problem

I used pencil tool, but almost lines are jagged. I checked anti-aliased art work in preference setting, but it can't solve the problem. and I will use the picture for web. (700px * 344px) It is okay ...
1
vote
1answer
63 views

Adobe Illustrator 'Align to Pixel Grid' Problems

I'm using Adobe Illustrator to produce the UI designs for a complex web app and I need pixel accuracy. However, Illustrator seems to be a bit of a pain when it comes to pixel accuracy as its not doing ...
0
votes
5answers
141 views

Web mock up to Dev

I was curious what is the process/ workflow for a web project. Specifically if you as a designer created a mockup in a (.psd or .ai), and you need to hand it of to the developer. Do you annotate the ...
0
votes
1answer
26 views

When saving image for Web, outlines change

I have an imagemap with a click and mouseover function on several areas. I edited and saved the images in Photoshop with the option "Save for web". I used PNG-8 with 256 Colors. Performing the ...
2
votes
3answers
353 views

What is the difference between “flat style” and “material design”?

After Windows 8 came out all spoke about "Metro UI" and later about the "Flat design". Now, after Android Lollipop came out all speak about "Metro design". Can somebody explain the difference between ...
21
votes
7answers
11k views

Which format is better for saving images intended for websites; PNG or SVG?

When exporting / saving images with a transparent background that are intended for websites, should I save it as PNG or SVG? Why?
3
votes
4answers
411 views

Web Design: Is centering a content section a good idea?

I have a design where the header and footer are 1170px wide. (Standard Twitter Bootstrap 12 column container size.) I have been reading about the ideal width for good readability and discovered that ...
8
votes
3answers
981 views

How can I create hand-drawn style graphics for my website?

I am developing a web page for web based application, i am new to web design, so forgive if i have asked very basic question. i want to create icons and embed into my existing png image file. i have ...
1
vote
3answers
101 views

Content as the whole page or just the content area?

This is an opinion question that I go back and forth on every time I start a new project. In most cases, I am designing a website that has some sort of "article" element, whether it be a blog post, ...
4
votes
3answers
232 views

Do and don't do with styling <html> and <body> tags

When I look at some CSS style for a web page, I typically first look at styling the <html> and <body> tags and then I look at other sub-elements. The styling of <html> and ...
0
votes
2answers
3k views

How to apply border on the right and bottom only?

I use 'Round Rectangle Tool' to create a rounded rectangle shape. I want to apply dark gray border on the right and bottom of a rectangle shape (layer). What is the solution to do this? I have tried ...
-1
votes
2answers
65 views

Color scheme not working?

I am trying to redesign my site however I am a developer and have no real UX experience beyond a VT 1300 course. I have chosen a color from my logo and created a complementary color scheme using ...
3
votes
1answer
3k views

Add a hyperlink within Illustrator

Is it possible to add a hyperlink to an object or a layer within Illustrator CS6 for a later SVG export? I know about the possibility to manually edit the exported file and wrap elements with an ...
5
votes
2answers
6k views

Colors to use with black background?

Is using yellow text on a black bg bad as Mike pointed out here? If yes what colors should I use (RGB or hex values)?
2
votes
1answer
78 views

Is there a rule of thumb or some guidelines for deciding what colour to use for a border?

What's the border color paradigm in terms of color schemes and background color? Some borders look nice on some backgrounds. Is there a rule of thumb when choosing div's border colors in respect to ...
0
votes
0answers
85 views

How to make Google Maps in Photoshop?

I'd like to find out how I can create a map similar to these: especially for web design project (in psd file). Do you know how to get that kind of maps? I suppose it can be something like ...
0
votes
4answers
289 views

Webpage image zooming or quality lose issue on mobile

I'm making a responsive site and my logo loses quality when I'm opening the site on mobile (iPhone, Android) http://kadmos.li/web/ji/stck.html My logo size is 266x68px and I'm not resizing it on any ...
33
votes
13answers
1k views

What web graphics formats to use?

Web sites can contain JPEG, GIF,PNG, SVG format graphics. Which ones should be used, and when?
-1
votes
2answers
81 views

What is the simplest and trendiest styles for a list layout on a website? [closed]

I'm working on a web page design, I have the content as a list view of upcoming events with some details about each event (time/location/description....etc) with 2 links at the top of the list to ...
2
votes
5answers
277 views

Client wants to remove footer on certain pages, should I?

I have a client who insists that we remove the footer from certain pages under the guise of 'the footer will distract people and they will leave the site/not finish the journey'. To me, this sounds ...
5
votes
2answers
513 views

Can After Effects be used for website prototyping?

I know one designer that is a motion graphics guy first, then a UI designer. Recently, produced a website design entirely in After Effects and got my thinking whether that approach can be a viable ...
4
votes
1answer
671 views

Should I use Hex or RGBA when designing a website?

I know this has appeared on StackOverflow already: Are there any good reasons for using hex over decimal for RGB colour values in CSS? Use HEX or RGBA But I'd like to ask on here since we're ...
8
votes
11answers
6k views

How to present web design mockups to a client?

I'm working on a website redesign project. I will need to present a few different mockups to the client for review. Besides sending images in an email, what is a typical way of presenting mockups to a ...
2
votes
3answers
1k views

Transparency dithering issue when saving for web

I am trying to optimize the graphics for a webdesign, since I am not satisfied with the performance in terms of load-times. The logo is quite big and in PNG24 so I experimented to see how much I could ...
0
votes
0answers
89 views

Rendering Issues with Proxima Nova Web Font

We recently launched a new website (backtothebible.org) designed by an outside company. The site uses Proxima Nova. The font renders great except for a few sizes on PC's. The issue--which is an ...