Inspiration Archives | Page 2 of 6

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

Creative / Development Inspiration 45

17th September 201817th September 2018 Robert Marshall Leave a comment

Persuasive design, portfolio redesign, and how to run a dev sprint. This weeks design and development inspiration rundown has a great selection of articles and code snippets to keep you up to date with last weeks tech.

Website Inspiration

Resn

A global creative digital agency. Although hard to work out how to get their contact details, I love this site! Clever use of JS animation and video.

https://resn.co.nz/

Designer Resources, Examples and Inspiration

How and why I redesign my portfolio every year

Lessons this designer learned after iterating their site design over 6 years.

https://uxdesign.cc/how-and-why-i-redesign-my-portfolio-every-year-bf3bba3833fc

Using persuasive design and triggers to increase conversions

Learn how to improve your conversion rate and increase sales by adding persuasive design elements and triggers to your eCommerce websites.

https://webflow.com/blog/using-persuasive-design-and-triggers-to-increase-conversions

Cards 2.0

100 symbols and elements ready for use in any UI. Really nicely designed, with a light modern look.

http://cards2.webflow.io/

Development Snippets, Samples, and Articles

Prettier

An opinionated code formatter that makes your code prettier.

https://github.com/prettier/prettier

KY

Ky is a tiny and elegant HTTP client based on the browser Fetch API

https://github.com/sindresorhus/ky

Sal

A lightweight scroll libary. Just remember don’t overuse, as I explain in week 27.

https://mciastek.github.io/sal/

Brownian Gnats

A great JS animation (ish) example on random paths to create little animals. Although a very basic concept, you could built a lot on top of this.

https://codepen.io/DonKarlssonSan/pen/aJVxbO

18 Tips for Running a Successful Design Sprint

Development time is a precious resource. In order to be more efficient and responsive, product teams continuously try to use advanced techniques for product creation. One of the most popular frameworks that help the product team to achieve this goal is a design sprint.

https://www.webdesignerdepot.com/2018/09/18-tips-for-running-a-successful-design-sprint/

A bit of everything

Real Work vs Imaginary Work

How do you catch more problems in the uphill phase before they catch you later on in the process? The problem with uphill work is it ‘imaginary’.

https://m.signalvnoise.com/real-work-vs-imaginary-work-8bdb84a7d1da

The Importance Of Manual Accessibility Testing

Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.

https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/

Creative / Development Inspiration 44

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

More thought pieces than inspiration, which is sometimes needed in this industry. Take a moment to sit back, read a few and consider the direction you want to take the web. This weeks design and development inspiration I listed an article on designing for accessibility, how AMP can go to hell (it really can), how to run a design audit, and how to stay scrappy.

Website Inspiration

Fleur Moreau – Design Portfolio

Not my usual type of website, but I really enjoyed this. Subtle transitions and a great display of content and image.

http://fleurmoreau.fr/

Designer Resources, Examples and Inspiration

Fake Clients

Practice logo design using randomly generated client briefs!

https://fakeclients.com/

Designing UI with Color Blind Users in Mind

Colour plays an integral role in UI design. When done right, it improves user experience, influences purchasing decisions, and reflects the brands voice. So, how do you design effective, accessible, and aesthetically pleasing interfaces for coluor blind users?

https://www.secretstache.com/blog/designing-for-color-blind-users/

Development Snippets, Samples, and Articles

Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance. Well worth a bookmark!

https://progressivetooling.com/

How to Use GIT Efficiently

Apart from knowing git add, git commit , and git push , there are a bunch of other important techniques in Git. Knowing these will help a lot in the long run.

https://medium.freecodecamp.org/how-to-use-git-efficiently-54320a236369

AMP Can Go To Hell

An article after a piece of my heart. Google are trying to monopolise the “World Wide Web”. Can we please stop them?

https://www.polemicdigital.com/google-amp-go-to-hell/

A bit of everything

What is a Design Audit and Why You Should Conduct One?

Inconsistencies won’t make anyone trust you or like you. A design audit is essentially a brand checkup. They help ensure everything is consistent and on point. This article discusses what exactly they are, how to conduct them and what results to expect from them.

https://designmodo.com/design-audit

How to Stay Scrappy

How to keep your team “scrappy”. How to keep motivated, and fighting for the win. Well worth the read to see how Paper pushes their company forwards.

https://medium.com/dropbox-design/how-to-stay-scrappy-9c42af21c996

Creative / Development Inspiration 43

2nd September 20182nd September 2018 Robert Marshall Leave a comment

After a week off ( for sun, mojitos and swimming ) I have another web design / development inspiration for you. However, because I can’t stop researching – even when on holiday – the list is slightly longer than usual, and full of some pretty interesting links.

Website Inspiration

Kin Movie

I’m not usually a fan of film websites, but the way the film snippets work alongside the parallax and particles is really something. Worth a look.

https://kin.movie

Designer Resources, Examples and Inspiration

The key lessons I learned creating a popular Design System

In 2012 Matt Bond started working on a small side project to standardise design patterns and user experience at Atlassian. This is what he has learnt!

https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd

Search Colours – Using Keywords!

Think Google for colours. A sleek interface to help inspire your designs.

https://picular.co/water

Colorable

A brilliantly simple colour generator to show if your colour pairings are accessible or not. Definitely worth saving!

https://colorable.jxnblk.com/

Development Snippets, Samples, and Articles

How to Build Complicated Grids using CSS Grid

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid. This article details how toachieved the designed layout using CSS grid without any silly workarounds or java-script magic necessary.

https://danwebb.co/journal/how-to-build-complicated-grids-using-css-grid

Universal PWA Builder

A universal, framework-agnostic PWA builder that could works along side most of the major JS libraries. Can be run as is, with no need to configure, but it is fully extensible.

https://github.com/lukeed/pwa

Create your Design System

A 6 part rundown of all aspects required in creating a design system. This link starts at the beginning, with typography. A concise and well thought out piece to lead the way.

https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd

SCSScale

Typographic modular scale starter based on body’s font-size built on SCSS

https://github.com/alectro/SCSScale

CSS Icons

An icon set made with pure CSS. No dependancies. Just grab the icon and go. Perfect for a small web project with only a few icons.

https://cssicon.space

Emotion JS

I am so happy to have found this. Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. Perfect time saver.

https://github.com/emotion-js/emotion

Styled Components

Same as the above, but has been around for longer. Better documentation, large community. Worth looking into both.

https://www.styled-components.com/

A bit of everything

Could Value-based Pricing be the Key to Higher Revenues

A recent survey of design and development firms revealed a tantalising statistic: Freelancers who use value-based pricing were more likely to report annual income over $50,000 per year than freelancers who weren’t. Could it raise revenues for your practice?

https://www.webdesignerdepot.com/2018/08/could-value-based-pricing-be-the-key-to-higher-revenues/

Honoring a great man – The Story Behind Rebeccapurple

A child’s passing is memorialised with the name of web colour.

https://codepen.io/trezy/post/honoring-a-great-man

Creative / Development Inspiration 42

20th August 201820th August 2018 Robert Marshall Leave a comment

Brilliant UX/UI articles this week – how to craft a kickass post filter, the Screenlife app case study, and a whole bunch of design resources. On top of that we have a tutorial on NodeJS gesture recognition, and how to create a blog with React. Ever considered launching a side project? At the bottom there is an article on how to do it in 10 days! Take a look!

Website Inspiration

Kollegorna – Swedish Digital Agency

This site seems to be built on top of Bulma or at least styled similarly, but I’m not sure. It is very sleek and easy to digest, which is a big thing for me. I love how each element has been considered and animates in its own way. My only issue with this this site is it is for a digital agency, and yet has a Chrome Lighthouse performance score of 35… mixed messages.

https://www.kollegorna.se/

Designer Resources, Examples and Inspiration

Screenlife App — a UI/UX case study

A step by step breakdown of the process the Screenlife App team went through to end up at the final product. Very interesting to see the user of paper mockups.

https://uxdesign.cc/screenlife-app-ui-ux-design-case-study-4830d364c76f

Design Resources

Neede is that resource we have all been looking for, for a while. One site, holding all of the good quality design resources. Get this on your bookmarks!

https://neede.co

How to craft a kickass filtering UX

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. How do we make sure they are helpful rather than confusing?

https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b

100 Days of Motion Design

It was a summer night in Seattle. She ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, completed her 5th 100-day-project — 100 Days of Motion. Then made these.

https://uxdesign.cc/100-days-of-motion-design-463526af852f

Development Snippets, Samples, and Articles

Simple Hand Gesture Recognition using OpenCV and JavaScript.

This article is nothing short of really fucking interesting. Gesture recognition using JavaScript (Node.js) and OpenCV. Its a tutorial.

https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0

Tinies

Another URL shortener. But pretty.

https://tini.es

Creating a Blogging App Using React

A bookmark I have been keeping for myself. A tutorial series on creating a full blogging app with React. Very comprehensive. I am collating a series of tutorials and links for React if you are interested – thoughtsandstuff.com/beginners-guide-learning-reactjs/

https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171

A bit of everything

How to launch a side project in 10 days

This post isn’t about the advantages of building with a new technology, or “7 things I learned while doing it”. Rather, it’s about the process of building a web app quickly, keeping irrelevant ideas from muddying focus, and the tool belt to make it happen. The end result was Card Surge.

https://medium.freecodecamp.org/launching-a-side-project-in-10-days-615df3b0e808

ZoomQuilt

This is a bit of a mindfuck, but very interesting! Inifinity image zoom.

http://zoomquilt.org/

Creative / Development Inspiration 41

13th August 201813th August 2018 Robert Marshall Leave a comment

A brilliant landing page example, common web design mistakes, pure CSS wizardry, and some great thought-provoking articles. This weeks design development rundown is a little more aimed at helping you consider your design and dev. For example, how did Facebook end up bad? Is Google Amp really the way forwards (no is the answer to that), as well as articles explaining the best way to design elements on your website.

Website Inspiration

Duda – Landing Page

I found this through clicking an advert on Facebook. Selling themselves as a WordPress replacement I was intrigued. I left having found a brilliant landing page. Simple, and effective, with nice use of CSS animation.

https://wp.duda.co

Designer Resources, Examples and Inspiration

Common web page design mistakes

16 well explained examples of the most common mistakes made in web design, with a focus on how to avoid these.

http://blog-en.tilda.cc/articles-website-design-mistakes

Waveguide – Design Knowledge Base

A curated, searchable base of design knowledge, UX/UI patterns and examples for research and inspiration. The goal is to help create a repository of referable concepts to help designers and developers build amazing, high quality products.

https://www.waveguide.io

Designing Charts – Principles every designer should know

Seemingly simple rules can be forgotten when overwhelmed with the larger project. This article steps though the correct principles for designing charts, and why.

https://uxdesign.cc/designing-charts-principles-every-designer-should-know-part-2-ce1e06af56fc

Development Snippets, Samples, and Articles

Pure CSS Wizardry

A brilliant codepen by Julia Muzafarova. A wizard with potions making animals come alive. All with CSS. Love it!

https://codepen.io/miocene/full/mjLPVp/

Guess.JS

A selection of libraries and tools for enabling a machine-learning driven user-experience across the web. It uses Google Analytics to work determine which page the user is likely to visit next, and pre-fetches all resources required.

https://github.com/guess-js/guess

Carbon

Create beautiful images of your source code, right in the browser. Share directly from the platform.

https://carbon.now.sh

Creating the “Perfect” CSS system

A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems

https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e

Lazyestload.js

Only load images when they are in the view port, if you scroll past they wont be loaded. Only 350 bytes of JavaScript. I introduced Carl a couple of weeks ago, but that is a more general asset manager.

https://github.com/Paul-Browne/lazyestload.js

Fast Average Colour

A client side library to quickly get the images average colour. Not sure how much of a good idea this is to use on a front end, but it could be used on the admin side to save the colour in an input.

https://github.com/fast-average-color/fast-average-color

A bit of everything

Google AMP – A 70% drop in our conversion rate

Let’s talk about Google AMP. AMP stands for Accelerated-Mobile-Pages. It’s a technology Google originally introduced to get web developers to speed up their web pages for mobile devices and mobile networks. But in many ways it seems like great technology for any device or network. Who doesn’t want fast websites?

https://medium.com/the-set-list/google-amp-a-70-drop-in-our-conversion-rate-35fe3cb69c59

Everything bad about Facebook is bad for the same reason

In June 2016, Antonio Perkins unintentionally broadcast his own death to the world. It was a sunny day in Chicago, and he was sharing it on Facebook Live, a platform for distributing video in real-time, released just a few months earlier.

https://qz.com/1342757/everything-bad-about-facebook-is-bad-for-the-same-reason/

How to create a customer journey map

Understanding users’ behaviour and feelings is crucial when building a user-centred product. In this guide you’ll learn how to create a Customer Journey Map and how to apply it to any project.

https://aerolab.co/blog/customer-journey-map

Creative / Development Inspiration 40

5th August 20186th August 2018 Robert Marshall Leave a comment

Just as much for the web designer as the developer this week. Some brilliant UX inspiration and how to get users hooked on your interface. On top of that two new beautiful web frameworks to bootstrap your newest project, and a life changing chart library. This and more in this weeks web design and development inspiration rundown.

Website Inspiration

Big Little City

This is not your standard website. I usually post more commercial / business based websites, but this really caught my eye. It takes a section of the world (using real world maps) and creates a 3D rendered globe, with roads and all!

https://pissang.github.io/little-big-city/

Designer Resources, Examples and Inspiration

How to get users hooked on your interface

Micro interactions happen through the functional, interactive details of a product, and details…aren’t just the details; they are the design.

http://www.webdesignernews.com/redirect/id/2187168

The myth of human-centred design

The conventional interpretation of human-centered design wildly oversimplifies the relationship between people and technology. It’s time for a more nuanced approach, writes argodesign’s Mark Rolston.

https://www.fastcompany.com/90208681/the-myth-of-human-centered-design

Colour scale generator

Simple, easy to use colour gradient scale generator. Love it.

https://hihayk.github.io/scale/

UX Design Interactions

A libary of design interactions to gleem inspiration from. New apps added weekly. Get this on your bookmark list!

https://www.uisources.com/interactions

Development Snippets, Samples, and Articles

BuddyCSS

A easy to use framework to quickly build fast, attractive websites!

https://buddycss.com/

Slide out box menu – Code snippet

A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.

https://tympanus.net/codrops/2018/08/01/slide-box-menu

Apex Charts

I love a good chart. I have featured other great ones on the first blog of the series, and the 20th. This one is the cream of the crop. This is not a one size fits all solution, but rather charts for the modern web. Easier zooming and panning, event triggering, truly responsive, and speedy!

https://github.com/apexcharts/apexcharts.js

Argon Design System

A yet another beautiful framework to jump start your project. over 100 individual components, built with SASS and Bootstrap 4.

https://demos.creative-tim.com/argon-design-system/

A bit of everything

Not every article needs a picture

If a picture is worth a thousand words, it’s hard for me to imagine there’ll be much value in the text of an article illustrated by a generic stock image.

https://pxlnv.com/linklog/not-every-article-needs-a-picture/

The Bullshit Web

A great article on how the internet has turned into a place of uselessness, and how that can easily be changed. Loading numerous tracking scripts, images and adverts, that may or may not be of use.

https://pxlnv.com/blog/bullshit-web/

Creative / Development Inspiration 39

29th July 201829th July 2018 Robert Marshall Leave a comment

How Dropbox was redesigned for mobile, AirBNB has a top quality landing page, and how to hack user perceptions. This weeks design development inspiration covers this, as well as lots more. I also got a bit over excited about using WordPress with React, and making WordPress that little bit faster. Also, AirBNB changed their business strategy. Well worth the read!

Website Inspiration

This week I tried to focus on high quality landing pages. Not just from a design perspective, but from a “do the job” perspective as well. It turns out that “pretty” landing pages, aren’t necessarily the best…

WebProfits

Simple. To the point. Easy to understand. It doesn’t shout “pretty”, but it does do the thing it says it does. Gets you SEO analysis. An immediate call to action, and a visual showing an increase in users.

https://www.webprofits.com.au/lp/seo-analysis/

AirBNB

We all know this company. AirBNB are known for their constant data analysis, always pushing to improve user experience. The page for signing up to host your home does it well. A simple form showing how much you could make from your home. Thats why you’re there, right?

https://www.airbnb.co.uk/host/homes

Designer Resources, Examples and Inspiration

A Step by Step Guide to Designing a Pet Diet App

A well broken down approach from user data to design of making an app. It covers the lessons learnt, and how each element needs thinking about as its own thing!

https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

How Dropbox was redesigned for Mobile

The designer behind the new Dropbox mobile interface breaks down how they changed the design of the app. A great insight into the business decisions and internal workings of Dropbox, and how it is a constant process.

https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c

Development Snippets, Samples, and Articles

Carl.JS

A Conditional Asset Resource Loader in about 500 bytes of JavaScript. A lazy but efficient way of managing your resources. I covered Critters on Design and Dev Inspiration 33, if you require a more built in Webpack approach.

https://github.com/Paul-Browne/carl.js

Hacking user perception to make your websites and apps feel faster

When planes at Houston Airport landed close to the terminal, passengers complained about baggage delays. So they moved the planes away so passengers had to walk further. No more complaints. How can this be applied to apps and websites?

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

ReactPress – WordPress Starter-Kit

Bringing ReactJS to WordPress. Using Next.js and WordPress this starter-kit is a fast way to get off the ground running. Definitly worth a look for clients used to using WordPress.

https://github.com/nyl-auster/reactpress

WP-Rig

A progressive WordPress theme rig. Built with fast development and lightening speed websites in mind, this starter theme is definetly worth a look. Modern processes bundled into one package.

https://wprig.io

React-Vis – Charting Library

This ReactJS based charting library has all the graphs you could possibly need, as well as all the options. Some great examples, use cases and with almost 4000 stars on Github, who can miss out on it?

https://uber.github.io/react-vis/

A bit of everything

Zeplin IO

I am surprised I hadn’t come across Zeplin before. A brilliant website to help teams work together to build products. For both designer, developer and the whole business site of the team. Think Basecamp, but tailored for design. Includes XD and Sketch integration to save time messing about with exports.

https://zeplin.io/

Design Thinking and Storyboarding Changed AirBNBs Entire Business Strategy

An incredibility insightful interview by Forbes, with the Rebecca Sinclair, founder of Honest Design. She helped AirBNB disrupt itself, and change the business strategy by changing how the business saw itself.

https://www.forbes.com/sites/emilyjoffrion/2018/07/09/the-designer-who-changed-airbnbs-entire-strategy