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

You know, we use ad-blockers as well. 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. our 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’.

Showcase of Web Design in Russia

This article is the first of our new series "Global Web Design". Over the next months we'll be covering various continents, featuring web developers and web designs from different countries of the world and taking a close look of what is happening in the web design scene worldwide. We start today with an article about web design in Russia. We will continue with Ireland (Lee Munroe) and Brazil (Fabio Sasso) upcoming weeks. Hence, you may want to subscribe to our RSS feed for more similar posts. If you'd like to prepare an article for this series, please contact us.

The land mass that is one-sixth of the Earth is always surprising. In this article we present the hidden force that is Russia: we won't dwell on the classic stereotypes but will rather look at the creativity flowing through.

Russian Web Design

The era of professional and commercial online design started in Russia about a decade ago. We're now seeing an increase in professional design and development. I won't concentrate much on the history of Web design in Russia; that has been happening for ages. Like everywhere in the world, Web design came to Russia as a modern way to present any kind of information to an audience online. So, principles such as simplicity, accessibility and eye-catching design have been cultivated for several years.

Web development as a profession was relegated to the elite for years until geek heads and artists took it over. For a few years there was a boom of home pages and tiny corporate websites that were built with any regard for the end user. This trend ended thankfully, in large part due to the highly scaled websites that came out some original and still unique studios founded back in the end of 90s.

Read more...

Search Results Design: Best Practices and Design Patterns

If you've been assigned to design or provide the architecture for a large e-commerce project or other information-heavy website whose success depends on content findability, it is vital that the design and layout of the search functionality for that website is considered carefully.

The search results page is the prime focus of the search experience, and can make or break a site's conversion rates. Therefore, bridging the gap between a user and the content or products they seek is a crucial factor in the success of any large website. The responsibility to design an effective search results page is best considered after a thorough examination of some of the features and functions found on search results pages from a number of popular niches.

Walmart In-Store & Online

In this article, we'll look at a number of trends and practices incorporated on a variety of websites. From this examination, we'll conclude with a summary of the best practices learned from the examples those sites have set.

Read more...

Showcase of Case Studies in Design Portfolios

Portfolio websites are critical for designers who want to get exposure for their work and attract new clients. While all portfolio sites will showcase the work of the designer, some have chosen to provide additional information about the project through case studies.

In this post we will be featuring more than 30 portfolio sites to show how they are using case studies from their own design projects to communicate with potential clients. Not all of them are referred to as "case studies" on the site, but all provide much more information than just giving a screenshot with the client's name.

Keystone Design Union

If you are considering ways to make your existing work more relevant or appealing to visitors who may be potential clients, providing case studies is one option. Take a look at the sites featured here and you may come up with some ideas of how they could be used on your own site.

Read more...

Portfolio Design Study: Design Patterns and Current Practices

In our recent study on Typographic Design Patterns and Best Practices, we asked our readers about case studies they would like us to conduct. One of the most popular suggestions was a detailed case study of portfolio websites. Following the requests of our readers, we have carefully selected 55 design agencies and Web development agencies, analyzed their porfolio websites and identified popular design patterns. The main goal of the study was to provide freelancers and design agencies with useful pointers for designing their own portfolio.

Huge Inc's case study

This post presents the initial results of our big portfolio design study. Below, we discuss the visual design, structure, layout and navigation of portfolio websites. We also get into the design details of every single section, including the about, clients, services, portfolio, workflow and contact pages. Of course, you do not necessarily have to follow the findings presented here; rather, use them to get a general idea of what other portfolios look like, and then come up with something of your own that is usable, distinctive and memorable. We would like to thank Mark Nutter for helping us gather data for this study.

The second part of the study will be published here, on Smashing Magazine, in two weeks. Hence, please subscribe to our RSS-feed and follow us on Twitter.

Any ideas or suggestions? Maybe there is something else that you would like us to analyze additionally in this study? Comment on this article — we are listening!

Read more...

Horizontal Navigation Menus: Trends, Patterns And Best Practices

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back.

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better. In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We'll also look at several trends that developers can choose from when working on the navigation design for their next project.

Read more...

Typographic Design Patterns And Best Practices

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding... The list goes on and on. [Links checked February/09/2017]

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We've chosen popular newspapers, magazines and blogs as well as various typography-related websites.

Paragraph spacing size graph.

We've carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites' various values (for example, the ratio between the line height and line length).

Read more...

Designing “Read More” And “Continue Reading” Links

Most bloggers and website designers understand how difficult it can be to attract visitors to a website. In fact, most websites have just moments to attract potential readers. Several factors contribute to how well a website attracts its readers. These factors include well-written headlines, interesting content and design quality. While all of these aspects are important, today we will focus on a very specific and sometimes overlooked element in a website’s design: the “Read more” or “Continue reading” link that follows a headline or summary of an article. [Links checked February/11/2017]

Every website has its own way of asking readers to click on an article link. Some websites have very prominent links, others are a bit subtler. Either way, website and user interface designers have thought up some very creative and innovative ways of inviting readers to read on. In this showcase, we will present 45 websites that have excellent “Read more” and “Continue reading” links in their design. Hopefully, these websites will serve as inspiration for your future projects or at least remind you not to ignore this important design element.

Read more...

Social Network Design: Examples and Best Practices

According to Nielsen Online, social networks and blogs are now the 4th most popular kinds of online activities. 67% of the world online population are now visiting them and the time they're spending on them is growing by three times the overall growth rate of the internet. Social networks are now visited more often than personal email is read. Some social networks have grown to such enormous proportions that they rival entire countries in terms of population—if Facebook, for example, was a country, it would be the fifth-most-populated in the world (right between Indonesia and Brazil).

Screenshot-Social Network Site Purpose

There's a lot of variety out there in the realm of social network design. Some sites keep a very professional approach (like LinkedIn) while others have a more organic, free-form look (like MySpace). Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook). But what's the best way to design a social network? What are the elements that make a social network more user-friendly and more attractive to users? Read on to find out.

Read more...

Web Form Validation: Best Practices and Tutorials

Ideally, users will fill the web form with necessary information and finish their job successfully. However, people often make mistakes. This is where web form validation comes into play. The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. In this article we will go beyond the validation itself and explore different validation and error feedback techniques, methods and approaches. [Links checked February/10/2017]

Facebook sign-up form

User's input can be validated on the server and on the client (web browser). Thus we have server-side and client-side validation. We'll discuss pros and cons of each. In the server-side validation, information is being sent to the server and validated using one of server-side languages. If the validation fails, the response is then sent back to the client, page that contains the web form is refreshed and a feedback is shown.

Read more...

↑ Back to top