Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Web Design’.

We are pleased to present below all posts tagged with ‘Web Design’.

15 Helpful In-Browser Web Development Tools

There are many useful Web development tools that integrate in your browser. These in-browser tools are commonly known as add-ons or extensions. Though add-ons and extensions aren't just for Web development, many of them out there are designed specifically for Web developers. In-browser tools vary greatly in the jobs they perform; for example, some of them help you diagnose issues with CSS, HTML and JavaScript, while others evaluate the accessibility of your website.

Web Developer - screen shot.

In this article, we explore some of the most popular and useful in-browser Web development tools. You'll find tools for popular Web browsers like Firefox and Internet Explorer. Whether you need to debug and inspect your HTML, inspect HTTP headers, access FTP source files, evaluate accessibility or just figure out what color a Web page element is, you may find a variety of tools discussed here useful.

Read more...

Strategic Design: 6 Steps For Building Successful Websites

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

The jQuery website redesign

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

Read more...

Image Caption Design: Techniques and Trends

Image captions are an often-overlooked element of Web design. They’re often thought of more in terms of function than form. As long as they include the proper photo credits or identifying information about the image subject, not much more thought is given to them.

But image captions are a great place to add a bit more style to your website or to give some unique insight into the subject of the image. Whether the captions are for photos on a news website or design samples in a portfolio, they present an opportunity for reinforcing the overall look of the website. When done properly, they can even add more visual interest and become a distinguishing trademark of a particular brand or website.

Screenshot

There are two basic kinds of photo captions. There is the simple, minimalist, down-to-business style. These usually have a simple sans-serif font in white, black or shades of gray. They are usually positioned either to the side or below an image, though sometimes they overlay or are above it. This type is commonly found on news websites but is also seen in portfolios and other websites.

The other major style is more graphic. This often include effects, such as the caption only appearing on a mouse-over or a “Details” button displayed that leads to the full caption. While fonts are still generally sans-serif, much more color is used, and the captions are often overlaid on the actual image. These types of image captions are generally seen on portfolio websites of designers and ad agencies. Of course, there are websites that use a crossover-type image caption, displaying elements of both styles.

Read more...

Creative User Interfaces in Modern Web Design

The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.

OkayDave by you.

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

You may also want to take a look at the following related articles:

Read more...

Pricing Tables: Examples And Best Practices

Pricing tables play an important role for every company that offers products or services. They are a challenge from both a design and usability standpoint. They must be simple but at the same time clearly differentiate between features and prices of different products and services.

ConceptShare Price Table

A pricing table should help users pick the most appropriate plan for them. A company should carefully examine its product portfolio and pick the most important features to present in its pricing plans. Visitors should be given only the information they would be interested in: available features, options and costs. The rule of thumb is: every unnecessary cell in your pricing table increases the probability of losing potential customers, because you make it more difficult for them to compare various plans and select the best one.

Once you have identified the most important features, go ahead and create a more detailed list of features for users who are interested in a particular plan. Users must know what kind of a product they are spending their money on and all of the features associated with it.

Read more...

Retro and Vintage In Modern Web Design

Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts. Online shops, corporate designs, portfolios and blogs incorporate both styles on a small and large scale. When applying "old-style" elements to their works, designers produce creative and appealing designs that make their websites stand out and look really different. As a matter of fact, if executed carefully, such designs almost never look boring, although one might intuitively think that the opposite would be the case.

Retro and Vintage Designs - CSS Tinderbox

Retro and vintage designs exhibit graphic solutions that are strongly influenced by the time period that they are supposed to represent. While retro focuses on the style of the 1910s to 1930s, vintage recalls the time period between the 1950s and 1980s. In both cases, design elements reflect some old-fashioned motifs, trends, personalities and objects that had been an essential part of our lives in the past.

Read more...

7 Version Control Systems Reviewed

If you’ve ever collaborated with other people on a project, you know the frustration of constantly swapping files. Some do it by email, some through file upload services and some by other methods. It’s a pain in the neck, and every designer and developer knows it. Revision control is an excellent way to combat the problem of sharing files between workers.

Most web-developers have probably worked with some sort of revision control system, but designers may find it a foreign concept. The most obvious benefit of using revision control is the ability to have an unlimited number of people working on the same code base, without having to constantly send files back and forth.

Screenshot

But designers and developers can both benefit from using revision control systems to keep copies of their files and designs. You can instantly browse previous “commits” to your repository and revert to earlier versions if something happens.

This article reviews some of the top open-source version control systems and tools that setting up a version control system easy.

Read more...

Game Sites Design Survey: Examples and Current Practices

Game websites are a little bit of a mystery. You won’t find them in the popular CSS-showcases since they are seldom fully CSS-based; however, they also rarely show up in sites that collect best Flash sites. The FWA, for example, has added only a few game sites this year. This is odd, because there are usually roughly hundred quality titles released each month, each with their own website.

During the research I've found out that there are a lot of creative game designs. This makes it extra strange that amongst all the showcases and studies we see on blogs and in magazines there is rarely one focused on game industry. High time we take a depth look into this area of web-design.

Wrath of the Lich king

This article is the first of a two-part-series where Smashing Magazine takes a critical look at web design in the video game industry. The first part is an in-depth review of the game-related sites out there. What design elements keep returning? What factors influence these design elements? Are the sites mainly CSS- or Flash-based? The article ends with a showcase of some beautiful examples of game site designs.

Read more...

Design Showcase Of Creative Online-Shops

Times when online-shops were boring and unattractive are over. To attract customers' attention designers tend to design online-shops according to the atmosphere it has to create. An online-store in which retro-products are offered is designed in a retro-look. And shops which are aiming to attract young customers are designed in vibrant colors and modern style. Furthermore, interactive browsing through the store, implemented with Flash and JavaScript, gains on popularity as well.

Online Shop Screenshot

This post showcases 45 examples of creative and unusual designs of online-stores. Being creative doesn't necessarily mean that the designs are successful since unconventional approaches often increase the time users need to climb the learning curve and figure out how they can achieve their goals. Still, how can you present your products in a distinctive way and how to design a truly unique online-store? Let's find out.

Please notice: we don't know if creative design approaches result in better sales. This post is supposed to provide you with some interesting ideas and approaches which you can use in your future projects, not with recommendations for the most effective online-store-designs.

Read more...

↑ Back to top