Altabel Group's Blog

Posts Tagged ‘web design

Every web designer, design agency or somebody who works with websites must keep themselves up to date with the latest goings on in the world of web design, because the web is a unique environment which is constantly changing and evolving. Every year some new trends are born, some fade and some just continue to prosper.

We’re in a golden era of tools for designers with new products coming out every month. Innovative tools are popping up in every part of the workflow. From brand/asset management (Lingo and Bynder), to prototyping and collaboration (Marvel, Zeplin, InVision, Flinto, Justinmind), to website creation (Webydo, Blocs, Webflow), to tools for the amateur or marketer (Canva, Stencil, PicMonkey), and of course, to professional creation tools (Sketch, Affinity). And those are just the larger, more successful ones.


In this article we will take a look at new web design predictions for 2017, which hopefully will help you design better websites.

Let’s start!

There is no doubt that 2017 is definitely the year for super-rich gradient colors. Gradients and bright colors are already being implemented much more than in the past. We will also see many companies rebranded their own brand with bright bold colors. Instagram, Stripe and Asana are some good examples that already started.

We can all notice that today every young adult is an expert web user. And even the amateurs are acting like pros: using multiple tabs, and swiping to go back a page.

The result is that everything is faster. And we’ve all learned to become impatient. If you want to make a mild mannered person explode with annoyance, just make their Internet really slow for a minute.

Now websites are forced not just to become faster, but to become faster to understand. Designs which slow the user down have the same impact on their audience as these websites which don’t load at all.

Simpler designs are easier to scan, which means they’re faster to appreciate.

This is the biggest reason for the death of skeuomorphic design: users are more perceptive, less patient, and clutter only slows them down.

Apps put most websites to shame with super-minimal, beautiful interfaces. And they’re doing this because minimal interfaces perform better.

What about animation?

If you want to make a website look dated, cover it with animated “Under Construction” GIFs and Flash animation. But several things are coming together to make animation a rising star in modern web design.

Flat design can end up looking too consistent, boring even. Animation helps a website to stand out and to pack more information into less space.

Mobile apps have redefined what a user expects. Mobile apps use motion to convey meaning, and websites are just starting to do the same.

Typography trends emerge every year. Everyone is aware of the importance of typography in UX design. Much more than just arranging pretty fonts on a nice background, typography is an essential part of every design, it can make or break a whole project. It enhances your story, emotions you want to drive. It helps you to communicate the message to your users. This year we will see an increase in bold fonts.

If you haven’t dived into flexbox yet, you’re in for a treat. This relatively “new” CSS layout module offers both incredible responsive-friendliness in its functionality, but also makes a lot of sense to visual designers used to manipulating objects on the canvas with the align and distribute tools offered in the likes of Sketch and Illustrator.

Coming up hot on the heels of flexbox in the race for newer, better layout modules is CSS grid. While flexbox helps us solve some seriously aggravating and long-standing web design problems like vertical centering, it really wasn’t intended for use in full-page layouts. Grid, on the other hand, was built for full-page layouts. And like flexbox, it allows you to easily rearrange content order for different media queries.

There will be more focus on conversation. You might call 2016 the year of the bot. 2017’s going to see a lot more bots popping up across your life.

What this might mean, exactly, we’ll have to wait and see. But possible impacts include:

  • An even greater interest in “human” language (more good news for content strategists!)
  • Increased capacities for writers and content strategists to act as UX designers and bot developers
  • More conversational/natural-language forms
  • Attempts to transform the comment section from the internet’s sewer into fonts of “engagement” and new content — an effort already kicked off by the Coral Project

These are the main trends we believe will be trending for web design in 2017, but we want to hear from all of you! What are your predictions? Waiting for your comments.

 

Kate Kviatkovskaya

Kate Kviatkovskaya

Business Development Manager

E-mail: Kate.Kviatkovskaya@altabel.com
Skype: kate.kviatkovskaya
LI Profile: Kate Kviatkovskaya

 
altabel

Altabel Group

Professional Software Development

E-mail: contact@altabel.com
www.altabel.com

Front-end development frameworks are handy tools to save time and effort when it comes to designing web sites or applications. The choice of them is extremely wide nowadays, they can be either small or big and rich in features. One can be big enough to provide a fully functional responsive website template.

Each framework has its own strengths and weaknesses, specific areas of application, allowing you to choose based on the needs of a specific project. Here is the list of the most popular frontend development frameworks:

1. Bootstrap

Bootstrap is the most used frontend web development framework in the world. Created and maintained by Twitter, it is described as “a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.” The best thing about Bootstrap is that it is continuously upgraded by the bootstrap developers with latest technological advancements. For instance, when recently Google released material design guidelines, material design based bootstrap themes became available just under less than a month. This is the speed with which bootstrap follows and adapts any new web design trend.

Technically, bootstrap might not be necessarily better than the other frameworks, but it offers many resources (articles and tutorials, third-party plug-ins and extensions, theme builders, and so on). And you can see it basically everywhere. And this is perhaps the main reason why it’s framework #1 by popularity.

2. Foundation

Foundation is a truly professional lightweight front-end framework from Zurb. This framework enables the user to create complicated layouts without the need to create a large number of custom elements. Some key features that Foundation comes up with for building lightning fast websites are: data-interchange – using it you can load light weight html sections for mobile usage and heavier html for desktop or big screen devices; Fastclick.js – for ultra-fast mobile experience; off Canvas Navigation– almost default navigation style, you can create off canvas navigation out of the box using foundation; GPU Acceleration – helps smooth and faster animations.

This is one framework that gives a close competition to Bootstrap in terms of popularity, use and features.

3. Semantic UI

Semantic-UI is quite new yet already very competitive framework to the likes of Bootstrap and Foundation. It takes quite a different approach making websites building much more semantic. It utilizes natural language principles, thus making the code much more readable and understandable. Instead of learning complex CSS class naming conventions, Semantic classes are easier to remember. The other plus of Semantic is that most of its UI components come with real-time debug, making it easier to trace JavaScript behaviors.

Semantic is one of the most innovative and full-featured frameworks. It comes integrated with many third party libraries like Angular, Ember and Meteor and you hardly need to use any additional library even in the big and complex web projects.

4. Gumby

Gumby has become popular in very short time. It is a responsive CSS framework that is extremely customizable. Few of the key features of this framework are – an extensive and beautiful UI Kit and templates that give designers a head start in the design life cycle and a responsive grid system that adapts to any device and viewport. The framework also comes with a large number of components including responsive images (for serving images based on device size) and parallax for creating parallax effect like a breeze.

5. Pure

Pure is a light weight package of CSS modules that can be utilized in any web project.
It was created by the design house of Yahoo. Pure doesn’t come with additional JS or jQuery plugins, it is pure CSS.

The best thing about Pure is its exceptional small size. It offers only bare-bones styles for a clean start to your project. It’s ideal for people who don’t need a full-featured framework but only specific components to include in their work.

6. Susy

Susy doesn’t come as a jumbo sized package like Bootstrap or Foundation to cover all aspects of web design, but it brings out the best in what it is meant to do, building grids. So basically you have to understand the complexities of how grids are built. When you do that, some people say that then there is nothing better than Susy as you are able to create any kind of grid layout.

7. And the last in my list but not least – Material UI

Material design is rocking at the moment and promises to continue for the coming years. So CSS frontend development frameworks around material design are inevitable and Material UI is the pioneer in that direction and is the most comprehensive framework that implements Google material design. It is built on top of LESS CSS preprocessor and comes packed with React Components.

This framework provides CSS and material design compliant ready to use components that can be used in your web project. What you get with Material UI– Google Material Design Color Palette, Typography, Customization Option, etc.

So let me stop here, although one can for sure make this list longer (and you are welcome to!). There are many frameworks out there, so what one can advice you is to choose a popular framework that is under active development, but has reached some maturity. But the most important thing is to select a framework that fits you project needs. And finally, if you are willing to, you can adopt a mix-and-match approach. If a particular framework doesn’t satisfy your needs, you can mix components from two or more projects.
 

Aliona Kavalevich

Aliona Kavalevich
Aliona.Kavalevich@altabel.com
Skype ID: aliona_kavalevich
Business Development Manager (LI page)
Altabel Group – Professional Software Development

 


%d bloggers like this: