Users have a great benefit, being able to choose among loads of weather apps and services of different complexity, styles, features, colors, and so on. Moreover, the target audience of this sort of product is almost unlimited and totally diverse; therefore, different ideas and concepts, if done according to the laws of basic visual efficiency and common sense, will find their users.

Tubik Studio designers, working on various UI/UX projects, have also presented different design concepts for weather applications. So, this post is sharing our works and ideas on the topic.

Basic points of UI for weather applications

Design of the user interface for a weather application is usually concentrated on the idea of being informative and clear. This really is the thing that does not include a lot of copy on the screen, so it is very important to find the scheme and layout in which the user will need just a quick glance to get all the data he or she needs. That provides a broad space of creativity for designers as well as becomes a great challenge as any kind of weather app requires keeping a wise balance between the creative visual representation and an extremely high level of usability.

Both aspects – visual and usable – need to be taken into account. If a designer doesn’t think thoroughly enough about solutions to provide an easy and pleasant user experience and enhance usability as the basic point, the app will risk losing the audience because the functionality is the first thing that retains users to such basic apps. On the other hand, concentrating only on the layout and transitions while seeing visual design as the secondary and minor aspect is also a high risk since being a usable and well-thought-out but visually boring app will not attract users’ attention and could get lost in the numerous competitors. So, designers should think over both perspectives and look for ideas to make the design concept pleasant-looking, clear, efficient, and understandable.

Practice shows that the limitations for a designer’s creativity in the case of weather applications are much lower than in a lot of other types of products. As weather apps do not usually use long copy on the screens and apply a lot of visual details, the aspects of readability and efficient data presentation are different from, for example, the screens of a blog app or a social network. Therefore, designers can try various color pallets and combinations, different forms and shapes, interesting textures, visual effects or interface animation, original fonts or unique icons – anything that will support the clear visual perception of the data necessary for a user.

Colors and shapes

In the case of UI design for weather applications, there is no strict trend, requirement, or recommendation about using a light or dark backgrounds. It happens, for instance, with more copy-based products in which the aspect of readability is activated with the perception of the big amount of text: in this case, it could be recommended to try a light background to make the layout more user-friendly and text more legible. For weather apps and widgets, any combinations of colors, sometimes very unexpected, could work efficiently as far as they provide visual support for the data and enable the user to see and understand what they need in a fast and easy way.

Moreover, interesting combinations of colors and shapes can also provide a kind of aesthetic pleasure for the user that can become a reason to choose this particular product among the competitors along the personal user’s taste. So, the range of colors is perhaps one of the widest in this case of design work. The weather concept accomplished by Sergey Valiukh for Fuse has become a good case of practical example.

Weather App Screens 

Organization of the data on the screen is one more important aspect to think about. One of the fresh Dribbble shots by Tubik Studio designer Tamara features the organization of the data along the cards with the basic and additional information needed for the user. The user can choose the place (filtered as a city, region, country, and the like) and get the card which shows basic data such as temperature and weather characteristics (sunny, cloudy, cold, etc.) and additional data such as date and time according to the local time zone. It can be especially useful for users who travel a lot and need to know how to estimate their time and routines considering the local situation.

Weather Concept 

Graphic elements

Graphic elements for weather applications are among the most essential things to put time and effort into. Weather apps, as it was already mentioned, are highly visual, and data perception has to take seconds, so graphic elements should first of all be concentrated on increasing usability. A designer has to remember that this kind of app could be used on different devices, in different environments (bright or poor light around, for example), very often on the go. People with different levels of sight will need to use it. So, to be useful and usable, the app should apply graphic material which will be not only visually appealing and stylish but also easily perceived in various conditions.

Among the graphic elements vital for an efficient weather app, icons should be mentioned first. In one of our previous articles, we have already described the importance of elaborate work on this vital element of any interface. In the case of weather apps, icons have a great field of expression as they actually become highly informative elements. Being aware of this, designer Arthur Avakyan created the original set of weather icons for Tubik. All the icons follow the laws and standards of proportions and composition and will look recognizable and meaningful in different color palettes and combinations. Also, they all were tested by the designer in a range of sizes to check that their recognizability didn’t decrease in any case of use.

Weather Icons Set 

To represent how these icons work in layout, Valentyn Khenkin presented the concepts of a weather app seen on an iPad screen. It shows the location, the weather around – the temperature, pressure, and other details. The majority of screen space is covered by the illustration of the city, which creates a nice style and is recognizable as a support of the feature of location.

Weather Icons Presentation 

Weather App 

Interface animation can become a good way to liven up the graphic elements, as you can see in the animated interface by Sergey Valiukh. Animation adds movement and action, enhances efficient and fast microinteractions, and makes perception of the data even faster and somehow entertaining.

Weather App 

So, when designing UI for weather applications, designers have a broad perspective on their ideas and concepts, choosing different design solutions, and it is rather easy to move out of the box. However, any ideas made about the layout, graphic elements, and animations have to pursue the goal of creating a user-friendly, fast, and clear interface that could preferably have the great support of attractive and stylish looks.

Extensive discussions appear and follow the topic — and certainly, they will move on to the future — about the weather app design and finding the best solution that could be universal for everyone. Nevertheless, every day, millions of users, having different tastes and preferences, different favorite styles and characters, and different feelings of what feels comfortable and looks nice for them in particular, use this sort of simple app as a part of their routine. The more variants of looks and features are designed, the wider range of diverse options that endless target audiences will get to find the one that fits their particular needs and wishes. And that is, obviously, a user-friendly way.

Originally written for Tubik Blog

Check the gallery of weather applications

Сообщение Weather in UI Design: Tips and Examples появились сначала на Design4Users.

The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and books on design, presented in workshops and webinars, and shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems really constant and demanding.

The essence of an icon

Basically, an app or desktop icon is an image that having a kind of symbolic and metaphoric potential becomes the element of navigation in the process of interaction. In deeper explanation, an icon is a visual symbol representing some action, thing, person, real or virtual.

In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the app screen or webpage, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems of copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of navigation and explanation with being the aesthetic element of the visual representation of the product, supporting the general style and having their own character.

Being so multifunctional and comprehensive, icons of the apps and websites can be:

• • interactive, i.e. directly representing buttons, controls, and any other elements of interaction
  • clarifying, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves
  • decorating and entertaining, i.e. having lower functionality and higher aesthetic potential, providing a decorative addition to general style, for example featuring some seasonal celebrations, etc.

An example of interactive icons: Veggie App Concept

An example of clarifying icons: Passfold project 

An example of decorative icons: Easter and spring-themed icons

The features of icons

Some basic features of efficient icons include being:

• meaningful

As has been mentioned above, an icon is a graphic element that has high symbolic potential. It means that by creating the icon, first of all, a designer should define what is its role and meaning as a separate element and as a part of the general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with unnecessary elements.

• clear

Behind the clarity here we mean making the icon understandable. That is one more feature supporting icons being meaningful. In fact, what is the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such an icon will confuse the user and bring out a poor user experience.

• simple

The simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that any icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time, it’s important to remember the general style and other elements of visual representation of the whole app or website concept. Successful consideration and combination of these factors will result in efficient icons.

Valentine’s Day icon set 

• recognizable and unique

To make the icon recognizable, the designer needs to become a researcher before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create a significant basis for making the icon easily remembered and catchy. If a designer finds a way to make the icon recognizable not losing its main meaning, it will become the first step of attracting the user in conditions of active competition as well as will provide a positive feature for user experience as the user won’t be annoyed losing the time on looking for the necessary icons which aren’t recognizable at once.
The feature of uniqueness mentioned here doesn’t mean the creation of absolutely unique stuff every time you need the icon, but thinking about some even slight flavor of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user’s device.

• aesthetic and attractive

For sure, remembering that icon is a visual representation of the meaning, it’s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user to get into the meaning you represent behind the icon and at the same time, it is the important element making the product regarded as attractive, beautiful, and stylish. Following the principles of color theory, proportions and other features making the result of graphic design successful is always very helpful in the creation of a great appearance for the icon meaning.

Saily ghost icon version

• flexible

As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability are included in the list of key features making icons efficient. A good icon should be seen, readable and recognizable in different sizes and environments therefore it is one more process that should be thoroughly considered while creating icons.

• consistent

Icons as well as the other elements of the layout have to feel consistent as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app – as usually happens – they should follow the same style, and concept and correspond to the general design solution for the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.

IT Office Icons Set 

Creating icons for various design projects in Tubik Studio, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Besides creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, and Envato.

Multimedia Icons Presentation

Useful articles

Small Element, Big Impact: Types and Functions of UI Icons

Shape and Color in Logo Design. Practical Cases

Visual Perception. Icons vs Copy in UI

Small Stars of Interaction Design: Interactive UI Elements

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation

UX Design Glossary: Affordances in User Interface

UX Design: How to Use Animations in Mobile Apps

Originally written for Tubik Blog

Сообщение Iconic Simplicity. The Vital Role of Icons появились сначала на Design4Users.