A directory of resources inthe field of technical communication.

Design>Web Design>Graphic Design

110 found. Page 1 of 5.

About this Site | Advanced Search | Localization | Site Maps

1 2 3 4 5  NEXT PAGE »



30 Beautiful Photo-Centric Web Designs for Inspiration

There’s something about photographs that manages to attract the attention of web users. Indeed, photos can be excellent design elements in a web design. Watch the file sizes of your web pages though; you have to strike a balance between aesthetics and page response times. From images of scenic landscapes to photos of people, the sites in this collection demonstrate the inspiring and visually tantalizing use of photos as chief elements in a web design.

Gube, Jacob. Design Instruct (2011). Design>Web Design>Graphic Design


3D Effects

Three-dimensional illusion effects are powerful devices that can achieve excellent results. They can also add significantly to overall page filesize, and can reduce usability if overused, so should be used deliberately and with care (unlike the title image above, see cooltext.com if you want one).

Hunt, Ben. Web Design From Scratch (2005). Design>Web Design>Graphic Design>3D


Accessible Data Visualization with Web Standards

When designing interfaces for browsing data-driven sites, creating navigation elements that are also visualization tools helps the user make better decisions. Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns.

Minor, Wilson. List Apart, A (2008). Design>Web Design>Graphic Design>Charts and Graphs


Add Inspiration With Illustrations

Which comes first, the concept or the artwork? The assumption has always been that you first figure out the concept, then find the art to fit. But even if we leave many things in our life unquestioned--design shouldn't be one of them.

Will-Harris, Daniel. Typofile (2003). Design>Web Design>Graphic Design


Art Direction and the Web

Introduces the principles and techniques of the art director, and shows how art directional concepts can shape memorable user experiences.

Hay, Stephen. List Apart, A (2004). Design>Web Design>Graphic Design


Artistic Distance

If you are passionate about what you create, it is impossible to completely disassociate yourself from your work in order to objectively evaluate and then improve it. But the ability to achieve “artistic distance”—that is, to attain a place that allows you to contemplate your design on its own merits—will enable you to improve your own work immeasurably and, ultimately, to cast off the immature shackles of ego. Learn to let your work shine by letting go of it. Acquire the knack of achieving artistic distance.

Burton, Paul. List Apart, A (2012). Articles>Web Design>Graphic Design


Attractive Vectormaps: A Call for Well-Arranged Webmaps

If a user has a choice between two maps he/she will often use the map with the 'better' design. This means a map, besides being readable, should be visually attractive, comparable with other maps and eventually deliver some tools to navigate and interact with a map. A further problem is that a lot of maps are not always self-explaining by default. SVG offers some possibility to make maps well designed. The readability is dependent on several factors: e g. the chosen colors, used fonts or minimal dimensions for symbols, line-styles and fill-patterns. The article is pointing to basic principles for designing visually attractive maps.

Dahinden, Tobias. SVG Open (2002). Design>Web Design>Graphic Design>Sitemaps


The Bathing Ape Has No Clothes

I do this because, well, I love design. More to the point, I crave design talk: who’s influenced who, what tools do you use, what trends do you observe, what rocks your world, and so forth. I get a lot out of this discourse. The signal-to-noise ratio of this particular subset of the Internet has always tilted strongly towards meaning. Until fairly recently, that is, when I started to notice a new feeling creeping into the sites I frequented. In what were nominally gathering places to discuss and celebrate online design, design seemed to be just about the last thing on anyone’s mind.

Greenfield, Adam. List Apart, A (2002). Design>Graphic Design>Web Design


Best Practices for Getting Started with SVG

Web graphics in SVG (Scalable Vector Graphics) format offer better quality display over a broader range of device sizes compared to bitmap-based graphics. SVG also has inherent accessibility making it the best choice for interactive graphics and those involving text.

Yu, Jennifer. IEBlog (2011). Articles>Web Design>Graphic Design>SVG


A Better Image Rotator

About a year ago, I wrote an article, introducing a method for displaying a random image every time someone visits a web page. Administration was simple: just add or remove images from a folder on the server, and they would appear (or disappear, respectively) from the pool of random images being displayed on that page.

Benjamin, Dan. List Apart, A (2004). Design>Web Design>Graphic Design>DHTML


Blueprint: Google Grid Gallery

This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media queries that adjust the grid layout and also the gallery view. In the gallery view, the arrow keys can be used to navigate and the view can be closed using the “Esc” key.

Lou, Mary. Codrops (2014). Design>Web Design>Interaction Design>Graphic Design


The Brilliance of Smart Photoshop Objects

When it comes to editing an image, that typically means going back into the image app, recreating the image, then putting the newly created image into your site. A serious GoLive advantage is that communicates directly with your imaging apps to regenerate a new image right in place on your page.

Mac Design Magazine (2005). Design>Web Design>Graphic Design>Adobe GoLive


Cleaner, Sharper GIF, JPEG, And PNG Images

While they're not absolutely necessary for Website functionality, images help improve the appearance of a site. With a few gcood quality, highly optimised images, you can give your site the edge it needs to leave a lasting impression. The problem is that many Webmasters, both novice and experienced, don't feel confident when it comes to creating clean looking graphics and optimising them for the Web.

Rutter, Thomas. SitePoint (2003). Design>Web Design>Graphic Design


Color on the Web

You're seeing red. They're seeing orange. Not the same, is it? More often than not, color on the web is approximate. So how do you choose colors that are going to work best? Are you forever stuck with the old 216 color 'web-safe' colors? Is there technology that ensures what you see is what your visitors get?

Will-Harris, Daniel. Typofile (2003). Design>Web Design>Graphic Design>Color


Color on Web Design

Psychologically speaking, different color has different meaning. From this point, this article focuses on the relationship between the background color and content of the web interface.

uiGarden (2005). Design>Web Design>Graphic Design>Color


Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Discusses methods for creating your own color schemes, from scratch. We’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects.

Chapman, Cameron. Smashing (2010). Design>Web Design>Graphic Design>Color


Color Theory for Designers, Part 1: The Meaning of Color

Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.

Chapman, Cameron. Smashing (2010). Design>Web Design>Graphic Design>Color


Coloring Outside the Lines

This series of articles about color is designed to help you get started right now selecting colors for your site.

Carter, Mary E. EFuse (2004). Design>Web Design>Graphic Design>Color



Colour is one of the designer's best tools. There are lots of ways to use it to help communicate a message. Colour can carry meaning, express personality, differentiate, frame, and highlight content.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>Graphic Design>Color


Colour Schemes and Design Mockups

After a web designer presents a site’s architecture, or wireframe, to a client for approval, the next step is to determine the look and feel of the site through colour and graphics. In this article, I’ll demonstrate how I keep this process as simple as possible, both for myself and for the client.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color


Colour Theory

In this article, I’ll cover colour basics and three simple colour schemes so that you can feel confident about choosing colours for your site. I’ll follow up this article with another piece on how to simplify these colour choices. After all, it’s more fun to enjoy the compliments on your Web site design than it is to sweat over the colour choices.

Goin, Linda. Opera (2008). Design>Web Design>Graphic Design>Color



COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

COLOURlovers. Design>Web Design>Graphic Design>Color



Contrast is the most fundamental design device: it differentiates elements; it brings out dominant elements; it mutes lesser elements; it creates dynamism.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>Graphic Design


Cooking With Stock

It’s not a secret. We all use stock imagery in our day-to-day design work. So why doesn’t anybody ever talk about it? Just like the inventory of a grocery store, not everything you see on a stock photo site is an ingredient for a gourmet production. By far the worst mistake you can make when choosing stock is selecting stereotypical or clichéd images to convey a concept.My guess is that we’re all just a little ashamed. We want people to see our work as just that: ours. When you have to tell someone that you didn’t create that grungy texture, or you didn’t take that beautiful photo, it feels a lot like admitting that you’ve cheated on a test. But this is nonsense—as designers, it’s our job to put things together and deliver a composition that looks good.

Beaird, Jason. Digital Web Magazine (2008). Articles>Web Design>Graphic Design


Creating Bulletproof Graphic Link Buttons With CSS

A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Graphic Design>CSS



Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon