Hot answers tagged

41

There are a lot of ways to animate things on the web. There are even more ways to create animations then export to web-playable animations. There are huge benefits to designing animations in something like AfterEffects or Animate CC (which can both import Illustrator and Photoshop files) for the obvious reasons of division of labor and use of a graphical ...


18

Do web designers need to know basic modern CSS and HTML techniques? Yes. Why or why not is this important for a well rounded web designer? I answered "yes" because you used the word basic. It is absolutely essential that web designers know basic HTML and CSS techniques, in the same way that architects must know something about physics and material ...


18

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself ...


16

A web designer should understand how code works and what it's capable of, in the same way a print designer understands what ink on paper will look like and how paper can fold or be cut. Any designer should understand the limitations and strengths of the chosen medium. If a web designer is creating this drop-dead gorgeous site, it would behoove him or her ...


16

It is called subpixel rendering, or subpixel anti aliasing. Microsoft does something similar for most windows applications. Your screen consists of colors that are next to each other. If you do a simple sample based anti aliasing you do not get the best possible result. But by leveraging of the knowledge of how the pixels are laid out you can get better ...


15

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text? This would allow the font to work on basically any image also. div { position:absolute; top:250px; left:140px; width:500px; height:50px; background-color:black; z-index:0; opacity:0.5; } EXAMPLE


14

Gotta disagree with everyone. Photoshop is not a tool for designing a web site. It's a tool for sketching out a web site. The web site should still be designed in the medium that it's in--which tends to be CSS, HTML and JS. That doesn't mean you don't use Photoshop. But you certainly don't have to. I'm a huge fan of not ever showing web site designs in ...


12

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters: font-family: Raleway; font-weight:900; text-shadow: 0px 0px 3px #000; You can even combine more than one text-shadow to create a definite outline as well as a blur: text-shadow: 0px 0px 3px #000, -...


11

You could use CSS (keeping in mind this won't work with older versions of IE). For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle. HTML: <div id="square"></div> <div class="align"> <div id="triangle-topleft"></div> <div id="triangle-topright"></div> </div&...


11

I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people usually code in an IDE. One thing you have to understand with slicing is if you have a responsive website you're going to spend a ton of time trying to cut a ...


11

Skeuomorphism is really the opposite of flat design. Google's "Material Design" is merely their branding name for their specific interpretations of flat design. It's still flat design though. "FLat Design" was coined by Apple when they released iOS7. It caught on because it was the first term used, it could just have easily been called "Material Design" if ...


10

The advantages tend to be primarily: Rapid Prototyping (ie, speed) Built-in Cross browser consistency If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework. All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...


10

I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalized template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together. However, I can't help but wonder if Bootstrap ...


10

If you mean something like this: Edit: here's a way which only requires one HTML element and so won't be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, 'no style' apps etc (thanks to Dominic for suggesting trying :before and :after). http://jsbin.com/UtUlIFO/2/edit The important code (add your colours to this): ...


10

Demo css .demo-container { height:300px; overflow:hidden; display:block; position:relative; /* CSS3 Gradient */ background: rgb(125,126,125); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/...


10

I didn't love the answers and comments already provided; too much code for a simple sphere in html - css. You can simply do: <div class = "sphere">Test</div> The CSS: body { background: #333; } .sphere { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #FFF; margin: 100px auto; /*...


10

Is is possible? Yes. Technology-wise, you would do the same thing you'd do for language localisation (see this related SE question for the specificities). Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale). Source Seems ...


9

I used an automatic photoshop script once and worked well. The concept is : Each portion is a different image. Each portion (and so, each images) must be in the same folder w/o any other images. Run the script indicating the folder and some parameters (size, css name, etc...). The script does : Merge all images into one with the size you indicated. ...


8

CSS TEXT-JUSTIFY This IE-only property offers a refinement on the “justify” value used in the text-align property. Indeed, the “justify” value must be set for that property for text-justify to have any effect. text-justify offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models ...


8

You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones): Create the mockups in Photoshop or similar software, and then manually re-create them in HTML/CSS; Create the design directly in HTML/CSS. In option 1, you would basically use the photoshop file as a reference, mostly to calculate distances ...


8

Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked. This is just a quick sketch, but you can get icons like this from Bootstraps library.


8

Mobile first is best practice -- it's not law, and if you understand why you should be using it, and why you don't want to use it on a particular project, that's fine. It's worth noting that mobile first affects the design/UX and the build itself, and as this is a graphic design forum, I'm a bit perplexed as to why you think a mobile first design will ...


7

Just one thing to say: WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW [EDIT] Update - OK - I concede there are some much wider characters: ؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁؁


7

The 2 fixed columns with 1 fill column has been referred to as "The Holy Grail" of CSS layouts. Check out: http://www.alistapart.com/articles/holygrail/ The example on that page is geared for fixed gutters and variable center column, but the concept is the same.


7

** EDIT ** New Client? Absolutely - If you're pitching a design for a NEW client/site. Lay-folk generally have a hard time seeing what's in your(my) head. Wireframes, drawings, etc. don't always cut it either - scratch that - they don't cut it. I hear more, "I thought it was going to do X" from clients when all they have is a WF, or sketch than I do when ...


7

Check out The League of Movable Type over at http://www.theleagueofmoveabletype.com/. All of their fonts are free, designer-created, and come with the fonts needed for @font-face usage.


7

The real answer to this question comes directly from asking "How does it work in the real world?" An effect like this will seem artificial and wrong if it doesn't mimic what would happen with a physical object. This is a general principle that applies to all the effects we use on websites, on paper, or in movies. A classic error in Photoshop compositing is ...


7

The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...


7

If it's visual representations of elements you're looking for, nothing beats Firefox's 3D view. Open Firefox, press F10 to show the toolbar if necessary, go to tools, hover over web developer and get familiar with all those awesome tools. To open the 3D view, make sure the console is visible by selecting one of the options in the web developer menu such ...



Only top voted, non community-wiki answers of a minimum length are eligible