Free download: Solaris Eclipse font family

Solaris Eclipse is a beautiful geometric sans-serif, designed by the typophiles at woodstudio.

Based around the geometry of a circle, the simple shapes create a modern aesthetic that evoke the near-future. Perfect for sci-fi, electronic music, or company branding, the typeface is clean, while being packed with character.

The distinct descenders on the lowercase ‘g’ and ‘y’ extend into the glyphs’ counters creating an underlying feeling of motion and energy.

Ideal as a display face, Solaris Eclipse offers designers an original geometric sans that brings with it a distinct tone of voice.

The font comes with dozens of analphabetics, making it suitable for most European languages. It comes in both regular, and bold weights. And it’s free for personal use. Download the files beneath the preview:

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

Hot Summer Bundle of 100+ Premium Quality Vectors – only $14!

Source

Looking fast beats being fast

You’d be forgiven if you thought that you had to design your clients’ websites to be fast all the time. After all, in modern, UX best practices, a site has to be fast to reduce the bounce rate, keep site visitors engaged, and keep them coming back.

Users don’t like slow sites because everyone’s used to things getting faster on the web. If they have to wait five seconds for a news site to load, but a comparable news site will load pages in just two seconds, you can bet that the faster site will get the visitors.

For your…site to please visitors…it doesn’t have to be fast, it just has to feel fast

However, one very curious aspect of web design is that perception is reality. For your client’s site to please visitors and retain them, it doesn’t have to be fast, it just has to feel fast.

Understanding this distinction can empower you to design sites with great UX and engaged visitors. Here’s how…

Why fast sites matter

It’s not just me saying that fast sites are highly desirable—the data says it too. Moz says that you can improve the conversion rates of the sites you design for your clients if you make them fast.

Case studies bear this out, too: Mobile webpages that are only as much as one second faster than other pages see a 27% boost in their conversion rates. That can be huge from a sales perspective!

Clearly, when sites are faster, visitors stick around longer, become more engaged with your content, and then convert at higher rates.

What matters is your visitor’s experience, which is dependent on their perception

But visitors don’t sit at their screens with a stopwatch checking the speed of your landing page, no one but you is measuring the actual speed of your site. What matters is your visitor’s experience, which is dependent on their perception.

Skeleton screens

What’s a skeleton screen? A skeleton screen is a blank webpage that gradually fills up with content as the page finishes loading. Skeleton screens are an intelligent and effective alternative to techniques like progress bars or spinners, which trials show create a perception of a slow page load.

Google’s product director, Luke Wroblewski, conducted a case study where he used spinners for a native app’s interface that he was working on. Each time a page loaded, users were greeted with the spinners, which displayed loading progress. The result was that users thought the app was actually slower than prior versions.

This can be explained by the fact that progress bars and spinners call users’ attention to the load process—which creates a perception of slowness.

On the other hand, techniques like skeleton screens call users’ attention to the fact that the page is gradually filling up with content and therefore showing them real progress. By focusing on the actual progress instead of the wait time, skeletons screens make your visitors and users feel like your site is faster already.

Changing up site colors

Colors also have a great impact on the perception of your site’s speed on your visitors. You can make your users think that your site is loading quite fast based on the color that you choose when the page is loading. Choose a relaxing color, and your users feel that your site is actually faster than it is.

According to the Journal of Marketing Research (via Adobe) if you want to make page loading time feel quicker use the color blue on the page while a download is occurring.

There are also other dimensions to color, such as chroma and brightness. The former is a color’s saturation or pigmentation while the latter is the tint that a color appears to have.

brightness…has the most impact on…users’ perception of site speed

Research indicates that low-chroma colors (those that are more subdued) relax users and therefore make them perceive a site as faster. On the brightness side, high-value colors appear as though they’ve been mixed with white; we generally call those pastels. These high-value colors produce more relaxed feelings in your users, therefore helping your site’s perception as fast.

In fact, brightness is the factor that has the most impact on improving users’ perception of site speed.

It should also be noted that research also indicates that more relaxed users in general deliver more positive outcomes for sites, such as more conversions, likes, and shares.

Calls to Action

Simply put, the way you use the call to action on your page can significantly impact how your visitors perceive your site’s speed. For example, if your call to action is buried down at the bottom of a long landing or sales page, so small and hard to read that it takes people a while to find it, or not seamlessly supported by the information architecture on the page, then it will take people longer to find it.

When it takes visitors a longer time to see your call to action, then it can definitely feel that your site is slower than it is. After all, put yourself in the user’s shoes, they land on your page and are trying to make sense of the goal of said page. When they don’t immediately see the call to action button, it’s going to confuse them and take him a while to make sense of what’s going on, which all contributes to a heavy feeling of a slower site.

Therefore, when designing a call to action for a page, incorporate it seamlessly as part of the main page element. For example, Kayak does this well on its car rentals page. At a glance, users can tell that the page’s call to action (the search button) is an integral part of the main page element, which is the search bar for car rentals. As a result, they’re able to quickly understand the whole point and purpose of the site.

Sites that only feel fast still deliver awesome UX

Designers need to always follow the main rule in web design: Design for user experience. One of the best ways to do this is to design for site speed, but, knowing the psychology and behavior of your visitors, you can also design your site to merely feel fast as opposed to actually being blazingly fast.

Don’t treat this as an alternative to building a fast site. While a fast site can be made to feel slow, it’s a lot easier to make a site feel fast if it actually is. Ultimately, what matters is user perception.

Hot Summer Bundle of 100+ Premium Quality Vectors – only $14!

Source

50+ fresh resources for designers, July 2016

Hey there! We are proud to return fully stacked with a collection of resources and tools that will make the most out of your web design/development skills. We are committed to bring you the best of the best in terms of freebies, we’re sure you’re gonna enjoy them.

50 vector flat style icons pack

A great set of 50 beautifully crafted flat style icons that come available in PSD, AI, SVG, PNG and EPS format files.

50 Vector Flat Style Icons Pack

70 flat social sketch icons

An amazing set that comes with 70 vector icons in, both monochrome and colored styles, including icons for social media, services, software, and more industries.

70 Flat Social Sketch Icons

37 restaurant PSD blocks

37 hand-crafted restaurant blocks, meant to create an impressive landing page for food services using customizable PSD files.

37 Restaurant PSD Blocks

Magic watercolor textures bundle

A collection of different handmade watercolor textured backgrounds. There are 7 different freestyle watercolors, in 4912×3264 resolution.

Magic Watercolor Textures Bundle

True grit’s textures sample pack

An amazing sample pack that includes a bunch of premium, pro-quality textures, vector assets, and brushes. There are 25 bitmap and vector textures, 3 vector halftone patterns, and 10 assorted brushes including dirty, grainy, grungy and worn brushes.

True Grit's Textures Sample Pack

10 incredible marble ink textures

A great collection that comes with 10 marble-like ink textures for backgrounds, in 6000×4000 resolution and 300 dpi.

10 Incredible Marble Ink Textures

Dramatic color grunge textures pack

A collection of 10 JPG images delivered in 3500×2500 resolution.

Dramatic Color Grunge Textures Pack

Gravity business card smart object mockup

An amazing mockup that provides a customizable card design (front & back), shadows, and background. 

Gravity Business Card Smart Object Mockup

VSApp: mobile & web PSD template

A PSD mobile and web UI kit for delivered in PSD format files that includes a smooth 404 page, bundle sections, slideshows, download pages, and more.

VSApp: Mobile & Web PSD Template

Fade: dark & modern mobile app UI kit

A UI kit for mobile devices, with a bunch of features like an entries editor, music and video player, image gallery and more; all with a green-black color palette.

Fade: Dark & Modern Mobile App UI Kit

Mercatus: mCommerce UI kit

An mCommerce UI kit that has over 120 different screens built for Sketch, with a set of original icons and assets created for the kit. 

Mercatus: MCommerce Mobile UI Kit

FeedApp: modern mobile app UI kit

A great UI Kit for mobile applications based on an app that tracks users moods, from time to time the user can evaluate how they are feeling in 4 different categories.

FeedApp: Modern Mobile App UI Kit

Popo: wide sans font

A beautifully crafted sans font that features wide characters, with a low crossbar design as well as smooth edges and ends for all of its uppercase features.

Popo:  Wide Sans Font

Golden Sans: professional multiweight font

A modern high-quality sans font that counts on 7 different weights for its premium version, it supports multi-language features and quite a few glyphs, which make it a very versatile font.

Golden Sans: Professional Multiweight Font

Mercurial: modern wiggly strokes font

A monospace decorative font that features a regular wiggly line on its character’s strokes and that comes with of the full Latin alphabet, a number of accented letters, numbers, and a bunch of glyphs.

Mercurial: Modern Wiggly Strokes Font

SpeedHunter: vintage central line font

A central-lined designed font that features a vintage/retro style that has only uppercase characters, perfect for signs and displays.

SpeedHunter: Vintage Central Line  Font

Inflecto: modern sans typeface

An amazing modern sans font, the name of which alludes to its curved design. It was made especially for displays, headers, and big titles.

Inflecto: Modern Sans Typeface

EXO: modern one-page PSD theme

A PSD one-page template meant for company work purposes, using customizable layouts, containing a lot of features like “about us”, “team, history”, and more.

EXO: Modern One-page PSD Theme

Minimal portfolio PSD template

A minimalist portfolio template delivered in PSD format that was made to present artwork or graphic design, containing fully customizable shapes and well-grouped layers.

Minimal Portfolio PSD Template

Pilumnus: fancy portfolio PSD template

A PSD template specifically designed for featuring artists portfolios in a fancy way with a grid gallery and a clever background.

Pilumnus: Fancy Portfolio PSD Template

Fashion eCommerce PSD template

A one-page PSD template designed for building fashion eCommerc websites that counts on social icons, a layered design, a tight-tile and more to see.

Fashion ECommerce PSD Template

Boron: beautiful image blogging WordPress theme

An impressive blogging theme for WordPress that features an image-grid home page, with Ajax content loading.

Boron: Beautiful Image Blogging WordPress Theme

Revolve: modern agency WordPress theme

A vertically scrolling WordPress theme crafted for agency portfolios, personal blogs, business, andc photography. It offers a complete customization, and multiple options for building a website instantly.

Revolve: Modern Agency WordPress Theme

Classic Interior: modern interior design site bootstrap template

An impressive bootstrap template for interior design agencies that comes with PSD files, it features elegant visual effects, and was designed with HTML5, CSS3, and Bootstrap for a clean and responsive feel.

Classic Interior: Modern Interior Design Site Bootstrap Template

Beam: corporate portfolio bootstrap template

An amazing corporate portfolio website template that features a modern and elegant look.

Beam: Corporate Portfolio Bootstrap Template

3D CSS stat graphs

A statistics graph built using pure CSS.

3D Statistic CSS Bars

Fade background color animation as you scroll

A snippet that uses Javascript and CSS to create an animation of a fading background color change as the user scrolls down.

Fade Background Color Animation As You Scroll

Material design interactive lists

An interactive list, using JavaScript to animate the checking and unchecking of items. It also allows the adding of tags to every item for clarity and sorting.

Material Design Interactive Rekord Lists

SVG path transformer

Code that allows the responsive manipulation of an SVG figure created, changing width, height, padding, position and, its full shape overall.

SVG Path Transformer

SVG animated medical icons

Animated medical icons made with CSS and JavaScript.

SVG Animated Medical Icons

DOM deployment to canvas

A script that renders a DOM tree onto a canvas in an aesthetically pleasing manner, it also intends to serve as an educational primer.

DOM Deployment to Canvas

Color-wander: seeded random based generative artwork

A creative tool that generates beautiful artworks in node/browser based on a seeded random which can be used for backgrounds or animations.

Color-wander: Seeded Random Based Generative Artwork in Node/Browser

Botlist: assorted bots store

Botlist is an online app store for bots that accomplish multiple purposes, the search can be filtered, the users can upload their own bots and more.

Botlist: Assorted Bots Store

Solr: open-source enterprise search platform

An open-source enterprise search platform that is highly reliable, scalable and fault tolerant, providing distributed indexing, replication and load-balanced querying, automated failover and recovery, centralized configuration and more.

Solr: Open-source Enterprise Search Platform

Horizon: pealtime open-source JavaScript backend

An open-source backend that lets developers build and scale real-time web applications, including convenient APIs and services that make it easy to use modern JavaScript frameworks like React, Angular, and React Native.

Horizon: Realtime Open-source JavaScript Backend

JWT Inspector: JSON web tokens inspect & debug browser extension

A Chrome browser extension that decode and inspect JSON Web Tokens in requests, cookies, and local storage. It will be available soon for other browsers.

JWT Inspector: JSON Web Tokens Inspect & Debug Browser Extension

Npm-gui: frontend NPM tasks GUI

A GUI tool for NodeJS-based projects to install, uninstall or search packages, its can easily work with package.json and the node_modules folder.

Npm-gui: Frontend NPM Tasks GUI

Siteleaf: friendly static site CMS

A content management system designed for a better web, featuring integration with existing tools, easy tracking using Github, and an API for your content and much more.

Siteleaf: Friendly Static Site CMS

HyperDev: full-stack web apps developer playground

A developer playground for building full-stack web apps fast, combining automated deployment, instant hosting, and collaborative editing.

HyperDev: Full-stack Web Apps Developer Playground

Opentest: seamless screen, mic, and camera recording for Chrome

A service for Chrome that allows you to seamlessly and simultaneously record your screen, microphone, and camera to store your recordings unlimitedly in the cloud. It also provides you you with direct URL links  for instant sharing.

Opentest: Seamless Screen, Mic and Camera Recording for Chrome

Vector avatar generator

A great set of 900 gender-sorted items and 3,400 symbols to generate avatar icons in a nice flattish, outlined style. They’re delivered in Ai format, and organized in 12 different categories.

Vector Avatar Icons Generator

Image visual center tool

A tool that finds the visual center of an image. It calculates a visual weight value for every pixel on the image, and then the algorithm tries to balance that weight in all directions.

Image Visual Center Tool

Formstone: responsive media query events jQuery plugin

A plugin that can track global changes to screen size based on an existing grid system. This is useful when many elements need to be resized at any change to the target screen size.

Formstone: Responsive Media Query Events jQuery Plugin

Cool radial SVG effect slider

A simple, responsive slider, with a radial transition effect powered by SVG clip paths and mask elements. It pops open a growing circle as you click on the arrows.

Cool Radial SVG Effect Slider

React D3 components library

A tool that compiles your code into React components, it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3.

React D3 Components Library

Anypixel.js: software & hardware displays framework

An open-source software and hardware library that makes it possible to use the web to create big, unusual, interactive displays out of all kinds of things.

Anypixel.js: Software & Hardware Displays Framework

OpenShare: customizable social platforms API wrappers

A completely customizable API wrapper for all major social networks and platforms that, unlike other social sharing tools, doesn’t retarget and profit from your users.

OpenShare: Customizable Social Platforms API Wrappers

Holmes: fast & easy page searching JS plugin

A JavaScript plugin that allows you to search text inside a page instantaneously, filtering out all of the non-matching elements.

Holmes: Fast & Easy Page Searching JS Plugin

TensorFlow: open source machine intelligence software library

An open-source software library for machine intelligence. Its vast reach of interactivity makes it applicable in a wide variety of domains.

TensorFlow: Open Source Machine Intelligence Software Library

Anime.js: powerful JavaScript animation library

Quite a powerful animation library developed in JavaScript that allows you bring to life CSS, individual transforms, SVG paths, DOM attributes, and JS Objects.

Anime.js: Powerful JavaScript Animation Library

CloudRail: multi-platform unified API

An amazing multi-platform library that allows you to integrate several APIs into a single service counting on full documentation, easy integration, metadata acquisition, and more.

CloudRail: Multi-platform Unified API

Hot Summer Bundle of 100+ Premium Quality Vectors – only $14!

Source

How to select the perfect image format

JPEGs, PNGs, and GIFs — oh my! Most web developers only learn which format to use through trial, error, and long experience. And almost nobody understands how these formats actually work.

In this article, we’ll take a high-level look at each formats’ compression algorithms, in order to understand how their differing strategies make them more or less appropriate for different kinds of images. Then, we’ll tour a few next-generation image formats (like WebP and JPEG-XR) and see how we can use smart servers to take advantage of these powerful (but not yet universally-supported) formats, today.

Let’s kick things off with a dear old friend…

JPEG

Allow me, for a moment, to spend some time appreciating the venerable, amazing, JPEG. The twenty-five-year-old bag-of-algorithms that is ISO 10918 aka the JPEG standard has stood the test of time.

So, how does it work? And what is it good for?

JPEG compression carves an image up into 8×8-pixel-blocks, and then does something a little bit crazy to them, with a whole lot of math. It converts each block’s pixels—lists of R, G, and B values, mapped to sequential points in space—into a list of coefficients, used in equations which describe the block in terms of waves of energy. In technical terms, the JPEG compression algorithm translates an image’s information from the spatial domain to the frequency domain.

Practically, this means that JPEG is very good at compressing continuous-tone images: images with a tremendous number of colors, and smooth transitions between them. In other words, JPEG assumes that your image is going to look more or less like a photograph.

Conversely, the JPEG format is terrible at compressing images with crisp edges or high-energy, noisy textures—it’ll put rings around sharp edges and blur out fine detail.

In order to compress these images well, we to employ different compression algorithms. Enter our next format:

GIF

In the early days of the web, if an image wasn’t a JPEG, it was a GIF.

The GIF format uses the LZW compression algorithm, which is far simpler than JPEG’s mathemagic. Essentially, the LZW algorithm scans over your image data and generates very short codes for the parts of it that repeat; LZW shortens repetition. Which means that the GIF format is good at compressing images that have large chunks of identical or repetitive data. Images that only have a few colors, in broad swaths, with sharp transitions between them can be stored efficiently and losslessly as GIFs.

And even though it’s a simple format, GIF sports a pair of fancy features: transparency and animation.

But… GIF is terrible at compressing things that have even a moderate number of colors; heck, the format has a baked-in, hard, 256-color limit. Converting an image with more than that number of colors into a GIF results in lossy posterization, which looks awful.

In short, GIF and JPEG have opposite and complementary strengths. They made a killer team in the web’s early days.

But unresolved patent questions surrounding the LZW algorithm inspired a few very smart individuals to take a second crack at designing a lossless image format for the web.

PNG

PNG excels with the same sorts of images that GIF does, and brings a few added benefits:

  • No 256 color limit
  • Alpha channel transparency (so a pixel can be partially-transparent, and not simply all-transparent or fully-opaque)
  • In all but a few edge cases, superior compression

This image from Wikipedia shows off PNG’s ability to compress a full-color image with semi-transparent pixels pretty dang well.

How does PNG beat GIF, when it comes to compression? By adding some layers to its compression stack…

First, the PNG algorithm tries to reduce the amount of data it will need to store by using the pixels that it already knows about to predict the ones that it doesn’t. The format features five different prediction strategies, but basically, the PNG assumes that pixels next to each other will be similar. If this assumption proves true, PNG saves data by only storing the difference between its prediction and the actual value; small numbers take up less space than large ones.

Second, PNG cuts out repetition by allowing the image to refer to previous, identical pixel sequences (instead of storing the same data twice) using an algorithm called LZ77. If you squint, PNG’s LZ77 and GIF’s LZW are achieving the same ends—cutting out repetition—but get there via means which are distinct enough to evade patent lawyers. Everybody wins!

And then, finally, having done all of that, PNG uses a process called “Huffman coding” to boil the remaining values down even further by generating the smallest-possible codes for the most common values (incidentally, the JPEG format uses Huffman coding as a last-step as well).

Combining all three of these (lossless) techniques provides huge benefits over GIF’s single strategy. And sophisticated tools can provide even greater compression ratios by altering the original image data lossily before it’s run through this gauntlet, in order to make it more compression-friendly.

Stepping back, all that you need to know is this: PNG will perform worse than JPEG when it comes to photographs, and better than GIF almost always. So, use it for images with crisp edges and broad swaths of solid color or precisely repeated patterns.

The next generation

As of this writing, those three formats—JPEG, GIF, and PNG—are the only image formats with universal support. Which is to say, they’re the only formats that developers can actually use. But new, cutting edge formats are already here—and they’re spectacular.

WebP

WebP is an offshoot of Google’s WebM video format; the core of it’s compression strategy is predictive, which is to say, it takes the simple predictive strategy used by the PNG format to the next level. WebP uses one of up to sixteen different prediction strategies for every (variable-sized) block in the image, and can optionally either losslessly or lossily compress the residual difference between the predicted and actual values. The format’s relative complexity provides it with a lot of flexibility; it’s good for a wide variety of imagery (both graphic, if you choose its lossless settings, and photographic, if you go lossy), with (generally) better compression than either PNG or JPEG.

But, it’s Google’s format and it is only supported in Chrome at the moment.

JPEG-XR

Microsoft’s next-gen-format-of-choice, JPEG-XR layers a bunch of new techniques on top of the basic mechanics of JPEG compression, enabling:

  • Lossless compression
  • More efficient lossy compression
  • Alpha-channel semi-transparency

Like WebP, JPEG-XR is a lot more complex, performant, and less-well-supported than its predecessors. Right now, the format is only supported in Internet Explorer and Edge.

How to use the formats of tomorrow, today

Is there any way for us to use these next-gen formats, right now? There is!

New markup allows developers to supply the same image in multiple formats, and lets the browser decide which one to load out of the bunch. Unfortunately, this markup can get a little complex:

<picture>
<source type="image/webp"
       srcset="sunset.wepb" />
<source type="image/vnd.ms-photo"
       srcset="sunset.jxr" />
<img src="sunset.jpg"
    alt="A colorful sunset" />
</picture>

Fortunately, there’s another way forward. Front-end engineers can shift this complexity to the back-end, employing smart servers that can send different users different resources from the same URL.

Using a service like Cloudinary, developers can deploy dynamic, adaptively-compressed images by adding a few simple characters to their URLs. Stick f_auto onto a Cloudinary URL, and you get adaptability without adding any complexity. The picture markup above boils back down to:

<img src="http://res.cloudinary.com/eric-cloudinary/image/upload/f_auto/sunset"
    alt="A colorful sunset" />

How does this work? Turns out, clients tell servers which formats they support when they request image resources from servers. A smart server, then, can send different clients different resources, based on the information contained within their requests.

And that’s not all that a smart server can do–when you tack on a q_auto too, Cloudinary will automatically figure out not only which format will work best for each client, but also which specific compression settings will work well for your particular image, saving you from having to remember anything at all about each formats’ complex internal workings. So! Stop reading, and sign up for a free account today.

 

[– This is an advertorial post on behalf of Cloudinary –]

Hot Summer Bundle of 100+ Premium Quality Vectors – only $14!

Source

Essential design trends, July 2016

There’s a lot of overlap in the biggest design themes of July. In many of the examples below, you’ll see that multiple trends are used in many of the examples. That’s because many of the trends are simple techniques that can be added to almost any type of design.

This is a showcase of micro-trends. What’s particularly nice about these small-scale trends is that you can use (or remove) them without having to do a full-scale redesign. They can serve as little tweaks to help you freshen up a page for a short time with an on-trend element.

Here’s what’s trending in design this month:

1. Color overlay on imagery

Color overlays are a visually interesting way to draw the eye when the art is less than stellar. It can be a good way to add color and intrigue to a plain photo, stock imagery or add color when the image is lacking that certain spark.

Use of color overlays varies greatly. While bright colors are one of the most popular options, a muted or sepia overlay can change the mood of a project or add just the right vintage feel, such as with the Lyrix website, below.

When it comes to color overlay, solid colors are typically the most popular option. Bright colors are common and many of the same hues that are popular with other design trends such as flat and material design are commonly used. (Here’s that layering of trends mentioned in the intro.)

Finally, when thinking about a color overlay, consider a gradient, duotone or multi-color effect. This technique can work particularly well with an image that’s easily identifiable or with imagery that’s flat on its own, such as the photo for NYC Pride, below. The reason you are drawn into the website design is the bright color overlay, not the image itself.

(Note with NYC Pride’s website, in particular, that another trend is making a comeback—the gradient. More gradients are starting to show up in design projects and we’ll look at this trend in greater detail next month.)

2. Tiny corner logos

For a while logos were one of the most dominant elements in a website design. Designers were using oversized version of brand names and logotypes to create interesting aesthetics.

Now they are taking to opposite approach.

Logos are being used smaller than ever. But that’s not the only commonality when it comes to the way small logos are being used. They also appear in the same location in almost every example of this trend – the top left corner.

The placement is not that surprising. The top left is a common logo placement location in website design and has been for some time due the the idea that users will read the site from top left to right in an F-shaped pattern.

What is surprising is how small the logos actually are in relationship to the rest of the design. In some instances, these logos are designed to symmetrically match the hamburger menu icon. So they are exceptionally small.

The Brave People logo, for example below, is only slightly larger than the menu icon and is designed to look almost like an icon in itself, with white novelty text inside a black box. What’s nice about this technique is that it gives the rest of the images and text on the canvas plenty of room to be showcased. Brave People uses plenty of video snippets and layered boxes of information to draw users through the website design. Having a small logo helps the eyes stay in the right place and move through the content with ease.

Coats uses a similar concept, balancing the tiny logo on side of the screen and the menu icon on the other. The design further carries the concept of the logo in iconography throughout the site so the user always has a visual reminder of what website they are on.

3. “Make you look” images or video

“Made you look!”

That’s what many of the hero images and videos on websites are screaming as you land on them. Images that are odd, unusual or just require a little thought are becoming a popular way to draw users in and keep them on the website for a longer time period.

You want to understand what is happening in the image or whether that’s a dog or wolf (Instynct, below), what an out of place element means (Bullhorn, below) or what is going to happen next as in the video painting for Nachume Miller (below).

So what makes a make-you-look image? It has to be different and interesting. It has to be high quality and contain a visual that you don’t see every day. The visual should make you wonder about something, ask a question or desire to learn more.

The image or video will grab your attention and hold it just a bit longer than a picture of a cheeseburger on the McDonald’s website. It’s that element of surprise or whimsy or wonder that makes it something users can turn away from. When you go back to it, or watch the entirety of a video loop or just can’t get the image out of your head, then you know it will make others look as well. (Go big and bold, or go home!)

Conclusion

It’s fun to see multiple trend converge as many of these websites exemplify. Tiny logos might be one of the elements that most dominant right now. It’s one of those things you might not even notice until you start looking for it, and then you notice this concept being used everywhere.

Plus, it really gives the design some room for other elements by getting the logo out of the way, which is why is works in combination with other trends so very well.
What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Hot Summer Bundle of 100+ Premium Quality Vectors – only $14!

Source