Okay, I promise that this won’t be yet another rant extolling the virtues of minimalism, and websites that are hard to break. I mean, I prefer them. I always will. However, I am coming to realize that we minimalism-loving designers are outnumbered by designers who like to make things move around the screen (excessively), and the customers who hire them to do it.
you can make your websites all kinds of fancy, while still making sure they don’t suck
Just look at any of my portfolio review articles. Fancy, “flashy” websites are here to stay, and they’re going to eat our data plans alive. You blew it up! Goddamn you a… okay, that’s out of my system.
All hope is not lost, however. Best practices are still a thing. There are still ways you can make your websites all kinds of fancy, while still making sure they don’t suck. Here are some basic tips for making sure your dynamic, power-point-style, parallax extravaganza still converts users instead of frustrating them:
1. Use Moderation
Fancy effects stand out more when they’re not everywhere. When everything is animated, then animated stuff isn’t all that special, is it? Try to limit the number of elements on your page that get hit with the innovation stick. If that’s not an option, make elements that users have to interact with fancier and flashier than other elements. Use more subtle animation for hero images, and especially for anything in the background.
Limiting the number of things you animate or otherwise make fancy will drastically decrease the amount of time spent optimizing your site for speed. It can also drastically reduce the cognitive load on your user’s brains, as they spend less time figuring out what they can or can’t tap on.
2. Navigation Should Never Be Too Fancy
It’s frustrating to do the same thing over and over. Navigation patterns all tend to look the same, even more than other website elements. It can feel like there’s no innovation. It can be tempting to go wild with new ideas for website navigation.
You might enjoy creating new design patterns; but users do not like learning them
Here’s the problem: you still need to make sure every user can find exactly what they’re looking for, as quickly as possible. The more unfamiliar your navigation becomes, the harder it is for users to find what they want. You might enjoy creating new design patterns; but users do not like learning them. This is triply true if they’re in a hurry.
Make everything else on the site as wild as you want. Go nuts! But navigation should always be the easiest thing on your site.
3. Make a Fallback For Everything
Let’s take it further: Your site should ideally be functional even if the CSS doesn’t load. Yes, it’s an old argument; but is it really any less valid for its age? The job of any good designer or developer is to make sure their client’s site is usable under the widest possible range of conditions.
So yeah… fallbacks. Learn to love them.
4. Optimize For Speed
Okay, I know I’ve been over this before, but the more fancy schmancy stuff you put into a site, the more important speed becomes. It’s really bad enough that people are using pre-loaders on websites again. Once everything is loaded, everything should run fast.
Forget the classic examples of low-end phones and old desktops. There are Chromebooks being sold even now with only two gigabytes of RAM. 2GB. That’s it. For an OS based on Chrome, one of the world’s most notorious RAM hogs. Even Android phones with only two gigabytes are starting to feel slow and sluggish. Running a laptop on similar specs is basically lunacy.
But it’s still your job to make sure your site loads and runs reasonably fast on those weird, sad little laptops. Your Chromebook-loving users aren’t going to give you a free pass if the site you build doesn’t work for them.
5. Don’t Skip User Testing
You’ve thought outside the box. You’ve broken the mold. You’ve made something new and unique. Look at you go! Now test it… with people. The more fancy and outlandish your design, the more it needs to be tested on regular people, especially those outside the design industry. Even if your site is targeted directly to designers and no one else, designers are busy people. Busy people don’t have time to learn a whole new way of browsing.
The only reason I don’t tend to like showy websites with lots of extras is because every extra feature is another chance for your site to break. That’s it. That’s the only reason. I have seen far too many that basically leave the user with a blank home page if anything goes wrong at all.
It doesn’t have to be like that. Your site can be as robust as it is pretty, dynamic, and innovative. It’s just gonna take some extra work. That work is worth it.
The online world is dynamic and constantly evolving. One method holds the high ground today only to lose it tomorrow. But in spite of this volatile nature, one thing remains the sine qua non of online success: Content.
However, the question remains whether there’s a type of web content which is one-size-fits-all.
The short answer is no.
Big brands beat online competition by churning out high-quality content—well-knitted text and visuals in the form of blog posts—as a tool for lead generation. Doing this, they know that using a one-way approach to content creation in today’s age of big data and visual culture will take them nowhere.
Let’s face it, designer-copywriter collaboration is a great idea every freelancer or solopreneur operating in the digital marketing world should consider, for creating good web content.
Here’s a thumbnail analysis of why, and the benefits of going down that road.
All-in-one Content Offers Greater Value
Because the Internet is jam-packed, attention is perhaps the most expensive thing online. According to Jakob Nielsen, an average web visitor is likely to read only 20-28% of a blog post. The only power to extend the duration lies in truly compelling content.
And what is that? Any beautifully crafted article that’s saturated with high-value, attention-grabbing images and visuals.
But if you’ve never tried this before, you might doubt its efficiency. Luckily for you, experts say that articles with images get 94% more total views than text-only posts. And there’s more: infographics deliver up to 120-180% more engagement thereby increasing viewers’ retention, engagement and, ultimately, sales.
What makes the above possible is the extraordinary power of visual content in making a digestible illustration of textual messages. Indeed, “a picture is worth a thousand words.”
It’s not only about illustration, however. Readers retain 65% of any information three days later, when communicated through visuals.
Text-Visual Content is Brain Friendly
One of the top reasons why brands go blogging is to provide sufficient insights, thus making it easier for prospects to comprehend how their products and services work. Simply put, the method yields well, as 37% of marketers say visuals are essential form of content.
We [human beings] are incredible at remembering pictures. Hear a piece of information, and three days later you’ll remember 10% of it. Add a picture and you’ll remember 65%.
It’s clear: web visitors do not struggle to remember details when they’re given all-inclusive memorable content.
SEO, SEO, SEO
Visual content is just so amazing. Going from merely adding glamour to a blog post, to creating other essential values, visuals can boost webpage ranks on search engines when seamlessly integrated into a body of valuable text.
If SEO were key to content marketing success, creating all-inclusive content is a task that you cannot ignore – and that’s easier done through collaborative efforts, both from SEO and ROI perspectives.
Why Collaboration Matters
The significance of having the right visuals alongside written content has become more evident. However, choosing the wrong content is as disadvantageous as having none. If you find yourself falling victim to such issues, or copyright infringement, it’s probably time to partner with an expert designer and up the game like a pro.
When graphic artists and copywriters work together, they can both flourish. Part of the reason is that design connects directly with the side of the brain that is responsible for creative thinking, image recognition and such like, while writing occupies the other side that handles logic and critical thinking.
For any content to hook prospects and compel immediate action, these forces must come together. And to get the best results designers and copywriters should not transfer works, but handle it side-by-side.
There’s a plethora of them, but following are the key benefits of copywriter-designer collaborations:
Unlocking New Ideas
According to William and Phyllis Mack of the Mack Institute for Innovation Management, choosing the right partners is the first step to successful innovation:
In today’s globalized business environment, firms are no longer developing innovations in a vacuum. Instead, companies often work with partners from all over the world to develop innovative strategies and products.
Are innovative ideas important to copywriters and designers? There’s no other answer than yes, and experience has shown that more ideas emerge when these sets of creatives work together.
Enabling Premium Service / Increased Authority
To deliver excellent service and drive better bottom line results for all parties, you probably know already that you cannot thrive in isolation as a copywriter or designer. You must collaborate!
Sara Duane-Gladden of Specky Boy says:
The jobs of copywriters and designers are very similar. They are both masters of their crafts. They express complex concepts and ideas in bite-sized bits that convey meaning in a moment. The fact that one does all this with words while the other accomplishes it with images isn’t important: They are kindred, creative spirits that can amplify their abilities when they work together.
So if you do not want to keep going back and forth, but rather accelerate quality service and build more authority, you should collaborate.
Reducing the Burden
As a copywriter with a long list of deadlines, you’re always on the search for an expert designer to turn some text into visuals. Found one, you’re still not off the hook. You keep reviewing because only an impeccable job would satisfy your clients and win you more referrals. On the other hand, a designer goes through a similar situation each time there’s a need to come up with a masterpiece that would complement an infographic or other visuals.
The process can be time-consuming and difficult. With collaboration, however, it can be lessened and streamlined. In fact, a teamwork approach will enhance efficiency on both sides.
Growing from Solopreneur Status to an Agency
Successful collaboration offers a chance for freelancers to move to the next level of establishing an agency.
A freelance copywriter with a web design expert needs only a person who offers technical SEO. Why not add that, combine all the skills, start an agency, get more clients and charge more?
Designers and copywriters are important personalities in the world of digital business. Media and SEO companies, PR organizations, marketing and advertising agencies, all need them to meet their bottom line.
If you’re one, not only can you generate new ideas through efficient collaboration, you can also increase the quality of your service, minimize the hassles, and expand your business.
Are you looking to create an eCommerce store with WooCommerce? If so, you’re making a great decision! But you might need help getting started with the nitty-gritty details of actually installing and configuring a working WooCommerce store. If that sounds like you – then you’re the perfect person to be reading this WooCommerce tutorial. I’ll cover everything that you need…. Continue Reading
The post WooCommerce Tutorial: Everything You Need To Launch A Store is written by Colin Newcomer and appeared first on WPKube.
This is the 4th part of The Ultimate UX Design Guide to SaaS Customer On-Boarding.
SaaS Customer On-boarding is the process that users have to experience while initiating their journey on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience.
Long story short, special emphasis should be given to making the on-boarding process as flawless as possible.
The SaaS customer on-boarding process is based on 6 comprehensive aspects, the first three of which we’ve already covered:
- Sign up Form
- Welcome Email
- Drip Campaigns
- First Login & Product Tutorial
- Data Import & Notifications
- Check up calls & Swag
All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process.
Today we will be focusing on First Login & Product Tutorial.
I cannot stress the importance of crafting a first login experience to delight your customer enough. The first login experience is where you should be looking if you want your churn rate to go down.
Rules of Thumb:
- Do not present your user with a UI that is empty. You need to keep that in mind because with a SaaS product that is B2B oriented, the user isn’t going to have everything in front of him from the beginning. Services requiring extant data to function will need that step to be performed after first login.
- Give clear directions to users for what they should be doing first. They are completely new to the interface so they would need a nod in the direction of the first step.
- They have gotten to this point—it would be great to thank them again and tell them of how cool it’s going to be, once they have set up everything.
The first log-in screen at Mention is a great example of this. The dashboard is not empty, there are immediate options with simple captions that you can explore and there’s a very clear CTA at the end, which directs you to create your first alert.
An initial tutorial can be a great way to start building a rapport with your customer, now that you’ve gotten your first login. Depending on how you design your tutorial, you can quickly familiarise them with the interface of your app so that they can get down to using it.
Rules of Thumb:
- Users have to be able to skip it. Going through a tutorial that cannot be skipped can really turnoff your user. If they don’t want to see it just yet, they should have the choice of opting out.
- It should always be something that users can revisit. It is very common to skip any pop up or notification upon logging in for the first time; users just want to start getting their hands dirty. Just ensure that it can be easily located.
These are some guiding principles that you should keep in mind when designing your first log-in page and product tutorial(s).
Making the Experience an Improvement
A famous programmer called Kathy Sierra says that the app should be able to make its users amazing at something within the initial five minutes of using that app. Ultimately the user should be taking an action that causes a result relevant to your business. Try to generate an experience that would be bound to bring the user back.
You want to establish a relationship with the user that is of mutual benefit to both of you. That happens when you begin to communicate with them frequently and that too in the initial stages. The product tutorial is one of the easiest ways to establish that channel of communication. Ideally a product tutorial should accomplish:
- Basic Guidance on how to use the software
- Allow the user to do something really cool
- Do this within as limited a time frame as 1-2 minutes
One of the best examples of this is Canva.
1. The sign up is simplicity itself. You can create an account by just giving your email address or use a social media sign in (Recall our discussion on Sign Up Flows)
2. Decide what you want to start doing. There’s a general orientation that you can select at the beginning that will affect the images in Canva’s database that you will get to see initially.
3. The guide starts. How long will it take? 23 seconds. As soon as you click “Show me how it’s done”, a tutorial will guide you through the simple drag and drop process of selecting an image and modifying it. As mentioned above, the defaults are “intelligent” ones. A graphic is created for you and then you’re invited to give it a try.
4. The interface is colourful, engaging and very easy to use. You’re immediately looking at the Beginner’s Challenge, which attracts the user even more.
5. Finally, you get to do something fun, like selecting a hat that you drag onto a monkey’s head! The whole process takes under a minute, and you’ve already mastered the basics of using Canva.
Within 23 seconds, Canva manages to capture the attention of its users. The interface is intuitive. The tutorial is simplicity itself as it shows the process of dragging and dropping images from its database, adding the relevant headings and downloading the image. It then gets the user to do the same. It’s light hearted as well as it gets you to put a hat on a monkey!
You can analyse the effectiveness of your first sign in and product tutorial. The sign in and product tutorial can be grouped into an experience called the first run experience. The series of steps that need to be taken can be defined and then you can do something called funnel analytics to evaluate the effectiveness of the experience. Tools I would recommend in order to build and measure your funnel are Mixpanel or Amplitude. The idea of funnel is that many users enter the beginning of the user experience and a few come out at the end.
Measure user progress through the experience by observing the completion rates for each step.
So usually, you’ll get rates of completion that look something like this:
- Step 1: 1,773 people
- Step 2: 1,701 people
- Step 3: 1,399 people
- Step 4: 1,211 people
- Step 5: 1,152 people
Now it’s between Step 2 and 3 that a lot of people opted out of the user experience, which indicates that that’s the area where you should focus.
In this way you can refine your first login experience so that it retains the most users.
All three of this month’s essential design trends have to do with typography. And the trends showcase some pretty stellar ways to use beautiful type to create user engagement and make a great first impression.
One common theme among these designs is that all of the typography styles are highly readable. If you plan to work with a more trendy or funky text element, choose a typeface that users won’t struggle to read. The trendy technique is the trick with these designs, not the typeface itself.
Here’s what’s trending in design this month:
1. Just Type Above the Scroll
While a great image can help draw users into a design, sometimes the right words and space are the ticket.
The key to making the most of this design trend is to refine your message. The words need to be simple, say something meaningful and create value for the user.
So how do you do it?
- Start with a key phrase. It can be your mission or a value proposition for users. Tell users what you bring to the table and why your website will be important to them.
- Pick a simple typeface that has the same mood as the messaging for longer copy blocks.
- If the text block is short, such as with Types of Type, consider a funkier type option to draw users in.
- Make the most of space. Note that in each of the examples below, text has plenty of room to breathe, making it easier to read at a glance. Space can also help draw the eye to text, and can balance text elements if you don’t want to center them on the screen, such as Design Ups.
- Use color to help add visual interest. Bright, trendy hues can help draw users into the design. Color can also help set a mood that correlates to messaging.
When working with a type-heavy design, don’t force it. Sometimes you won’t have enough text to fill a full “screen.” Less is More and Type of Type use color blocking to create multiple panels that are sized perfectly for the text content therein.
2. Text in White Boxes
With so many bold visual elements in website design projects—and so many responsive breakpoints to deal with—white boxes are re-emerging as a container element for text. White boxes with dark text inside can ensure readability when it comes to messaging on top of photos, video or illustration where there is color variance.
And while this trend might sound a little, well…sloppy or lazy, it actually looks great when done well.
You can’t just slap a box anywhere on an image and hope for the best. White boxes need to be placed strategically so that they don’t cover important parts of the image and so that users do move to them in the course of looking at the design.
White boxes need to be big enough to contain a reasonable amount of text and you should have a plan for this element on smaller screens, such as allowing everything in the text box to drop below the main image. Don’t try to put a text box over an image on smaller screens because you’ll end up with a box of text that’s too small to read or the box will cover most of the image itself.
If you pot for the white box treatment, have fun. Each of the examples below use white boxes in completely different ways.
Do Space cuts a white box into the bottom corner of the image so that most of the image is visible. The white box bleeds into the white space below so that it almost looks like it comes up out of the panel below. This technique helps connect the main slider to the content below (and can even encourage scrolling).
HowIt uses circular blobs so that the white text boxes better match the tone of the background illustration. This subtle shift in shape, so that the boxes appear more fluid helps connect the elements so that the boxes and background have a consistent feel. You don’t want white boxes for text to feel like they are haphazardly placed on the background. (That doesn’t work and won’t help create a cohesive feel for users.)
Macaulay Sinclair has more text than the other examples using one part of an image-panel grid to hold the text element. Here, the image behind the white box serves no information value. It has a color and movement scheme that looks similar to other images and mostly serves to create cohesion between the text element and rest of the design.
3. Typography Cutouts
No one ever said that text has to be a series of solid filled letters. More designers are opting for typography cutouts that feature a color block over an image so that the image comes through clear lettering.
This technique can work with still or moving images and with full screen overlays so that only a small amount of information comes through letters (almost to create a texture) or with more of a block-over-image-style with more of the background image visible.
The trick to making this work is the right typeface. Letters have to have thick enough strokes so that the image or texture in the background is visible. You can’t do this with a thin or condensed font with any consistent success.
This technique also works best if the number of words and letters is fairly limited. Stick to one to three words with 10 or fewer letters or use very common words that users will know at a glance.
Danbury uses a bright text cutout as a draw to encourage users to engage with the video call to action. The entire orange box is just a giant button.
Fusion Winery uses a background video of a vineyard in the lettering. What’s great about this design is the triple layer effect: Video background below white text cutout below a product image.
The Kaneko uses an unidentifiable image as the fill for letters. If you opt for this style, keep this background simple as done with this design. There’s just a touch of color and texture that draws the eye to the text on the stark canvas.
The collection provides inspiration for those projects that might not have a great image or video, so that you can still find a way to create something that users will respond to. Don’t be afraid to use text as a visual and informational element in this design.
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.
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.
The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.
Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.
CSS Tip for Images Missing “Alt” Attribute
Simple Patterns for Separation (Better than Color Alone)
10 Free Tools to Inspire Color Choices for your Website
Iris – The Definitive Design Tool to Create Beautiful Color Schemes
Google Maps Updated with New Design for the First Time in Years
How We Adapted the Booking.com Mobile Site for the iPhone X Notch
The Desks of Top Creatives Prove that Offline Workspaces Still Matter
Neil – AI Content Curator for your Reading Pleasure
We’ve Curated a List of the Best Black Friday Deals for Designers
Facebook is Killing a Feature You Forgot You Hated
Faux Grid Tracks
Battle for Net Neutrality
The Atoms of Programming
7 PayPal Alternatives for Freelancers to Collect Payments in WordPress
Feel Homey: Handy Tips for Home Page Design
Canecto – Out of the Box Website Analytics and Optimization
Site Design: Edwin de Jongh
9 Must-Have Extensions to Get You Started with the New Firefox Quantum
How Freelancers Can Make Sure They Get Paid
Why Artificial Intelligence is the Future of iPhone’s iOS
The Pocket Guide to Creativity
What’s the Best Design Advice You’ve Ever Received?
Fontjoy Combines Fonts Via Deep Learning
Landbot: Build Conversational Websites
The Declaration of Neutrality – Internet Freedom as a Constitutional Right
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Every week we feature a set of comics created exclusively for WDD.
The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Old time monitor
You made the list
You get what you pay for
Can you relate to these situations? Please share your funny stories and comments below…
If huge discounts at the mall aren’t enough to drag you away from the turkey leftovers, then we’ve got the perfect solution for you: We’ve put together the 35+ best crowd-funding projects that are live right now, so you can spend your hard-earned green with the least effort possible.
Crowd-funding sites are packed with tempting offers, from must-have gadgets, to community projects you’ll be proud to back. Take a look at some of the best projects that are funding now, and need your support.
Pens & Pencils
If there’s one thing crowd-funding sites do well, it’s writing instruments.
Pen Comet is a stunningly minimal pen that uses magnets to attach its cap. Available in silver, gold, or space gray, it’s the perfect accompaniment to a desk littered with Apple products.
Woopen is a wooden pen that doubles as an anti-stress device thanks to its unique shape. It takes standard refills, and comes with a nice case. With weeks to go it’s 20% funded already.
Redefining how we use pencils, pencil+ is a sharpener, extender, and transporter. It lets you use your pencils right down to the nub. With over a month to go it’s fully funded already.
TTi-108 Titanium Pencil
Claiming to be the best made titanium pencil in the world, it certainly looks the part. Don’t be fooled by the prices listed in Hong Kong Dollars, rewards start around $150.
Ti Arto EDC
A solid titanium pen that takes any kind of refill without the upsetting wobble. With a month to go it’s reached its funding goal twenty times over!
Crowd-funding isn’t just about buying crazy gadgets, it’s also about helping out other people and making the world a better place.
Rabbit Hole is the senior show for a group of design students from California State University, Long Beach. Everyone deserves a senior show, it’s a great cause with some cool swag.
Hello World: The Film
Hello World: The Film is a documentary exploring the world of code, what it powers, and the coders who write it. If you’ve got $5000 to spare, you can even get yourself in the credits.
Bay View Printing Co
This letterpress print shop wants to become a creative hub for Milwaukee, by opening up their studio to the local community. Back them and grab some letterpress swag.
U&I PCA Graphic Design Final Show
Another senior class hoping to crowd-fund their final show, this time at the D&AD New Blood Festival. This one’s fully funded but the personalized rap song reward is still up for grabs.
Home Computer Museum
Bart van den Akker is setting up a home computer museum in the heart of Europe. The ambitious project is the perfect opportunity for a tech giant looking to hand out sponsorship.
The mainstay of crowd-funding sites are innovative tech gadgets. Here’s our pick of the best projects to back right now.
Migo’s a portable, internet-enabled, industrial quality 3D printer. A great entry level device for introducing yourself to the world of 3D printing, they’re just reached 100% funding.
Bolt’s a fully integrated internet of things platform, with built-in machine learning. Their previous crowd-fund missed its goal, this time they’ve passed 300% funding, good job!
Kappa is a 3D printer developed at the University of Singapore. Successfully funded over on Kickstarter, it’s now available on Indiegogo on demand.
A personal, immersive, 4K cinema experience, Cinego looks like a VR headset, but is really a high-quality 2D screen. They’re running a limited time 50% discount for Black Friday.
If you’re a fan of typography, you’ll find lots of projects to back on crowd-fund sites.
Vaughan Oliver Archive
A legendary album designer for bands including The Pixies, The Breeders, and more. This project wants to collect Vaughan Oliver’s work into book form.
Richard Rutter’s guide to web typography is critically acclaimed already. The project is fully funded and past deadline, but you can still order the book.
A great gift for anyone who loves typography, these detailed posters take the idea of the anatomy of letters a step further, by illustrating the skeletal structure of type.
Martin Luther Handwriting Font
This project aims to create a script font based on the 500-year-old letters of Martin Luther, of reformation fame. Contribute to this project and get the licensed font when it’s ready.
W. A. Dwiggins: A Life in Design
The biography of W. A. Dwiggins, one of the 20th centuries most important designers. Fully funded on Kickstarter you can grab the perks for the standard edition on Indiegogo.
Vignelli: From A to Z
Based on 10 years of lectures at Harvard design school, this popular design book has been unavailable for years. This project is working to reissue it.
Learn to Code
Do you want to learn to code, or would you like to help kids learn? Either way there’s a ton of options.
MatataLab is a coding toy for kids aged 4–9 that lets them program a robot, create music, and make art. This one has already passed 100% funding with almost a month still to go.
Erase All Kittens
Erase All Kittens is an epic adventure game that teaches kids, especially girls, how to code. A third of the way to its target, pledge before 21st December and gift membership to kids you know.
Learn Bootstrap 4 By Building Real World Projects
A comprehensive course designed by expert tutors to get you up to speed with Bootstrap 4 fast. This one only has 48 hours to go, so if you want to back it, act quickly.
DevKit is an iOS application that helps students build apps without the need to learn to code at all. Pledge just $10 and you’ll get a year’s subscription.
Pip is a Raspberry Pi powered device that lets your kids tinker with code, starting with a simple drag and drop approach and building up to full code.
Crowd-fund sites are stocked with hundreds of designer accessories. Here are some we’d love to see on our desks.
Halo Wireless Phone Charger
Using wireless charging technology to keep your cellphone running, this is a great looking device that would grace any desk. With 20 days to go, they’re halfway to their target.
The Minimalist Notebook
If you’re tired of Moleskines, why not grab an architect-designed pure white notepad edged in natural copper. They’ve got a month to find 95% funding for this beauty.
Mara Pen is a new breed of motion controller, perfect for design pitches, or conference talks. Fully funded back in February it has since raised 939% of its target. You can still grab the perks.
Ingo Stylus is a compact stylus that extends to full size telescopically. It’s fully analogue so you don’t need to worry about charging, syncing, or device compatibility.
Photography is one of the world’s most popular hobbies, so it’s no surprise that budding entrepreneurs are pitching to that market.
Prynt for Android
Prynt turns your Android device into an instant camera, just like a Polaroid. It’s the best thing to happen to mobile photography since Instagram.
Reflex Analog Camera
Resurrecting the 35mm analog film format is Reflex, the first newly designed SLR camera in a quarter of a century. The body uses a standard lens format, and there are no megapixels to care about.
Fishball for iPhone
Fishball claims to be the world’s first 360 degree smart phone lens. Simply clip it directly to your iPhone and start recording video and images that are perfect for VR.
Capsule’s a safe place to store digital photos without uploading them to the cloud. Its built-in AI will help you sort your collection as well, so all you have to do is shoot from your devices.
If you want to boost your creativity, the best thing you can do is de-stress, and get a good night’s sleep.
Quite possibly one of the weirdest products you’ll ever see crowd-funded, Qoobo is a pillow with a tail. The tail wags when you cuddle it. Perfect if your landlord won’t let you keep pets.
Circa is a standalone smart alarm that aims to help you get a restful night’s sleep by keeping your smartphone out of the bedroom. Great for anyone who can’t turn off Facebook.
Somnox is a sleep robot that helps you get a better night’s sleep with breathing regulation, sounds, and affection. Can’t afford the robot? They have socks too.
SmartphoneBOX is a rubber dock for smartphones that does nothing except take your phone out of your hand. If you struggle to disconnect, this might work for you.
Header navigation menus can often be overlooked when it comes to inventive and creative web design. But as the primary way users explore and interact with your website, investing in engaging header navigation means site visitors spend more time on your site and end up seeing much more than just your landing page. There’s no point having brilliant web design on your inner pages if your header doesn’t make it easy (and fun) to click through to it.
So we’ve put together a roundup of websites which have made the most of their navigation menus with beautiful, sleek, and innovative design. Take a look below and get inspired!
Sistrix is the German company behind popular SEO software package Sistrix Toolbox. As such, their website (including their popular SEO news blog) gets regular traffic from digital experts. When that’s your target market, there isn’t much room for sloppiness when it comes to web design.
Keeping things sleek and stylish, the Sistrix navigation menu is comprised of four simple drop down menus: Toolbox, Blog, Resources and Support. Hovering over each header reveals a list of relevant links, each represented by a simple icon. This is a particularly smart idea when your website has as many pages as Sistrix’s has.
Just showing a block of text can be overwhelming when trying to navigate through a big website, but these well-designed icons quickly direct the visitor to where they need to go. Looking for help with mobile SEO? A simple smartphone icon draws the eye and gets you there much quicker. Streamlining the user experience for site visitors is one of the main functions of a good navigation header, and this is something the Sistrix site nails.
One of the key services offered by Australian digital marketing company Supple is their web design makeovers. This means that having a good navigation menu on their own is as much about demonstrating their design prowess as it is about helping visitors navigate their services. One of the key things that helps Supple’s header navigation stand out is the simple, yet eye-catching, use of animation and colour.
For example, their phone number is represented with a colourful animation that cycles between orange and black text. Beyond simply helping site visitors know what number to dial to get in touch, it adds a dynamic flair to the navigation menu.
Other eye-catching uses of animation is the hover effect on the navigation menu to expand the text like what >> what we do, how >> how we do it, etc. It’s small touches like this which make navigating the site fun, meaning visitors are likely to spend more time browsing through multiple pages.
When you’re a fashion brand, it’s smart to show off your latest designs as much as possible. While many drop-down navigation menus are purely text-based, UK fashion brand Reiss highlights their New Arrivals catalogue using images in the drop-downs for womenswear and menswear, two of their core product categories. It helps that they’ve invested in high-quality photography—with pictures that look this great, why not incorporate them as a key part of the navigation experience?
Vibrains is a portfolio for Emiliano Borzelli, a front end developer. When it comes to the site, it’s truly out of this world. Picking a clear design motif like ‘space’ gives a cohesive look to the whole site. Everything from the logo design to the key info icons utilise space imagery. A simply animated banner makes browsing the site feel like floating in outer space, but the absolute standout design feature is a fully animated animation of the solar system when you jump into the process section.
With to-scale representations of our neighboring planets, it evokes the childlike fascination people have with space to keep visitors engaged with navigating through the site. If you’re as obsessed with this animation as we are, you’ll be glad to hear we tracked down the open source code for it on CodePen here!
Brazil-based digital agency Weecom utilise a hamburger-menu button to keep their homepage looking sleek and minimalist, with navigation options only popping up as you hover over the icon. It’s a pretty standard approach to navigation headers, but what we love about Weecom’s site is how scrolling down the page causes the hamburger icon to switch from top-left to bottom-right. It’s a simple, dynamic touch that proves how important it is to use navigation menus that work around the main content of the page.
When you’re a content nexus like Mashable, it can be a tall order displaying all your content in a conventional navigation menu. Headings, subheadings, sub-subheadings—making sure you have clarity is key to providing a good user experience for your site visitors.
That’s where their mega-menu comes in. Once you hover over the ‘More’ tab a drop-down menu spanning the entire length of your screen becomes visible. This provides the space to include a series of columns—like ‘Channels’ or ‘Company’—under which your list of subheadings can be displayed. If you’re designing a site that’s hosting a lot of content, considering a mega-menu like this one is a strategic way to handle navigation.
Another example of a mega-menu, travel service Oars uses a clear navigation layout to help you find what you want. For example, hovering over Destinations showcases a mega-menu divided up into Oars’ local United States destinations, International destinations, National Parks and Rivers.
Another great addition to the mega-menu design is the use of images under Your Experience, Stories+Video and Plan+Reserve headers. Making the most of the space they have, these eye-catching image panels engage site visitors and encourage click-through.
8. Paper Collective
Specializing in stunning art prints for the home or office, it’s clear Paper Collective has an eye for good design. Accordingly, they’ve made clever use of a slide-out sidebar menu—meaning that navigating their site never obscures their homepage product images, but shifts them slightly to the right instead.
Maybe we’re design nerds, but one of our favourite parts about the Olympic Games is seeing the logo designs each host city comes up with. Completely individual to the culture and design sensibilities of the time, they’re a great way to look back on past Games.
This is something the navigation menu design for the IOC homepage seems mindful of—as you hover over the main ‘Olympic Games’ header each Olympic Games is represented alongside its specific logo. Laid out in a simple, streamlined way that makes navigation by chronology easy, this site sets a gold-standard for good menu design.
10. Next Stop
Next is a UK brand that sells everything from clothes to shoes, to flower arrangements, to furniture. As such, their navigation menu has to do a lot of heavy-lifting to display their comprehensive catalogue of products. One of the techniques they use is accordion tabs—when you hover over their Home & Furniture header you’ll see a sub-menu of tabs you can click through to see links for bedroom furniture, kitchen fittings and more! If your company has a wide range of products online, this method of dividing up headings, subheadings and sub-subheadings is a fantastic way to go.
Smart navigation design means knowing what people are looking for and displaying that as easily as possible. For sporting media empire ESPN, most of their customer base are looking for one thing: the score.
With a keen awareness of this, ESPN has made the smart decision to display a Top Events navigation menu above their standard menu, giving quickview results for the latest scores in the most popular games. In combination with the standard menu (which utilises team logos under NBA, NFL, AFL, NRL & Cricket headers for easy browsing) it’s design that’s directly informed by how and why people use the ESPN site.
Bentley is a brand which is held in high regard for their sleek car designs and, so it would seem, sleek web design too. A clever layout has made navigating the Bentley site a joy. Clicking the Models header in the top menu causes a sidebar to appear. As you hover over each car model range, you’re given a stylish sideview of the individual models on offer.
With a reputation for beautiful cars, it’s no surprise high-quality images feature so heavily in the Bentley navigation menu. It’s a lesson we can all learn when it comes to web design: if you’ve got it, flaunt it!