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