Design Archives

American Sex Education App Display Banner

Creative / Development Inspiration 61

4th February 20194th February 2019 Robert Marshall Leave a comment

Website Inspiration

Adult Swim – Singles

https://www.adultswim.com/music/singles-2018/

Designer Resources, Examples and Inspiration

Inclusiveness in Web Design

Not a week goes by when I don’t hear “But this website doesn’t need to be accessible, thats not the target market”. So you are happy to lose a potential 19% of revenue for the client? That’s a big decision to make in 30 seconds.

https://thoughtsandstuff.com/the-inclusive-web-why-it-should-matter-to-businesses/

A comprehensive guide to designing UX buttons

How can a button do the best that it can do? What are the rules behind sizes, user flow, colour? Its all here.

https://www.invisionapp.com/inside-design/comprehensive-guide-designing-ux-buttons/

New VR sketching tool looks to make product design “quicker and more efficient”

Gravity Sketch enables designers to create 3D virtual models in mid-air using a virtual reality headset and handheld controllers, cutting out the need for 2D sketches.

https://www.designweek.co.uk/issues/31-july-6-august-2017/new-vr-sketching-tool-looks-make-product-design-quicker-efficient/

Development Snippets, Samples, and Articles

Matter

Material components – Pure CSS

https://github.com/finnhvman/matter

Flexbox Ninja

Case studies for all those standard layouts you always wanted to do!

https://flexbox.ninja/

A bit of everything

Gamifying one of America’s “touchier” subjects — a UX case study

Less than half of U.S. states require sex education in some form. How could this gap be filled? (pun intended)

https://uxdesign.cc/gamifying-one-of-americas-touchier-subjects-a-ux-case-study-8102017185d7

Why we should give up adding pictures to personas — the case, when empathising goes wrong

User personas help massively in telling the user story. They help get buy in from the team and client, as well as understanding the user. But what happens when you add too much information?

https://uxdesign.cc/why-we-should-give-up-adding-pictures-to-personas-the-case-when-empathising-goes-wrong-6c0c8c50fce0

What Parralax Lacks

Parallax-scrolling effects add visual interest, but they often create usability issues, such as content that is slow to load or hard to read. Consider if the benefits are worth the cost.

https://www.nngroup.com/articles/parallax-usability/

Creative / Development Inspiration 59

21st January 201921st January 2019 Robert Marshall Leave a comment

Due to conversations about processes, this week I have included several articles on UX process, and how to write User Stories. These articles go hand in hand with slowing down the design process! As well as these goodies, there is a great website example, an article on web performance ethics, and more in this weeks design and development inspiration rundown!

Enjoy!

Website Inspiration

Bureau

Website to sell office furniture. Sleek, minimum. To the point.

https://www.bureauwork.com/

Designer Resources, Examples and Inspiration

Velocity

A dashboard UI kit with robust design system. A great example of a fully fledged UI.

https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit

What is Your UX Process?

A lot of talk at the moment about proper web process. Here is a flow that works.

https://uxdesign.cc/what-is-your-ux-process-2fa146eb8380

The Case for Slowing Down the Design Process

It seems like rushing around in an effort to finish off projects is part of being a designer. The faster it get done, the faster we (hopefully) get paid for our efforts. What about slowing down? Maybe we could get more money?

https://speckyboy.com/slowing-down-design-process/

Development Snippets, Samples, and Articles

Static Site Boilerplate

A better workflow for building modern static websites. Automated build processes, a local development server, production minification and optimizations, and the latest standards for static websites.

http://staticsiteboilerplate.com

The Ethics of Web Performance

Poor performance can, and does, lead to exclusion. This point is extremely well documented by now, but warrants repeating. Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out

https://timkadlec.com/remembers/2019-01-09-the-ethics-of-performance/

Percy

An all in one visual review platform. A massive time saver! Automated and everything…

https://percy.io/

A bit of everything

Writing Copy for Landing Page

Stripe talks through how to write landing page copy that delights visitors and converts customers.

https://stripe.com/atlas/guides/landing-page-copy

LiveFile

Interactive presentations for remote audiences.

https://livefile.io/

Practical Tips for User Journey Mapping

The User Journey Map is a fundamental part of every product or service design process. This article covers practical guides that will help you get the most from experience mapping.

https://phase.com/magazine/user-journey-map/

Creative / Development Inspiration 58

14th January 201914th January 2019 Robert Marshall Leave a comment

New year happened. and then Christmas happened. And then I went away for jolly. Enough time to break a habit.

Not a chance.

This weeks design and developer inspiration rundown has even more of the good stuff. Want to know more about accessibility? Check. How about the newest CMSs on the scene? I got you. Enjoy!

Website Inspiration

Beauregard

Beautiful beautiful website. Smooth movement, great imagery and subtle copy. Only one issue… it auto-plays music you cannot turn off. Are they being serious?!

https://www.beauregard.ch/

Designer Resources, Examples and Inspiration

Designing for Accessibility is not that hard

Seven easy-to-implement guidelines to design a more accessible web

https://www.invisionapp.com/inside-design/designing-accessibility-not-hard/

Merge

Build one component, apply everywhere. Keep an eye on this. It could be big. Making web dev smoother and faster.

https://www.uxpin.com/merge

The dilemma of designers’ empathy delusions

Taking a bit of a reality check on how empathetic you really are and for whom can help make you a more effective designer, not just an idealistic one.

https://medium.com/shapingdesign/the-dilemma-of-designers-empathy-delusions-a61f0663deaf

Development Snippets, Samples, and Articles

Remove Image Background

Using AI and come clever code, this website (it has an API) removes an images background in 5 seconds. So much potential for apps…

https://www.remove.bg/

Destyle

Think normalise.css. Think reset.css. But think better.

https://github.com/nicolas-cusan/destyle.css

Twill

Slim, sleek and sexy new CMS built on Laravel. Open Source and flexible. Will be trying this one out for size.

https://twill.io/

Jigsaw

Another static site. This one seems cleaner and easier to set up though? Ill let you be the judge.

https://jigsaw.tighten.co/

A bit of everything

The Rise of the Content Mesh

Use best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box. Enter the content mesh!

https://thoughtsandstuff.com/the-rise-of-the-content-mesh/

Story Mapping, Visual Way of Building Product Backlog

Story mapping is a top-down approach of requirement gathering and is represented as a tree. Story mapping starts from an overarching vision. A vision is achieved via goals. Goals are reached by completing activities. And to complete an activity, users needs to perform tasks. And these tasks can be transformed into user stories for software development.

https://www.thoughtworks.com/insights/blog/story-mapping-visual-way-building-product-backlog

Are Your Analytics Lying?

Most people are not ready to convert right away and you shouldn’t expect them to do so anyway…

Basically I’m saying you need to focus on long term conversion strategies too!

https://www.cortes.design/post/saas-marketing-myth-analytics

Milanote

Capture your teams ideas, all in one place.

https://milanote.com/

Screen Guru

Take a screenshot of any website. Easily.

https://screen.guru/

Spotify Design

Spotifys very own blog section of design. Well worth a scroll through!

https://spotify.design/

Creative / Development Inspiration 56

10th December 201810th December 2018 Robert Marshall Leave a comment

Are you able to be the villain? What about if the product you are making has potential to harm? Also, on a more positive note. Here are some great examples of design systems, the state of UX in 2019, and more! Enjoy!

Designer Resources, Examples and Inspiration

Stop Showing Design Options and Commit

Normally create 20 different versions and let the client pick? But you are the expert, no?

https://medium.com/slite/stop-showing-design-options-and-commit-595d80bdb4aa

The State of UX in 2019

We have seen quite a lot this year. Here’s what to expect for UX in 2019.

https://trends.uxdesign.cc/

Humaaans

Mix and match illustrations of people with a design library. Definitely bookmark this!

https://www.humaaans.com/

A UX Guide For Designing Error Pages

404’s & maintenance pages. Use this checklist before you get started.

https://blog.prototypr.io/a-ux-guide-for-designing-error-pages-fb9ced1f1c8a

Development Snippets, Samples, and Articles

Why You Shouldn’t Split Test During an eCommerce Redesign

Comparing the performance of the old and new site isn’t as useful as other exercises during the redesign process you can run. Don’t split test this!

https://www.goinflow.com/ecommerce-redesign-best-practices/

Awesome Design Systems

A collection of design systems, some open source. All the way from Audi, to Cloudflare. Some great examples.

https://github.com/alexpate/awesome-design-systems

React Create

Simple library to create component templates for React and React native projects.

https://github.com/obiwankenoobi/create

Tiny Details: A Look at Hamburger Menu Reveal Transitions

Examples of the hamburger menu done well, and also not so well. A few nice takes here.

https://speckyboy.com/hamburger-menu-reveal-transitions/

A bit of everything

Be the Villain

They’re not going to be fun conversations. It’s not going to be easy convincing others that these aren’t paranoid delusions best tucked out of sight in the darkest, dustiest corner of the backlog. Realistically, talking about it may even harm your career.

https://24ways.org/2018/be-the-villain/

8 Lessons from Creating a Design System

Mono created a design system. Here is what they learnt along the way!

https://mono.company/design-systems/eight-lessons-from-creating-a-design-system/

Raindrop.io

Think bookmarks, but your your team. Build collections of assets, or working on a new job that needs inspiration. Raindrop makes it simple.

https://raindrop.io/

Creative / Development Inspiration 54

25th November 201825th November 2018 Robert Marshall Leave a comment

This week is a little more focused on UI design and development. And god damn they are pretty. Its all about those micro-interactions. On top of this, there are articles on Just In Time Design (it rhymes right!) and User Empowerment. Plus so much more! Enjoy this weeks design and development inspiration rundown!

Website Inspiration

BornFight

A digital agency that has been building websites and apps since 2009. Considering they have been doing it this long, I would have hoped the site would load slightly faster. However, it looks really good on desktop!

https://www.bornfight.com/

Designer Resources, Examples and Inspiration

Design Dots

Another design and dev article curator. But this one is so much nicer. Build on Webflow, the auther only adds 5 pieces of content a day. Each from a different sector. Well worth a look.

https://www.designdots.co/

UI UX Interaction Design Week 16

A collection of UI and UX interfaces. Some great examples of websites done right.

http://gillde.com/ui-ux-interaction-design-week-16/

Building Your Colour Palette

An article on how to build a website colour palette. Well written, helps get the job done.

https://refactoringui.com/previews/building-your-color-palette/

User Empowerment Through Design

It’s not just about creating stunning visuals anymore, users are seeking whole experiences that make them feel more powerful and complete.

https://www.imaginarycloud.com/blog/empowerment-through-design/

The UX of Registration and Login

Two of the biggest barriers to entry. Registration and Login. If not designed right can lose a lot of users.

https://www.twotalltotems.com/blog/index.php/2017/12/20/the-ux-of-registration-and-login/

Mobbin

A collection of hand picked mobile design patterns that reflect the best in design. A definite bookmark.

https://mobbin.design/

Gestalt-Driven UX: The Patterns That Drive Our World

Gestaltism is a holistic philosophy that studies how humans recognize patterns and simplify complex, disparate information.

https://hackernoon.com/design-psychology-gestalt-driven-ux-64ac01cd257a

Development Snippets, Samples, and Articles

Feather

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability. Only loads the ones you need.

https://github.com/feathericons/feather

autoComplete

autoComplete.js is a simple pure vanilla Javascript library that’s built for speed, high versatility and seamless integration with wide range of projects & systems.

https://github.com/TarekRaafat/autoComplete.js

A bit of everything

Just In Time Design

Continuously delivering small iterations based on the team’s needs can transform the product development process. This approach shifts the focus away from highly-produced, out-of-date, difficult-to-maintain design, opening up the process to tighter collaboration and a higher standard of quality.

https://matthewstrom.com/writing/just-in-time-design.html

No I Don’t Want To Take Your Survey

In our industry surveys help with understanding the end user. The issue is how companies go about getting the information. Sometimes a survey on a website that interupts the user experience just isn’t the best way!

http://gerrymcgovern.com/no-i-dont-want-to-take-your-survey/

HolaBrief

Very few projects end up with exceptional results. HolaBrief makes it easy to ask all the right questions and nail your design brief every time. Built by designers, for designers.

https://www.holabrief.com/

Creative / Development Inspiration 52

12th November 201812th November 2018 Robert Marshall Leave a comment

Website Inspiration

Puree Maison

Although the designers have not considered usability at all, it is a good site to show the different animations and reveals that can be used across a website. Some brilliant hover states over images, and gentle fades on scroll.

https://pureemaison.com/en

Designer Resources, Examples and Inspiration

Palx

The last few week have been good for colour generators. Here is another brilliantly simple colour palette generator to sit in your bookmarks.

https://palx.jxnblk.com/

40 Orange Website Designs

Creative Overflow have pulled together 40 websites that are based on the colour orange. Some modern, some dated, but all good examples.

http://creativeoverflow.net/40-orange-website-designs-to-inspire-your-next-project/

Three Web Design Tools To Speed Up Things

While looking for tools to unify web designs and developers I came across three really interesting web apps. One not yet out yet. One that have been the block a few times, and the other new on the scene.

Webflow

Give you the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

https://webflow.com/

Hadron

Hadron is a development environment for designers and developers who work together towards the same goal, moving ideas forward and learning from each other along the way.

https://hadron.app/

Bondlayer

Bondlayer empowers web designers to craft native apps and responsive websites. Without coding or template restrictions.

https://www.bondlayer.com/

Development Snippets, Samples, and Articles

Spectre

A new lightweight modern CSS framework. It is under 10kb gzipped, responsive and uses modern elements and components.

https://picturepan2.github.io/spectre/

Markdown to JSX

A lightweight customizable component for Markdown within React

https://github.com/probablyup/markdown-to-jsx

Playroom

A simple design environment that allows you to simultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library. Create quick mock-ups and share the work simply.

https://github.com/seek-oss/playroom

An Annotated Webpack 4 Config for Frontend Web Development

As web development becomes more complex, we need tooling to help us build modern websites. Here’s a complete real-world production example of a sophisticated webpack 4 config

https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development

‘Atomic’ font size management with Sass

Atomic sizing with Sass should make styling fonts easier. It moves away from styling font elements like H1s, and focuses on specific classes.

https://iamsteve.me/blog/entry/atomic-font-size-management-with-sass

A bit of everything

Kill Your Personas

How persona spectrum’s help push real user needs.

https://medium.com/microsoft-design/kill-your-personas-1c332d4908cc?

We Do People Leave Your Website? Undecided Explorers

Trying to improve conversion rates? Maybe take a look at users that do convert… You may need to tailor.

https://www.hotjar.com/blog/why-people-leave-your-website

User Research? But Why?

If your job has anything to do with design, there is a good chance that you would have experienced the need to do some form of user research. If you happen to work with or for a group of people who have limited understanding of the design process, then you must have had your moments of frustration. This article helps answer these questions.

https://uxdesign.cc/user-research-but-why-2d399182637b

Meta Tags

A great tool to mock up Meta Tag views across social media platforms, as well as a teaching tool for those who are not in the loop.

https://metatags.io/

Netflix Web Performance Case Study

There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care. Netflix breaks down the process in this case study.

https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

Creative / Development Inspiration 48

15th October 201815th October 2018 Robert Marshall 1 Comment

A focus on design systems this week, with a brilliant piece on Ubers rebrand, website inspiration, and micro nudges. Plus a few more in this weeks design development inspiration rundown.

Website Inspiration

Mawla – Mobile & Web Development Studio

Firstly, I love these bobble shapes used across the Mawla site. That, combined with the pastel colours makes it friendly, and welcoming. Lots of white space between sections allows the user to fully digest each point. And it works well on mobile!

https://mawla.io/

Designer Resources, Examples and Inspiration

Uber’s Undoing Part I: Whipping Boy

Uber has been through so many re-brands, they don’t seem to know who they are any more. Eli pulls apart the company, and looks at the way their re-brands have seemingly had no grounding.

http://www.elischiff.com/blog/2018/10/10/ubers-undoing-part-i-whipping-boy

A Guide to Colour Accessibility in Product Design

Accessibility is getting a lot of traction now, with more designers and developers trying to get the upper-hand. With that in mind, have you ever thought about colour accessibility?

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

Micro nudge: a micro animation for behavioural change

A micro nudge is a well-timed small animation that prompts a user to complete a small task. This article includes examples from Instagram, and walks us through the process.

https://uxplanet.org/micro-nudge-a-micro-animation-for-behavioral-change-dd15ecd4fab3

Development Snippets, Samples, and Articles

Building an Image Generator for the Number 1 Track on Spotify

DJ Snake, Cardi B, Selena Gomez, and Ozuna have released their new song, Taki Taki, into the world and it has quickly soared to #1 on Spotify’s Global Top 50. Lee Martin was asked to create a marketing concept. This is what he came up with.

https://medium.com/@leemartin/taki-taki-eb45d03a8fb1

Cross Browser Testing Cloud

LambaTest allows you to test your website or application across 2000+ browsers and operating systems.

https://www.lambdatest.com/home

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles…with an accessibility twist. A well build, well documented style library.

http://a11y-style-guide.com/style-guide/

A Collection of Design System Articles

I have recently become interested in design systems. The concept makes complete sense, allowing all stakeholders to understand the brand – as well as making future design much faster!

Designing Design Systems

Clearlefts Jerlyn walks through the process of designing a design system, and how they run workshops to encourage stack holders to work through pain points.

https://clearleft.com/posts/designing-design-systems

Design Systems and Agility

A piece extended from a talk at UX Australia on design systems and their importance. Who do they serve? What is the point?

https://medium.com/interactive-mind/design-systems-and-agility-part-1-of-2-b96c188acfca

Understanding Design Systems and Patterns

The concept of design systems is not new to creative industries, but it has only recently been picked up by the digital side. This article breaks down what a design system is, and can be.

https://www.toptal.com/designers/ux/design-system

A bit of everything

You can’t do human-first design without looking after your humans.

Our industry has a poor reputation of burn-out, long hours and stress. How can you keep moral high in the office?

https://perspective.despark.com/you-cant-do-human-first-design-without-looking-after-your-humans-726a0074834f

Creative / Development Inspiration 47

7th October 20187th October 2018 Robert Marshall Leave a comment

12 articles to help inspire you from last week. This website design and development inspiration has some great pieces on UX, a few website examples, and some more code snippets.

Have you ever considered that web performance goes hand in hand with UX, or why you should definitely user test. Well I have some thought piece for you!

Website Inspiration

Torch App

A simple site that works well on desktop and mobile. An interesting product as well. Love a bit of AR.

https://www.torch.app/

Poor Millennials

An article by Huffington post that walks you through the issues millennials have, using modern website techniques. Good work. Interesting read.

https://highline.huffingtonpost.com/articles/en/poor-millennials/

Designer Resources, Examples and Inspiration

The product design tool for the day after launch

Site has gone live, but you have seen tweaks are needed. No need to write each one down and send to the developer. With this extension you can make the changes in the console and send with comments. Cannot believe its taken this long!

https://mod-dot.com/teaser/

Microcopy Inspirations

All those pages (like 404) that you don’t know how to style, or what copy to use. Well here you are.

https://www.microcopyinspirations.com/

Icondrop

One place for all your icons – easily used, easily passed on to the next user.

http://icondrop.io/

Understanding Design Systems

While it may seem like a new way of approaching digital workflow, the concept of a design system is not “new” to creative industries. At the core of any design system is a language of design patterns that solve common problems a designer might face.

https://www.toptal.com/designers/ux/design-system

Development Snippets, Samples, and Articles

When to use target_blank

Chris Coyier breaks down when you should, and shouldn’t use target_blank.

https://css-tricks.com/use-target_blank/

Random Colour Harmonies

Last week I showed you how Lyft had created a colour palette generator. Well here is another one!

https://codepen.io/meodai/full/RerqjG/

Google Maps stopped working? This could be why…

Google recently updated their billing model, and changed the way the APIs were set up. Here I outline how to sort that.

http://thoughtsandstuff.com/google-maps-not-working-with-api/

A bit of everything

Breaking the Deadlock Between User Experience and Developer Experience

We cannot talk about user experience, without also including performance. This article opens this issue up. Very interesting read.

https://alistapart.com/article/breaking-the-deadlock-between-user-experience-and-developer-experience

Getting to Yes — Convincing Stakeholders to Invest in User Testing

Those who understand the importance of UX know that design-centric companies have a higher ROI so including user testing in a design project comes as a no-brainer. On the contrary, unfamiliarity with its potential benefits means that many product owners don’t consider testing in the first place.

https://blog.maze.design/stakeholders-user-testing/

No Conversions? Here are 4 Reasons that Might Help

Getting users to convert can be a tricky one. This article highlights for places where your website might be falling down, and how to fix it.

https://www.cortes.design/post/some-traffic-but-no-conversions-here-are-4-reasons-your-page-is-not-converting-any-why

Creative / Development Inspiration 46

29th September 201830th September 2018 Robert Marshall Leave a comment

So much has happened this week in web! Here is a great overview on UX animation, Lyft has created a colour palette tool. A brilliant article on why select boxes might not be the best option for users, and what to do with user mistake? All this and more on this weeks website design rundown.

Website Inspiration

Tubik Studio

A digital design agency based in Ukraine, this website is so smooth. The animation of information entering the page, as well as the use of 3D animation on the home banner made me a massive fan. Easy to find information laid out effectively.

https://tubikstudio.com/

Stripe

This is a well known company, but god damn I love this website. Designed so that the user can get to where they need, as quickly as possible, and so pretty at the same time! Subtle animations across the website add that little bit extra.

https://stripe.com

Designer Resources, Examples and Inspiration

The Ultimate Guide to Proper Use of Animation in UX

The main principles and rules for animation in UX, laid out in a single succinct article.

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Color Box

A tool designed by Lyft, to help select a colour range from two colours. Pick the way the colours are picked, and output the HEX codes.

https://www.colorbox.io/

User Experience: How to Design Onboarding for Your Mobile App

How to create an attractive, and effective onboarding process for your mobile app. It’s a pretty article as well!

https://icons8.com/articles/ux-design-onboarding-mobile-app/

Development Snippets, Samples, and Articles

Yubaba – React Element to Element Animator

A easy to use React package to animate between elements.

https://github.com/madou/yubaba

Stop Using Select Menus for Known User Input

If a user knows what option they want from the select input, maybe you shouldn’t use a select input…

http://uxmovement.com/forms/stop-using-select-menus-for-known-user-input/

Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

https://www.vapid.com/

A bit of everything

Using Lorem Ipsum? Don’t! Just do this instead

“Eating our own Dogfood” is now a commonplace phrase and philosophy for using the products you create so you can better experience those same products through the eyes of a real consumer. Stop using fake content, and your designs might just get better!

https://medium.com/the-set-list/lorem-ipsum-generator-skip-it-do-this-instead-944124e754dc

What is the Design Sprint?

There are many different methodologies that help designers be more productive and efficient. One of the most popular frameworks that’s heavily focused on teamwork and collaboration with the client is the Design Sprint.

https://phase.com/magazine/whats-the-design-sprint-2-0/

6 Ways to Speed up Slow Clients

Frustrated with your client? Beginning to wish you’d never taken this job on in the first place? Do you just need some feedback so that you can move forward?

https://www.webdesignerdepot.com/2018/09/6-ways-to-speed-up-slow-clients/

What To Do With User Mistakes

How should you manage user mistakes? This article covers the common practices and points you in the right direction

https://uxdesign.cc/what-to-do-with-user-mistakes-305d084ae1f9

To Sticky or Not to Sticky

18th September 201823rd September 2018 Robert Marshall 10 Comments

Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?

Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?

Excited? I know right.

I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉

A sticky menu is quicker to navigate

https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

Pro

Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.

Con

However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?

Top 5 Common UX Mistakes

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

Pros

There are benefits, but only when considered correctly.

Cons

If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.

The Pros and Cos of Fixed Header Bars

http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/

Pros

They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.

Con

If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.

Summary

Users seem to prefer fixed headers, but only if they are implemented correctly.

The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.

When being used on very small devices, headers need to be hidden to provide a larger content space.

The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.