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 .

Bootstrap 4 alpha

Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re stoked to share it with you and hear your feedback. We’ve got a lot of news to share with you, so let’s jump right into it.

What’s new

There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:

• Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.
• Improved grid system. We’ve added a new grid tier to better target mobile devices and completely overhauled our semantic mixins.
• Opt-in flexbox support is here. The future is now—switch a boolean variable and recompile your CSS to take advantage of a flexbox-based grid system and components.
• Dropped wells, thumbnails, and panels for cards. Cards are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.
• Consolidated all our HTML resets into a new module, Reboot. Reboot steps in where Normalize.css stops, giving you more opinionated resets likebox-sizing: border-box, margin tweaks, and more all in a single Sass file.
• Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.
• Dropped IE8 support and moved to rem and em units. Dropping support for IE8 means we can take advantage of the best parts of CSS without being held back with CSS hacks or fallbacks. Pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. If you need IE8 support, keep using Bootstrap 3.
• Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements. They also now come with UMD support, generic teardown methods, option type checking, and tons more.
• Improved auto-placement of tooltips and popovers thanks to the help of a library called Tether.
• Improved documentation. We rewrote it all in Markdown and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. Improved search is also on it’s way.
• And tons more! Custom form controls, margin and padding classes, new utility classes, and more have also been included.

And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Plus, we’re not even done yet!

Ready to check it out? Then head to the v4 alpha docs!

Development plan

We need your help to make Bootstrap 4 the best it can be. Starting today, the source code for v4 will be available in a v4-dev branch on GitHub. In addition, we have a v4 development and tracking pull request that includes a master checklist of changes we’ve made and our remaining possible todos. We’d love for y’all to help chip away at those todos.

The general development and release plan looks something like this:

• A few alpha releases while things are still in flux.
• Two beta releases after features and functionality are locked down to really test things out.
• Two release candidates (RCs) to really test things out closer to production environments.
• Then, the final release!

For those jamming on v4 with us, we also have a dedicated v4 Slack channel. Jump in to talk shop and work with your fellow Bootstrappers. If you haven’t yet,join our official Slack room!.

If you’re not keen on pushing code to v4, we’d love to hear from you in our issue tracker with bug reports, questions, and general feedback.

Supporting v3

When we shipped Bootstrap 3, we immediately discontinued all support for v2.x, causing a lot of pain for all our users out there. That was a mistake we won’t be making again. For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements. v3 docs will also continue to be hosted after v4’s final release.

One more thing…

In addition to shipping the first Bootstrap 4 alpha today, we’re also launching our latest side project, Official Bootstrap Themes.

We’ve talked about building premium themes for Bootstrap since our earliest releases, but never quite found the time or ideal approach until earlier this year. We’ve poured hundreds of hours into these themes and consider them to be much more than traditional re-skins of Bootstrap. They’ve very much their own toolkits, just like Bootstrap.

Top 15 CSS Frameworks for Responsive Web Design

Responsive Web Design has become a basic standard of web designing these days. From no where, there are now tens of Responsive frameworks which allow designers and developers to focus on core design of the application than basic boilerplate code for design.

Twitter Bootstrap has become the standard against which all Responsive frameworks are judged, and for a lot of good reasons. At the same time, there are excellent CSS frameworks like Zurb Foundation, LESS Framework etc. which offer features - be it components, code style, architecture, which can be more to one's taste and development preference.

While we prefer Twitter Bootstrap, there are many more basic and advanced Web frameworks you can choose from depending on your need and interest.

Twitter Bootstrap

URL: twitter.github.com/bootstrap/

Technical Details

• Type: Framework
• Technology: HTML5, CSS3, Javascript, jQuery
• Compatible with: Firefox- 5,6+, Safari 5+, Chrome 14+, Opera 11+, IE- 7,8,9+
• Additional Components: Modal, Alert, Button groups, Dropdowns, Badges, Navbar, Tooltips, Labels, Progressbar, Typeahead, Thumbnails, Popovers, Accordion, JS plugins

Quick Summary

• 12- column grid structure
• Fixed (comes with an option of responsive design) and Fluid layout pattern
• Designs pages fit for displays ranging between 480px (or even less) and 1200px (or even more)
• Nested grids, Offset support
• Customizable features for typography, colors, navbar, grid and more
• Based on LESS CSS Pre-processor

Zurb Foundation

URL: foundation.zurb.com

Technical Details

• Type: Framework
• Technology: HTML5, CSS3, Javascript
• Compatible with: Chrome, Safari, Firefox, IE- 8,9+, iOS- for iPhone, iPad, Windows Phone 7, Android 2+ for tablet and phone
• Additional components: Media Queries, Buttons, Modular Scale for Typography, Forms, Navigation, Tabs, Alerts, Tooltips, Labels, Accordion, Tables, Progress Bars, Video, Thumbnails, Orbit, Magellan, Reveal, Joyride, Clearing, UI elements

Quick Summary

• 12-column grid structure
• Fluid layout pattern
• Default grid-width set at 940px, adjustable grid-size, single breakpoint at 768px for devices that need width less than 768px
• Nested grids, Offset support
• Customizable features for typography, forms, UI elements, navigation etc
• Based on Sass styling pattern

LESS framework

URL: lessframework.com

Technical Details

• Type: Grid System
• Technology: HTML5, CSS, Javascript
• Compatible with: IE 6+, Safari, Chrome, Opera, Firefox, Nokia Webkit, Android Webkit, Mobile Safari (all iPhones, iPads, and iPod Touches), WebOS, Blackberry OS
• Additional Components: You need to add them separately

Quick Summary

• 3/5/8/10 columns grid structure
• Fluid layout pattern
• Default grid-width set at 992 px, adjustable for 320, 480, and 768px
• 3 sets of typography presets
• Default layout served to browsers not supporting media queries; other layouts served for the ones that do
• Based on LESS CSS Pre-processor

Skeleton

URL: getskeleton.com

Technical Details

• Type: Boilerplate
• Technology: CSS
• Compatible with: Chrome, Firefox 3 and above, Safari, IE- 7,8,9
• Additional Components: Buttons, Forms, Media Queries, Typography

Quick Summary

• 16-column grid structure
• It's only a development kit and not a full-fledge UI framework
• Default width set at 960px; can design pages for width ranging from 480px (or even less) to 960px
• Support for iPhone Retina images and Droid (charge/original)
• Grid pattern is a variation of 960gs

Gumby

URL: gumbyframework.com

Technical Details

• Type: Framework
• Technology: HTML, CSS, Javascript
• Compatible with: all the commonly-used browsers and screen-sizes
• Additional Components: Design templates, UI kit, Production-ready codes, Buttons, Forms, Toggles, Navigation, Drawers, Tabs

Quick Summary

• 12/16/hybrid columns grid structure
• 12-column grid divided into 60px-wide portion, 16-column into 40px-wide
• Fixed, fluid layout pattern Grid based on 960gs
• Nested grids
• Customizable features for grid, typography, colors etc

Columnal

URL: columnal.com

Technical Details

• Type: Grid System
• Technology: CSS
• Compatible with: all the commonly-used desktop and mobile browsers
• Additional components: Media Queries, Sub-columns, Prefix, Suffix, Wireframing templates, PDF of grid system

Quick Summary

• 12-column grid structure
• Default width of 1140px; IE- 6,7 work well on 984px or 960px
• Fluid layout
• Borrowed from 960.gs, cssgrid.net grid systems

1140 Grid

URL: cssgrid.net

Technical Details

• Type: Grid System
• Technology: CSS
• Compatible with: IE- 6,7,8+, Safari, Chrome, Firefox, MacBook, iMac, iPhone, iPad, Android phones, Blackberry OS, Nokia phones (the old ones too)
• Additional components: Media Queries

Quick Summary

• 12-column grid structure
• Default width of 1140px
• Fluid layout
• Option of including Retina Display x2 images for iPhone 4

Semantic Grid System

URL: semantic.gs

Technical Details

• Type: Grid System
• Technology: CSS
• Compatible with: IE 6+, Firefox 3.5+, Chrome, Opera 9+, Safari 4+
• Additional components: Mixins for LESS, Stylus, and SCSS

Quick Summary

• 12-column grid structure
• Default width of 960px
• Fixed, fluid layout
• Nested columns
• Runs on LESS, Stylus, SCSS pre-processor

Golden Grid System

URL: goldengridsystem.com

Technical Details

• Type: Grid System
• Technology: HTML, CSS3, Javascript
• Compatible with: IE 6+, Safari, other common browsers and screen-sizes
• Additional components: Media queries, Zoomable baseline grid, Golden Gridlet

Quick Summary

• 18-column grid structure of which 16 columns available for actual design
• Foldable grid pattern inspired by DIN paper system and Unigrid
• Covers screens ranging from 240px to 2560px
• Columns can be folded into 8 or 4 numbers depending upon the screen size
• Elastic gutters for better layout pattern

Titan Framework

URL: titanthemes.com

Technical Details

• Type: Framework
• Technology: CSS
• Compatible with: Still in developmental phase
• Additional components: PSD templates, reset.css, 12.css, text.css, 16.css

Quick Summary

• 12/16 column grid structure
• Similar to 960.gs grid system classes
• Default width set at 960px
• Responsive Grid System

Responsive CSS Grid System

URL: responsivegridsystem.com

Technical Details

• Type: Grid System
• Technology: HTML, CSS
• Compatible with: IE 6+, Safari 4+, Opera 9+, Firefox 3.5+, Chrome
• Additional Components: Media Queries

Quick Summary

• 2 to 12 columns grid structure
• Suitable for all the commonly-used widths including those less than 480px
• Fluid layout

Base

URL: matthewhartman.github.com/base/

Technical Details

• Type: Framework
• Technology: HTML5, CSS, Javascript
• Compatible with: IE 7 and above, Firefox, Chrome, Opera
• Additional components: PSD, HTML5 template and jQuery, Typography, Tables, Blockquotes, Javascript plugins, Forms, Buttons, Lists

Quick Summary

• 12-column grid structure
• Fluid layout
• Based on LESS CSS Pre-processor
• Default font-size of 14px, line-height of 22px
• Built for mobile, netbook, tablet, desktop

Kube

URL: imperavi.com/kube/

Technical Details

• Type: Framework
• Technology: CSS, Javascript
• Compatible with: Chrome, Opera, Safari, IE 8+, Firefox
• Additional components: Typography, Tables, Forms, Buttons, Blockquotes, Lists, Figure, Definition

Quick Summary

• Nested columns
• Developer version is based on LESS and includes mixins, modules, and variables
• Includes a few goodies like Lead, Links, Colours, Elements, and Images

CSS Horus

URL: csshor.us

Technical Details

• Type: Framework
• Technology: CSS
• Compatible with: IE 7, 8, 9+, Safari, Chrome, Firefox, Opera, iPhone, iPad, Blackberry, Windows phone, Android, Nokia
• Additional components: Resets, Table, Lists, Button, Links, Typography, Forms, Basics, RTL

Quick Summary

• 16-column grid structure
• Available width-size of 1200px, 960px, and less
• Based on LESS CSS Pre-processor
• Also compatible with screen-width of mobile phones

Amazium

URL: amazium.co.uk

Technical Details

• Type: Framework
• Technology: HTML, CSS
• Compatible with: all the commonly-used browsers and screen-sizes
• Additional Components: Typography defaults, Tables, Media Queries, Forms, provision for responsive images and videos, Show and Hide, Forms, Tables

Quick Summary

• 12-column grid structure
• Fluid layout
• Default grid-width set at 960px; can design pages for width ranging between 300px and 1200px *Supports Hi-resolution/Retina (Pixel ratio:2) images
• Offset support