Web Design Trends for 2016

Vertical Patterns and Scrolling

A bigger leaning toward mobile – with some thinking mobile traffic could equal desktop traffic this year – means more sites are being designed with vertical user flows.

A few years ago, we were all debating the end of the scroll in web design only to find it roaring back as an important interaction tool. Smaller screens lead users to scroll more and designers to create user interfaces that are much more vertical in nature.

More Card-Style Interfaces

One of the biggest elements to spring from Material Design has been the emergence of card-style interfaces. They are in everything from apps to websites to printed pieces. Cards are fun to create, keep information organized in a user-friendly container and are engaging for users. The other bonus is that they work almost seamlessly across devices because cards can “stack” across or down the screen (or both).

Hero Video Headers (Think Movie-Style Sites)

Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.

Tiny Animations

Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size. Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surprise.

The most important factor when it comes to animation is to make sure it serves a purpose: Why are you creating the effect and what exactly is it supposed to do?

Focus on Interactions

Going hand-in-hand with animation is interaction. As the staple of apps and mobile interfaces, interactions create links between users and devices. Good interactions are often small – even micro in nature – and provide value to the user. From the simplest of alarms to a text message to a blip that it is your turn in a game, these small interactions shape how people interact with devices (and how loyal they are to associated websites and apps).

Even More Beautiful Typography

Streamlined interfaces have paved the way for the emergence of beautiful typography. (As has the addition of more usable web type tools such as Google Fonts and Adobe Typekit as mainstream options for creating expansive type libraries online.)

Big, bold typefaces will continue to rule because they work well with other trendy elements. This simple concept of lettering gives more room to other elements, while communicating the message with a highly readable display. The must-try trick is a simple pairing of a readable typeface and fun novelty option.

Illustrations and Sketches

Illustrations and sketches bring a fun element of whimsy to a site design. They can work for sites of all types and aren’t just for children anymore. The illustration style has also started to grow in popularity when it comes to some of the smaller pieces of website design as well, such as icons and other user interface elements. What’s nice about this trend is that illustrations make a site feel a little more personal. Because an illustration or sketch style icon appears to be hand-drawn, it looks and feels personal for users. That can go a long way into creating a connection with them.

Bolder, Brighter Color (With an 80s Vibe)

Big, bright color really started to emerge with the flat design trend and has continued to gain momentum. Google’s Material Design documentation furthers that conversation. And just take a look around Dribbble, where color is everywhere. These are key indicators that color will stay big in the coming year. Some of the change to the big color trend is in the type of colors used. While 2015 used more monotone big color designs, usage is starting to shift to larger and brighter color palettes with an almost 1980s vibe to them.

More Hamburgers and Iconography

Icons, icons, icons! From the debated hamburger icon to divots through design projects, iconography is big. More designers are releasing fun UI and icon kits that are easy to use, making icons easier than ever to work with. (And pretty affordable.) One of the other big things designers are experimenting with is oversized icons thanks to SVG formats.

Reality-Imagination Blur

Is that site real or animated? Is the path predetermined or can I make choices along the way? The next step of gamification and design is emerging with a blurred line between what’s real and what’s created (or imaginary) in web design projects. And the results are pretty stunning.

From virtual reality to websites that let you make choices to find new content, this type of customization is personal and users seem to really like it. This trend also includes creating imagery that looks real, but you know that it is not.

Websites with Slides

First there were sliders, so that websites could move images within a frame to showcase content. The next part of that evolution includes full-screen slides. Each slide refreshes the entire screen with new content; it can work with a click, scroll or timed effect. Users can navigate forward and backward for an experience that is almost physical. Expect to see plenty – and we mean a lot – of sites using this concept in the coming months.

LOGO DESIGN FOR 2016

As with most things in life… a lot can be learnt from the past – however, more often than not we are more concerned with looking forward and figuring out what the ‘next big thing’ is going to be.

This ethos holds true for Logo design, many of today’s most successful designs echo influence from the past, particularly with the recent uprising of the ‘hipster’ scene as a good example.

So, what’s going to be happening in 2016? Will we again be heralding in old style design such as a letterpress and ‘etched’ effects?

Well in honesty it does look as though some influence will be coming from the past However, with businesses gaining new ways of reaching audiences digitally, the biggest upsurge will be catering for those digitalrequirements.

Here’s what we believe are going to be the biggest hitters for logo design in 2016.

1.     NEGATIVE SPACE.

Here at Depixion we love the negative space approach. It allows for double meanings and subliminal captivation all wrapped up in one image. So many stories can be told with negative space or, it can be used in way to enhance the businesses ethos… Think Fedex, can you see the negative space arrows? These are hidden within the logo, but subliminally project speed and the idea of forward motion.

This style of design fits well into our ever increasing digital world as more often than not a negative space logowill consist of ‘flat elements’. This means that – digitally – they contain less information (memory) and, therefore load quicker. They work better both in print and digitally, more often than not allowing for easy colour changes to accommodate a variety of backgrounds/environments.

2.     FLAT.

Leading on from the above, flat designs will continue to dominate and become more and more relevant. This isn’t just because they’re clean and make an impact, but also because they lend themselves very well to the digital explosion. It is predicted that many companies this year will look to simplify elements of their logos to make them easier to identify.

3.     HANDMADE.

Often described as ‘honest’ logo’s, this style is nothing new and is fast becoming a growing trend within the artisan industries and more ‘personal’ retail services. They manage to communicate a sense of honesty and out of the many styles to choose from, tend to have their own personality. Don’t forget that it is possible to also combine this style of design with the more modern ‘flat’ approach, this creates a design that carries the same appeal as a true handmade logo whilst adding a touch of the professional feel about it.

4.     KINETIC.

Kinetic or Dynamic logos allow for a logo to change but remain the same. This style is on the rise and finds its place firmly within the multi-faceted businesses (businesses that have differing areas of interest and/or service arms). It allows the chance for a business to make its diversity very clear, but it does also throw up it’s problems. As, if done incorrectly, a ‘kinetic change’ can leave it’s audience completely confused. The best and most commonly used example of this style is the Google Doodle that changes every single day, this gives you a great idea as to how they can work when done right.

5.     MONOLINES.

This is where the same line weight is applied to all elements of the design creating something that is as intricate as it is simple. This style of logo design also projects an air of honesty about it. They are a welcome break from gradients and strong colours, often more pleasing on the eye and of course easy to remember.

Well, that’s our brief insight into the styles of 2016… Have we got it right? Well, only time can tell on that one. As with all design, logo design is organic and will change with the audiences perceptions and demands. As creatives in this crazy world, to survive we must adapt, so must our designs.

©depixion

Why HAML is future of web and HTML, All about HAML.

What is haml ?

At its core, Haml is a lightweight markup language.

Its, HTML Abstraction Markup Language

Haml makes writing HTML much easier, and when I say “much easier” what I really mean is “you won’t believe how much time you can save by using Haml.” In my opinion, it’s even more of an obvious time saver than Sass. Many developers take one look at Sass and think, “Neat! But I don’t really see a need for it.” With Haml, almost every developer, whether they would ever consent to use it or not, should immediately see the intense timesaving benefits that it brings.

Advantages

The main disadvantage of using HAML over HTML is simply that HTML is just about universal among web developers, where as the HAML community is still a relatively small community. This would undoubtedly make finding developers to work on your project in the future a more daunting task.
You never need to worry about missing a closing tag because the HAML parser will throw an exception and give you a line number. It’s quick, it’s short, it’s legible.

• easy to read and visually expresses your DOM hierarchy
• code is shorter as closing tags are eliminated

Difference between html and haml

Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it.

Who can use

Everyone who writes HTML can use Haml in some respect. Sure, you won’t use all of the features, but I’m sure you don’t use all of Photoshop’s features either but you still fire it up it on a daily basis.

My point is, if you’ve never written a line of Ruby in your life and don’t plan to, don’t let that scare you off from Haml. It’s still immensely fun.

Into Action

The beauty of Haml is that it’s “DRY”, meaning there’s been an attempt to strip out as much of the annoying inherent HTML repetition as possible.

Haml is whitespace dependent, meaning it uses the visual structure of your code to determine the HTML output.

HTML:

<p>Hi I'm HTML paragraph</p>

Here this small single line has repetition, the starting and closing tag obviously.

But,

HAML,

1	%p Hi I'm HTML paragraph

“impresionante it’s done :D”.

You would say “No it isn’t enough” , I need more examples :

We are using traditional html since logs with all its tags how can we implement them here in haml, your concern is right lets see.

Classes and Ids

Same (.) & (#) :

You want to say something now :)

code snap: for showing proper indentation

After compilation the HTML goes like:

Code Snap

Just the game of % and identation.

Different HTML Tags

Now you will think about tags that aren’t common, like footer, section, or may be anyThing

So HAML does not care about what tags are, just follow the syntax and all is yours.

See,

Here comes your real concern, Can i use HAML syntax in my HTML,

So offcourse it’s, Yes

Mixing HAML with Your HTML

Go with an example:

Compiling HAML to HTML

Since long we are trying the code and talking about compilation, now its time to compile it, but before going to command line, lets use some handy online tools.

Here is online compilor side by side, just type in or paste your code and get compiled haml easily, Handy !!

Check here

You can directly install HAML:

gem install haml

For local usage, if you are mac user you got lucky here, a special tool for you is: chocolatapp

You can checkout codekit multipurpose.

Check out Live Reload, that is always infront of you.

Conclusion

If you enjoyed using Sass, less and want to have same feeling for html, then HAML is a star for your innocent eyes :p.

Yes dont forget to checkout the official site of HAML .