Archivio

Archivio per la categoria ‘Design Trends’
18 nov

Mind Blowing Parallax Scrolling Sites

Video games often use parallax scrolling technique to create an illusion of depth by moving multiple layers of images at different speed. This technique can also be applied in web design. This post consists a list of mind blowing parallax scrolling sites, design tips, and resource tutorials. If you are considering to start a parallax [...]

Advertise here with BSA

Categorie:Design Trends Tag: Commenti chiusi
20 ott

Inspiration: Fluid & Responsive Design

Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution — it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). I'm going to share [...]

Advertise here with BSA

Categorie:Design Trends Tag: , Commenti chiusi
13 ott

Construct a Framework for a Cross-Cultural Design

Nowadays Graphic Designers work globally in many different Countries. The designer should visually communicate symbols and colors. These elements are part of our social everyday life and come together with a various range of meanings which are different for each culture.This makes obvious how much the study of the cross-cultural communication is important for properly deliver the desired message.

Designers sometimes tend to propose solutions which reflect their own tastes and social habits. Aesthetic canons are strictly related to the environment and background information about the target should be well studied. In a cross-cultural communication the use of symbols which are culturally accepted is field which must be taken in consideration during preliminary studies and benchmarking.



During this article we are going to explore the wide range of cultural issues you need to bear in mind for designing cross-cultural communication products.Starting froma target, that is part of a culture different from ours, we will try to construct a framework useful for creatingan effective design product.

  • Firstly we will define which the most common basic cross-cultural design patterns are.
  • Secondly we will see how to construct a framework to identify them.
  • Finally we will close with a practical case study on this topic.

Let’s start!


From Global to Local for a Better User Experience

In the globalization era we have the tendencies in bringing all our knowledge and experience with us and projecting them in the most common and shared opinions. Economics, marketing and customer approaches have been transformed and standardized to be suitable and easily adapted for worldwide markets.

These attitudes, once globally shared, become international, developed out of specific culture so that they can be, with a minimum effort, localized and adapted to the target.

As part of the selling and promotional process, the same has happened to the design.

The globalization of the resources and the internationalization of the rules are important elements of a market which requires expertise from all over the World. Common rules make easier design and development,error are avoided ensuring a better usability.

However, this process doesn’t provide a comparable user experience. This includes many other elements which are more related to the local and to the effective use. The usage situation and the final message decoding also depend on recognizable cultural patterns which the designer should be able to apply.


Basic Cross-cultural Design Patterns

How can we define culture?

On Wikipedia we find the following definition:

[…]
- An integrated pattern of human knowledge, belief, and behavior that depends upon the capacity for symbolic thought and social learning
- The set of shared attitudes, values, goals, and practices that characterizes an institution, organization or group
[…]

Source

A pattern is constituted by customs that are evaluated as standard values for the culture where they are shared. This point out how relative they are and how differently they are perceived in different environments.

As designers we should try to spoil the differences in order to create graphic products that are properly received and decoded by the target.

What contribute in constructing a design patterns?

The list here below includes some of the main elements basicelements for a cross-cultural design.

  • Language
  • Symbols
  • Images
  • Colors
  • Navigation

A message is perceived on the basis of a wide range of factors.Designers sometimes take graphic decision based on their personal taste and culture training. Proposing solutions which reflect our own environment is easy because it is constantly under our eyes and it is part of our daily life. Our aesthetic sensitivity is affected by thoughts, behaviors, and feelings. Last but not least, what other people think about us also have a great influence in our life as human beings. We are deeply connected with our social structure.

The difficult is trying to separate our habits and location from our professional life, inspecting and understanding differences which make our designs effective in a definite local, international or global market.

This ability requires time, training and patience.

Let’s try to analyze more in detail the aspects which are involved in the cultural design pattern creation process. This will be a helpful starting point towards a cross-cultural habit.

Language

One of the most important element of a message, either visual or not, is the language. A designer should be aware that each culture has its own method for creating sentences, building up situations, recreating scenes and dialogues. Words and expressions, which are common for a Country, could have completely different meanings in others. Themes which appeal in a market may not be appropriate for different audiences.

This is a quite important issue whenever we produce advertising or naming a brand. There are famous examples of important brands which had to change products name to fit them well with the local market they want to entry. Marketing experts have to be aware of a negative meaning of a name and make accurate researches before launching a product line which may be unsuccessful.

Symbols

Symbols are recognized differently in each society.They are a cultural product which is a metaphor whose meaning is commonly shared.

The same could be said about icons. They refer to real-object illustrating them in a simplified way.

Icons and visual symbols are the core of a creative design project mainly based on graphic elements.

Computer icons, in conjunction with computer windows, menus and a pointing device, form the graphical user interface (GUI) of the computer system, and enable the user to easily and intuitively navigate the system.

Source

Most of them have been taken as a standard to warrantee a common efficiency and usability. The standardization rules have been collected under ISO (International Organization for Standardization) 9241.

ISO 9241 is a multi-part standard from the International Organization for Standardization (ISO) covering ergonomics of human-computer interaction.

Source

Particular types of symbols are the emoticons. Initially deserved to convey non-verbal aspects of a message, a way to show emotions in a text, they become so much part of our daily interaction that they have been employed also in print advertising or verbal expressions where they actually are useless. How many times, during a real, face-to-face chat with a friend, you have used the expression LOL? It is a conventional way to say that something let you laughing about.

Emoticons, as well as the majority of metaphoric systems, are deeply related to the culture. Some of them could be in common however the use of visual puns should be primarily inspected.

What else is similar to icons and symbols? The answer is so obvious: images.

Images

Images are, as a matter of fact, a visual language. Verbal message is important however non-verbal has often a greater importance.

Images are like a graphic novel useful to support, or even replace, what of verbal is in a communication.

In building up a cross-cultural communication product you shouldchoose the images carefully.

The local, in this case, is more relevant than the global. If you want your target recognize him in what you are showing, you have to consider his demographic and social peculiarities.

If a service has a target of young people from 18 to 30 which sense could have showing them people younger or older? The image build a story: a subject has a need which the service or the product suggested can solve in the best way. The aim is allowing the mirroring between the subject of the scene and the target.

To localize a website, advertising or a promotional material is always better displayingpeople that can be recognized as part of the local group, society or, in a larger view, nationality.

Through the images you have to recreate the visual clues which match the user expectations.

We will see later in the article how images can be extremely useful to construct a framework to recognize cultural patterns.

In the meantime we still have a couple of elements which worth to mentionas part of a balanced cultural design: colors and navigation interface.

Colors

Color is a powerful visual communication component. It meaning represents a shared amount of memories which take their origins in the roots of a Country, in its history and, consequently, in its culture. The symbolic association with colors, the feelings and ideas that they evoke, are quite different through the World. Creating an exhaustive table of associations is extremely difficult. Colors are ambiguous and very often they have both positive and negative connotation, even in the same culture.

For example in the European culture white is the color of the purity, the color of a new life, it is used in weddings and christenings and other religious celebrations.

In Japanwhite is the color of the gods, it issacred and, again,it represents purity and is used at weddings. Despite that it also is the color of mourning and death and it is used at funerals.

In addition to that, even mixingcolorsaffects the final meaning.Still staying in Japan, the white combined with red are the traditional Japanese flag colors, they represent celebrationand happiness, energy and life force.

In a cross-cultural perspective, aiming a global audience it is worth accomplishing a deep study on this topic exploring the most recognized associations. We can’t obviously make a color mix that could go for everyone. A sort of universal palette combination is impossible to obtain. Color meanings awareness could just help to avoid communication failures.

Navigation and way of reading

Readers scan differently contents depending on their training, habits and studies. Japanese writeand read vertically from right to left, Arabic and Hebrew read from right to left, the usual Western way of reading is horizontally from left to right. Studying the reading and writing system of people is important to make the navigation of a website or the legibility of a text more usable for the readers.

As per website navigations, this is the reason why a menu on the left or, otherwise, on the right column could not be always the best choice to do.A good and immediate option,suitable for a larger number of occasions, could be a classic horizontal navigation bar on the top of the page.


The Design Pattern Mix: How It Contribute to Increase Sells

All those previously analyzed elements contribute in creating a shared design pattern which increase sells, usability and user experience. They capture attention and improve communication.

Symbols and images improve the recognition of the brand. Furthermore, we can affirm that they ARE the brand. They represent a company identity towards its public, in the measure in which its logo is a colored symbol fulfilled of meanings.

Colors and conventional habits help to understand the content of a text, for example, highlighting most important sentences. Since several studies have demonstrated that we read scanning texts, colors and writing conventionsmake the text more readable and clear.

Colors and icons increase the reader attention making easier remembering important notices such as warnings or safety notes.

Colors and symbols provide an easier navigation through a website because they are immediately recognizable. Important texts which want to push for an action from the reader have been iconized in buttons and we now found almost everywhere call to action buttons. Why that? The answer is easy: they are bigger, more colored and attractive than a plain text link.

Effective design uses colors, tones, textures to create interest and attract the attention of the reader. Using design patterns the designer is able to create communication products which not only are usable but also more user experience oriented. The synergy between usability and user experiences attitude can mark the difference on the market and increase sells.


Spotting out different cultural habits

The concept of a cultural palette, firstly inspected by Sandra E. Moriarty and Lisa Rohein their article Cultural Palettes: An Exercise in Sensitivity for Designers (Journalism Educator, Winter, 1992, p. 32-37), could be useful to construct a framework for a more extensive use. In their study the researchers only compared colors and symbols.

This is a method to spoil out different cultural habits by studying a series of design product which comes from a determined culture. It is not far from the competitor analysis which should be always accomplished before starting a new project.In our case we can use all those elements we have previously indicated as components of a cultural pattern to build the framework.

You firstly select a bunch of graphics and communicative products representative, for example, of a Country and analyze which images, colors, symbols are used to express definite meanings. Collect from books, websites, brochure, company literature, advertising or anything else from the media communication world of a definite cultural target.

You need then to study their artistic styles and symbols to put yourself in their shoes.In this way you become able to understand them, their needs and feelings better. You make a dive in their cultural process and you become able to mix colors, language and symbols which reflect their cultural pattern. You need to find what symbols are appropriate and which are considered offensive and should be avoided.

You have now a list that can be compared with others similarly obtained. The result of the comparison constitutes a cross-cultural pattern analysis.
Finally youcompare the founded results and organizethem in a kind of mind map.


How to Compare Results

The main scope of the study is recognizing the visual communication message being able to decode it despite our own culture is the lenses through we look all the others. Although we are aware of that, we unintentionally apply a kind of filter on our perception. Comparing the results we have concentrate our efforts in understanding the different and the odd and in assuming it as normal for the inspected culture.

Only taking the distance from the frame constituted by our symbols, traditions and aesthetic canons, adopting, as much as possible, an objective eye,than we can hope to getting close to the cultural pattern. A small victory reached towards a real cross-cultural design.

A great design is as greater as it is aimed to and properly received from its target.

You have to develop the empathy with your public to create design which are usable (effective and functional), as well as user experience centered (emotional, directed to the user satisfaction, positive feeling maker).

With a new consciousness given by this approach you are now able to construct your framework.


The framework construction

The mind map construction need our favorite tools, scattered pencils, rubbers, colors and pieces of paper, displayed on the table of our analysis.

Put on the center the NEED which you have intended to inspect. Human needs define your design challenge because through your message you want to advise a solution, replying to emotional of physical necessities.

Continue revising your notes and populating the map with what you have observed from local visual communication product analysis.

Particularly you have to write down:

  • How people act
  • What they do
  • What they say
  • How they feel
  • The color associated to this feeling
  • Images and symbols recurrences in similar situations

A quick example: Rent Car Services

I would want to give you a glance of what I shown in theory until now. This is just a quick example because, obviously, a real analysis research takes a lot of time, resources and people.

I’ve decided to inspect the Rent Car Service taking a couple of sample websites from three spot areas of the World: the U.S., Japan and Europe.

I’ve googled, as we said, the NEED: a car rental service. I’ve selected two car rental companies for each area:


The U.S.:

Budget

instantShift - Framework for a Cross-Cultural Design

Dollar

instantShift - Framework for a Cross-Cultural Design


Japan:

Toyota Rent

instantShift - Framework for a Cross-Cultural Design

Orix

instantShift - Framework for a Cross-Cultural Design


Europe:

Hertz

instantShift - Framework for a Cross-Cultural Design

Maggiore

instantShift - Framework for a Cross-Cultural Design

What they are in common is the good service idea, the customer attitude. However, even offering the same business, each company reflects a different idea.

Let’s analyze each concept and its keywords:

Budget:

  • easy access to the service (less than 60 seconds),cheap (save money, free), guarantees(pay back)
  • blue and orange colors
  • big car on the homepage


Dollar:

  • easy access to the service (rapid rental), cheap (lowest price), guarantees (guarantee)
  • blue, red, ochrecolors
  • big car on the homepage


Toyota Rent:

  • blink to the traditions and the Toyota quality
  • green and orange colors
  • traditionalukio-e drawing, a lot of icons to make the access easier.


Orix:

  • easy access to the service (rapid rental), cheap (lowest price), guarantees (guarantee)
  • blue, red colors
  • bright colorful visuals related to leisure and environment attention

instantShift - Framework for a Cross-Cultural Design


instantShift - Framework for a Cross-Cultural Design


Hertz:

  • easy access to the service (no stress), dedicated benefits (no queues)
  • black and yellow
  • big visuals which recalls spare time, leisure

instantShift - Framework for a Cross-Cultural Design


Maggiore:

  • dedicated packages to save money
  • blue and white
  • big visuals which recalls spare time, leisure, family concepts

instantShift - Framework for a Cross-Cultural Design


The result is evident even in so few samples to compare. Saving money and customer care are the core concepts which also include customer’s leisure, spare time with family and environment attention to tacking care of your children future. These main points definitely can be considered the starting framework for other new car rental service websites or ads. Each concept, with its own local peculiarity, is commonly recognizable.


To sum up

The following steps summarize the process of doing a visual cross-cultural analysis:

  • 1. Study cross-cultural clues
  • 2. Learn how to recognize them
  • 3. Do research and compare situations which replies to a need
  • 4. Find out how cultural patterns are changed compared to your usual point of view
  • 5. Fill the cross-cultural design framework
  • 6. Create a cross-cultural design suitable for the inspected market.


Conclusions

Cross-cultural design should be studied to increase the user experience across cultural and territorial boundaries. It is clear that creating a design which conveys meanings which can be really globally interpreted is not easy. What we would mean to transmit with this article is showing that, understanding the cultural differences, create a user-centered and meaning shared design is possible.

Designers need to leave the safe and comfortable zone of their own cultural values and experiences and try experimenting through a proactive willing of understanding other cultures. Adopting an international perspective they will be able to explore new creativity aspects which are a long-term investment in a market everyday more “glocal”, global and local at the same time.

To help this process we have seen a method that can be used as framework to create an effective cross-cultural design. It is not exhaustive but it sure can be a good point to start.

I would love to hear your comments about this topic and which methods or studies you adopt to create design which goes out the boundaries of your culture. Which perspective do you assume? Which aspects you give more relevance? Share your experience! This is the most effective way to learn more. Thank you!


Other Resources which Inspired this Article


Image Credits

Categorie:Design Trends, Web Design Tag: Commenti chiusi
22 mar

The Latest Trends in Web Design

Predicting the evolution of web design is like trying to milk a male goat. Despite ever-changing design trends and techniques, purists and idealists maintain that the principles of great design are timeless. This is true to an extent, but the recent rapid and consistent development of the Internet across many dimensions and in diverse ways has to be taken into account.

The Internet has provided us with such a huge platform to innovate and break design barriers; it allows the designer to apply variations and to slightly modify existing trends in order to make their mark. Global access to every kind of tool and technique is at the heart of this creative revolution, allowing designers from all over the world to explore new possibilities.


You may be interested in the following related articles as well.

Please feel free to join us and you are always welcome to share your thoughts that our readers may like.

Don’t forget to Subscribe to our RSS-feed subscribe to our RSS-feed and Follow us on Twitter follow us on Twitter — for recent updates.



Current Trends in Web Design

We are well into 2011; it’s time to reflect on the trends of 2010 and, with a hungry eye, look at those emerging today.

Minimalism

Minimalism is not a new concept; it is often understood as the best approach towards communicating a precise message to an audience. By retaining only essential elements, minimalist designers use negative (or white) space to enhance the message and draw in the user.

instantShift - The Latest Trends in Web Design

When aiming for minimalism, I would suggest using a grid system—but keep in mind that designers have mixed opinions about this approach. Without a grid, though, there is a danger that what you produce will appear disorganized and incomplete.

Negative Space

instantShift - The Latest Trends in Web Design

The use of negative space in design has been a related emerging trend. Plenty of white space is visually pleasing, and it allows the reader’s eyes to rest. Combining minimalism and negative space pushes a message to the forefront of a design and captures the user’s imagination. Now, white space does not necessarily have to be white; it simply refers to empty or blank space on the page. Empty space makes a page more scannable and helps to highlight the relation between elements through their distance from each other.

Typography

instantShift - The Latest Trends in Web Design

Stylized typography is an age-old feature, and today designers are using it as a primary weapon in their arsenal of innovation. Until recently, most have restricted themselves to select web-safe fonts. But with the growing numbers of tools and applications, typography has become a primary design element in its own right. The demand for larger and more exciting fonts is rapidly increasing, and these fonts are replacing the old system fonts as designers play with techniques such as line height. Tools such as WhatTheFont, CSS Typeset and Typetester have helped designers be more creative and allow for different typeface to be used across the web.

CSS3

CSS3 is the latest module of CSS (Cascading Style Sheets). Its much more advanced set of features make this new version the tool of the future. However, there are some mixed reviews as a result of its incompatibility with Internet Explorer and other browsers. Even still, watch out for CSS3 in 2011. Some exciting and distinctive aspects of CSS3 are features like “border radius,” “box shadow,” multiple background images and text shadow. Animations with CSS3 are made easy, subtle and lightweight.

instantShift - The Latest Trends in Web Design

  • Box and Text Shadows

    CSS3 has made the task of giving an in-depth visual experience (in this case, with shadows) quite easy. Customizable shadow capabilities allow the designer to create various effects like drop and inner shadows. The demand for this capability will only increase as time goes by.

  • RGBa and Opacity

    This is one of the most advanced features of CSS3 and can be applied to any colored element (fonts, borders, background, shadow, etc.). This trend has also gained enormous popularity.

HTML5

instantShift - The Latest Trends in Web Design

The latest version of the HTML specification is another trend in high demand. It enables the designer and developer to create more readable code and build layouts that are semantically meaningful. It introduces advanced features that help you structure mark-up. Other HTML5 features are APIs, dragging, drawing graphics on screen, canvas, keygen, output and progress.

Textured Backgrounds

instantShift - The Latest Trends in Web Design

The use of textured backgrounds is another hot trend to follow. The visual experience of the audience increases exponentially if the background is aesthetically pleasing and precise. The points to focus on are simplicity of design and the illusion of textures to create depth and dimension on the page.

Simplicity

instantShift - The Latest Trends in Web Design

Simplicity is yet another recent design trend that has captured the respect and imagination of users. The principal of “less is more” is being increasingly applied. As designers, we have always obeyed the demands of clients, often developing websites full of complex, unrelated features and countless repetitions. However, times have changed, and so have the demands of the trade. Users and clients seem to finally understand the importance of simplicity, of removing clutter from the page and allowing plenty of white space. With the need for websites to be mobile-friendly, compatible and accessible, design has to be kept simple. The simpler a website, the easier it is to navigate and comprehend.

Single-Page Websites

instantShift - The Latest Trends in Web Design

The ever-expanding competition to keep users on a website is becoming more challenging. Visitors scan web pages to locate the information they want, but with each click required to delve deeper into the website, the interest level drop. This phenomenon has led to a growing desire to build single-page websites. For their part, designers must be competent enough to consolidate and summarize all of their content in a standalone user interface.

Print Design

instantShift - The Latest Trends in Web Design

Print media has, of course, been around much longer than the web. As a result, print designers have a longer history to refer to as they master their art and develop their creativity. This could be one reason why many of the latest web design trends are inspired by print media concepts, whether innovative typography, aesthetic backgrounds, negative space or grid structures.

Large Headings

instantShift - The Latest Trends in Web Design

Large headings is another trend inspired by traditional print media (such as advertising brochures, magazines and newspapers) and used to grab the interest of the reader. Given the incredible amount of information online, the attention span of the online audience is far shorter than that of a print audience. Large headings are now a necessity and are almost certain to make an impression and attract users.

Infographics

instantShift - The Latest Trends in Web Design

The use of infographics is only going to grow in 2011. Combining graphics and images, this feature highlights information in a way that makes for a more absorbing environment for the reader. It also allows the key message to be expressed with more clarity and concision. As the need to comprehend complex, diverse pieces of information increases, so will the demand for infographics.

Serif Fonts

instantShift - The Latest Trends in Web Design

Traditional websites were primarily built with Arial or Verdana font scripts; most designers shied away from serif fonts because of their poor readability on traditional browsers. Today, mobile applications are the most popular with online businesses, and the technology has responded accordingly. Now, more browsers and handset applications use high-resolution display screens, allowing for increased readability. In this regard, a cue may be taken from print designers and their use of serif fonts. The more defined edges of these fonts improve the reading experience, especially on high-resolution screens.

Thumbnails

instantShift - The Latest Trends in Web Design

Google has taken the use of thumbnails in design to new heights. Its extensive use of them has afforded greater ease and comfort to the user. Now, users simply place their cursor over a headline and they’ll know exactly what to expect without committing to clicking into that website. This has undoubtedly saved the user time, eliminating the need to click and wait for pages to load as they surf. I’ve found this approach has gotten a mixed reception from designers, but I think it’s here to stay.

Multi-Column Format

instantShift - The Latest Trends in Web Design

Another growing trend among designers is to present information in a way that is easy to scan and comprehend in a short amount of time. Presenting information clearly has become easier to accomplish through the use of multiple-column designs. For this reason, this trend will stay and continue to evolve.

Big Lead Images

instantShift - The Latest Trends in Web Design

This is another trend inspired by the effective use of images in print media. The web browser was not initially designed to load heavy image files quickly; now, with the advancements in display and loading technology, you can expect big lead images to become even more popular. In general, high-impact images are effective in creating a lasting impression on the user.

Social Networking

instantShift - The Latest Trends in Web Design

The integration of social media will continue to spread like wildfire throughout the web in the near future. This practice has allowed businesses to gain greater exposure and access to users than ever before. Online businesses, big and small, will focus squarely on this in 2011.


Conclusion

As we move into 2011, designers everywhere are preparing their next projects. I hope this review of the hottest upcoming trends has been useful. Take a moment to share other design trends not mentioned here; they’ll be greatly appreciated.


Find Something Missing?

While writing this article, it’s always a possibility that we missed some other latest design trends. Feel free to share it with us.

Categorie:Design Trends, Web Design Tag: Commenti chiusi
15 dic

Best of Design 2010

As 2010 is wrapping up, it is about time do a sum up of the best sites that I've featured on Best Web Gallery. Again I've selected 50 sites from different categories: personal blog, commercial, agency, portfolio, and software. In 2010, CSS design is getting more interactive. People are using jQuery and CSS animation to [...]

Advertise here with BSA

Categorie:Design Trends Tag: Commenti chiusi