Design Shack — Web Design Gallery, Articles & Community

Navigation / 24 May 2017

Design Trend: Side Navigation Is Everywhere, but Does It Work?

There’s a trending topic in website design navigation: sidebar menus. More designers are working with vertical side navigation for projects, with a specific location on the left side for many of these website designs.

And while it looks nice and can help streamline clutter in the overall canvas, does it really work? Will users respond to side navigation? Is it a design trend that you should consider? Today, we’ll try to get to the heart of the questions with some practical and usable answers.

CSS / 3 May 2017

How to Add Touches of Magic to Your Interactions

Every time a user does something with your design, an interaction is created. Some interactions, such as clicks, go almost unnoticed by the user. But other interactions include a certain bit of magic that makes the user want to play with the design even more.

There’s a fine line between an interaction that has the touch of magic and one that can be completely overwhelming. The most magical interactions are a bit unexpected, simple, create an emotional response and make the user want to use it again.

Graphics / 6 Mar 2017

Design Trend: Innovative Hover Effects

Everywhere you look, there’s a cool new animated effect. If animation was the must-have design element of 2016, then innovated hover effects are the up and coming design trend of 2017.

Thanks in part to the popularity of Material Design and Apple’s animation guidelines with a focus on small movements, hover effects are making a comeback. But instead of the tacky, flashing, bouncing and spinning effects of the past, animations are simple, sharp and delightful. The best hover effects help the user and enhance the experience.

Hover effects can range from motion that has an impact on the entire screen to something as small as a directional cue or navigation element.

Navigation / 21 Mar 2016

5 Alternatives to Drop-Down Hover Menus

Is the era of drop-down hover menus over? It might well be. This design pattern doesn’t work for today’s users. The concept is clunky and doesn’t always translate well to smaller screens.

Users want menus and navigation options that are easier to use, simple to understand and don’t come with more options than they can think about in a few seconds. Navigation menus should be device-agnostic and work in the same way, creating a single experience, across device types. So what can you do to say goodbye to those drop down menus? We have five alternatives.

Graphics / 25 Jan 2016

How to Design Killer Micro-Content

The smallest parts of a design project can be the most important. It’s something we all know conceptually, right?

But do you ever get caught just filling in these details at the last minute? Does your micro-content suffer because you are ready to be finished with a project? Don’t let that happen. Plan out micro-content from the start to create better, more usable pieces that will help make the design better than you had hoped.

Graphics / 6 Jan 2016

7 Ways to Design a Killer ‘First Screen’ for Your Website

It’s time to talk about first screen design. The first screen is that initial glimpse that a user gets into your website. It’s everything above the scroll, whether the user accesses a website from a desktop, tablet or mobile device.

The information you include on this “first screen” is the key to website success. The design can entice and keep users clicking, or force them to navigate away from the page. What needs to be on the screen before users start scrolling? Let’s take a look.

Layouts / 8 Dec 2015

Grid-First Design: How to Create Vertical Rhythm and Harmony

When you hear grid, what’s the first thing that comes to mind? For most designers, it is often a horizontal based concept with columns across the canvas. This is especially true when thinking about web and digital design projects.

But what about vertical grids? It is just as important to create flow up and down the page as well. And there are a number of ways to do this with grid systems.

Inspiration / 14 Sep 2015

Website Navigation Trends: 10 Tips & Examples

By now the term “hamburger menu” is something we are all familiar with. Love it or hate it, this little element has been one of the bigger trends in website navigation design this year.

But it is not the only big change that’s been happening when it comes to how we design navigation patterns and elements. From super small navigation – such as the hamburger – to oversized navigation options, providing users with a clear and easy path to information should be a top concern for designers.

Layouts / 10 Sep 2015

Infinite Scrolling: Pros and Cons

One-page websites are a major design trend. Especially when it comes to one-page designs packed with content, thanks to infinite scrolling techniques that allow designers to continue a webpage indefinitely.

This technique is great for some sites and content types, while for others it can be cumbersome and frustrating. Like any other design technique, you shouldn’t do it just because you want to try something new; it should be a strategic part of your design framework. So how can you decide? Let’s take a look at the pros and cons of infinite scrolling websites.

Accessibility / 5 Jan 2015

Designing for the Interstitial Experience

Yes. Those little pop-ups matter, and are starting to matter more every day. Interstitial space – and content for it – is becoming an increasingly popular part of designing for the web. From ads, to forms, to bits of information, the interstitial experience is a vital part of the design process.

The dilemma for designers is to create something that users want to look at and not feel annoyed by. Here we’ll work to gain a better understanding of interstitial space and how you can work within it well.

JavaScript / 4 Sep 2013

Code a Single-Page Sliding Website Layout With Fixed Navigation

When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding navigation to quickly advance along the page.

In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.

CSS / 3 Jul 2013

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

Typically web developers have been using JavaScript to create dynamic page animations. Hidden menus and subnavigation are just a couple examples for how these techniques would be used on a live website. Thanks to the addition of CSS3 transitions we can now mimic these animations, with no JavaScript in sight.

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.