Web design is unique through the design of detail

Article Description: details make web design different.

Details make the world extraordinary from the mundane.

A luxury car has the same number of wheels, seats, and doors and windows as a traditional car, but it is the time spent in detail that makes it stand out from the competition. Heated leather seats, a boot engine, a key door switch, automatic parking system, a rich digital radio and so on made it an expensive new car.

The same rules apply to web design. Web designers who are willing to spend their time focusing on detail can get designs with more value. The key word here is value. There is no guarantee that there is a direct relationship between the time it takes to build a site and the value of its results, and that there are always some details that are more important than others, and that the key is to be able to determine which details are more influential.

Add value to the details

This type of detail is our willingness to spend extra time outside the aesthetic level to improve the details of our work. We want to focus on the visual adjustments that can profoundly change the user experience, such as the user's experience with the site's themes and messages or how they swim the site.

Typically, site visitors with no build experience can point to improvements in the user experience of some nuances, but if these details are removed, users will perceive significant differences in perception and usability. These are the details that we are willing to spend our time on.

So how does a design detail add value to the site? The trick is the user experience. Web designers should be able to understand the negative space, contrast, shape, color and all the different visual elements of the user to use and experience a Web site design role. What's really surprising is that designers simply need to manipulate a few pixels to make a big difference and have a bigger impact.

What exactly are these differences?

Further observations

I think the most comfortable thing about Photoshop is that when I enlarge the picture to 500% or more, it looks as comfortable as home. Let's take a closer look at some pretty successful pictures of how to guide the user experience with subtle details.

Take the concentrate website for example, it looks good for our initial concentration to appreciate. Starting from a high-level perspective, we can see that the concentrate website uses a creative visual skill.

In addition to this jar of orange juice, we see an orange-themed palette and background that nicely simulates the real taste of the Orange's flesh. Further research, we found that it uses CSS3 to add some shading to the text to increase the contrast with the background. In order to really appreciate the details, we need to study in further.

Pixel level Perfect

The real details are applied at the pixel level. Let's take a look around the concentrate shortcut button near the top of the page layout. First, the shadow behind the button highlights this part of the page. The two simple single pixel lines at the top and bottom of the area are a neat design, making the area more visually distinct from other elements on the page.

One of the single pixel lines is more noticeable because it uses bright orange. It provides a contrast between the shadow and the background, but the real effect is the second dark orange Line. The two lines tie together to block the top area.

Difference

When this page no longer includes the design of these lines, the difference can best be shown. Now, I'm going to remove these lines to show you how different two pixels can bring.

Subtle shadows.

Shadow effects are no stranger to web designers. Many sites start using them early and often simulate planar depths and two-dimensional media. Shadows and highlights can subtly but powerfully improve the user experience of our site.

We use CSS3 in design, it can bring the magnificent difference makes it easy for us to be excited. And for me, really exciting is how much detail can be transferred from the image processing software to our website code.

Or look at this concentrate website, it is a good example of using the clever and effective use of text shadow effects to make the site content easier to read. There are two ways to use the CSS3 Text-shadow property. First, the red title is given a faint shadow to produce an inline effect in the case of a similar background color. The Kitzh simply gives White a little bit of a shot behind the paragraph.

Difference

Comparing the screenshot above and the same page rendering under IE8 (not supporting the Text-shadow attribute), we can see that it is much uglier.

It is worth noting that this site is selling Mac software, so naturally less attention to IE user experience.

Navigation nuances

In addition to enhancing legibility and highlighting possible site operations, details can also be helpful for site navigation. One of the most important parts of any Web page is how to navigate the user to another page. After all, links are the core of what makes Web pages a Web page at first, so why not spend a little more time on airworthiness? For instance, let's look at the Lipperhey site.

In addition to choosing a good color for the activity of the navigator, we found that it was designed to add some interesting details to the main navigation bar of the site.
The home button is noticeable for reasons other than color change. First we can see it sinking a few pixels from the navigation bar. Second, the buttons are shaded and slightly adjusted for transparency. Together, these two details give the link a sense of additional dimensions, indicating its importance and activation status.

Difference

Looking at the navigation without the details mentioned above, we find that a lot of exciting things are gone and our activation links will have a completely different look and feel.

Further details

We have studied a method (Text-shadow) which uses some new functions of CSS3 to assist us to design. But CSS3 's strength is far more than a shadow. CSS3 animations, shown as attributes of transform and transition, add additional tools to our detail work.

With proper use, CSS3 animations add efficient animation to our page elements without the need for flash or JavaScript. In terms of detail, animations allow us to provide users with smooth feedback in a variety of input situations. For example, to add a transition animation for the hover status or button click of a link, you can tell the user that their mouse is hovering over an active element (or touch, for a touchscreen mobile device).

The beauty of working with the details of the site is that by making further efforts, we can still provide some value to our users without alienating those who use outdated browsers. The key is that we use all of these technologies to add value to the already reliable web design, without a basic and reliable design and talking about learning these technologies is putting the cart before the horse.

What other details can the site improve to increase its value? What types of detail techniques have you successfully used in your project?