Skip to main content
Mapping a User Story

Creative / Development Inspiration 58

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/

Content Mesh Plug and Play

The Rise of the Content Mesh

On October 4th 2018 an article named “Delivering Modern Website Experiences: The Journey to a Content Mesh” was published by Sam Bhagwat on gatsbyjs.org. Sam introduced the concept of a Content Mesh, and touched on the different pieces that are involved.

 

In essence, the Content Mesh allows you to (from Sams article):

select 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.

 

That, is an exciting sentence.

 

There are have been multiple times across different projects where I have wanted to use a piece from this platform, and a piece from that service, but have been tied to a pre-set CMS with no flexibility. It looks like we have a solution!

 

Why hasn’t Content Mesh been possible before?

Honestly. It has been.

REST APIs have been around for years, and web developers have been able to integrated third-party services into websites. Google Analytics is a perfect example of a script that can be dropped into a site and managed elsewhere. I don’t believe it is a case of “it wasn’t possible”, but rather it hadn’t been widely considered. The reason it is getting traction now is because of the following points.

 

Dedicated web services for specific use-cases

Fully fledged CMS services still exist, they are continually being improved and built upon. However, micro-services are built to do one thing, and do it right. This means that the right tools can always be used for the job, as opposed to hacking a pre-existing functionality to do it for you (you have to love WordPress development…).

 

Consider a Ecommerce business for instance. Products need to be managed, payments need to be taken, as well as a blog, CRM, user data storage, and analytics.

 

One size fits all

In the past I would have directed a client to a monolithic approach, such as Magneto. It handles everything (which is great at first) but development and change is restricted by the software. This become a problem when rolling out continual changes that eventually go against the built in functionality.

 

So micro-services?

Now it is a different story. Each need has a service!

These can all be called via the respective APIs and shown on the central site.

 

Each one of these services does a certain job, and it does it well. They have comprehensive documentation, and a boat load of code already written to drop into a site. It is highly likely that the individual managing the products for example, is not going to be the same person writing the blogs. By separating these areas means less distraction, and a cleaner, streamlined approach to the management of the website.

 

There are several benefits to this micro-service approach:

  • If one service fails, the rest can still function – this allows fault isolation
  • Stronger security – each service has its own credentials
  • Easy integration and deployment – NPM, Netlify, etc
  • Not locked-in to a specific stack – can try other services
  • The website can easily be scaled – if a service isn’t working to its fullest, remove and replace
  • Easier understanding – each tool explains what it does, and only what it does

 

An evolution of workflow and techniques

The older monolithic services are generally built on top of older technologies and have a slower development process. Need to add functionality? Then it looks like you are writing a large PHP function that goes against the softwares original design. Need to maintain a local environment? Well it’s going to take time pulling in changes from team members.

 

This has been addressed by more modern technologies, take React and Vue for example. These JS frameworks enable fast spin up times, super easy to start a new project (think create-react-app), and an incredibly large community pushing improvements all the time. The open-source aspect of JS is great, with problems being solved, packaged, and stored on NPM.

 

These technologies partnered with the agile methodology (or similar, touchy subject) means that ideas can be brought to life in the blink of an eye (internet speed dependant). The web development community has got on board with this “packaged” concept and are really running with it. More and more businesses are understanding the idea of rolling out an MVP and building on it. Introducing Sprints and weekly roll outs to the workflow. This type of mindset requires a more flexible, more scaleable set of tools. The speed of production depends on it.

 

Because of this, micro-services are able to fall into place easily, meaning the arrival of the content mesh. By being treated as another package on NPM, it is as easy as running a short command in a console and including into the code base. Most of the fiddly stuff is handled by Webpack. Everything is very close to being plug and play.

 

So what next?

Obviously each project has its own set of requirements and restrictions but I would argue that the content mesh strategy can be applied to almost all cases. Once a basic framework has been created that works for you and your team, services can be introduced easily. You can replace that “one size doesn’t quite fit” solution and use whatever works best. Currently it seems only GatsbyJS comes with out-of-the-box integration, but it won’t be long before others join the race. The concept of a content mesh means the best solutions can all be used. This is definitely the right direction.

Design and Development 52 Banner

Creative / Development Inspiration 52

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 web­pack 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

Bedrock & Trellis WordPress Development

Trellis & Bedrock For Fast WordPress Development

I am continually trying to speedy up and improve my WordPress workflow process. Unlike a lot of JS framework communities, WordPress seems to be a little behind in creating a fast and efficient roll out process. The whole thing seems a little “work it out yourself”.

 

That being said, there are hundreds of tools littered around the interwebs once you start looking. I have been aware of Roots, and the resources they have created for a while, but never had the time to properly look into them. Today I decided to look into Trellis and Bedrock.

 

What the Hell is Trellis? Bedrock who?

 

Trellis is labelled as “WordPress development and production servers done right”. Basically a complete WordPress server on your local machine, with the ability to deploy and update with a single command. This also means that if someone else on your team needs to spin up the theme to take a look, it is as easy as a few commands. No more sending a zip file across email.

 

Bedrock is a WordPress boilerplate that completely overhauls the standard environment setup. It means that the project is organised, and just easier to work with.

 

I will only go as far as setting up a local development environment in this article. I will come back and write an article on remote servers once I have my head around the process.

 

Installing the Requirements

To begin with Trellis runs on Vagrant – a tool for building and distributing development environments. And Vagrant runs on VirtualBox. So before we can do anything, these two need to be installed.

 

Firstly, to install VirtualBox, go to https://www.virtualbox.org/wiki/Downloads and find the package for your machine. As I am running Windows I have a feeling this process is going to be harder for me, than someone on Mac on Linux. We shall see…

 

Once VirtualBox is installed, go to https://www.vagrantup.com/downloads.html and download the package.

 

Vagrant takes care a dependency called Ansible for us. This is a automation system that handles application deployment and task execution. In essence removes the need to run repetitive tasks ourselves. Vagrant only installs Ansible within the project, so if you are going to consistently roll out new project, to save time it would be worth installing locally from https://github.com/ansible/ansible. This is not essential thought.

 

Create a Project

Now to get into the fun bit. Roots recommend a directory structure that is not the WordPress standard. This is handled by Bedrock, so no problems here.

It looks like this:

Bedrock directory structure for WordPress development

Firstly we need a project folder to put everything in.

 

mkdir example.com && cd example.com

 

Now we need to introduce Trellis.  

At this point you are working with GitHub and SSH. Make sure that you have a SSH key set up on your computer, and also on your GitHub account. If you have not, you will need to do this now.

 

git clone --depth=1 [email protected]:roots/trellis.git && rm -rf trellis/.git

 

And now Bedrock

 

git clone --depth=1 [email protected]:roots/bedrock.git site && rm -rf site/.git

 

So far so good!

 

Configure Your Site

Trellis is built around the concept of “sites”. Each Trellis managed server (local or remote) can support a single, or multiple WordPress sites. Trellis handles the configuration everything required to host a site. This includes the databases, folder directories and Nginx vhosts. This means that this process only needs to be carried out once. After this everything can be run from here.

 

Trellis uses YAML files for each environment. There are two files that you need to be aware of.

 

Normal settings file: group_vars/development/wordpress_sites.yml

Passwords and secrets: group_vars/development/vault.yml

 

Normal Settings

This file manages the top level settings that is used to define all your sites. This is the bare minimum example that is given in the Trellis documentation.

Trellis normal WordPress settings

Each site starts with the website name as the key. This is used by Trellis internally to name the site and as a default variable throughout the build. It is recommended that sites are named after the domain, so that it is easy to understand which is which.

 

To access the development site on your localhost, set the canonical link to the URL of your choice. Trellis will set your system to show your WordPress site when you visit this domain. In the example above, visiting www.example.test will take you to the site.

 

Under this site name are the settings for that particular site. There is no need to redefine these variables, but if you do, be aware you will also have to edit the corresponding entry in the Password file.

 

Passwords and Secrets

This file is used by Ansible. It is used as we do not want to include passwords in our Git repository. This is an example of the vault.yml file given in the documentation. As you can see the site names match in both files.

Trellis WordPress Password Settings

Spinning Up

To get the server up and running, three things need to happen. Firstly move into the Trellis folder, inside your project root. Secondly, run the following command:

 

Vagrant up

 

Vagrant will go away and get certain dependencies it needs to run. Once these are installed you will need to re-run the command.

 

At this point I found on my work machine Vagrant got an error when trying to download a build essential: build-essential_12.1ubuntu2_amd64.deb

 

The console returned the following error message:

 

The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!

apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev

Stdout from the command:

Stderr from the command:

E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/b/build-essential/build-essential_12.1ubuntu2_amd64.deb 400 Bad Request [IP: 91.189.88.152 80]

E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?

 

I found by logging into the Vagrant machine:

 

vagrant ssh

 

and following the command given in the console

 

apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev

 

I was able to fix the issue. Once these packages had properly installed, I ran

 

vagrant reload --provision

 

To kick off the machine again.

 

Once running, this will take around 5 – 10 minutes to complete. As soon as this is finished, your WordPress site is accessible. In your browser following the canonical URL set in settings earlier to see the site.

When you need to shut down the machine, you can roll it down without deleting the whole machine by running:

 

Vagrant halt

 

This is essentially shutting the computer down. To start it back up just run:

 

Vagrant up

 

Once this has been run once and you have the hang of it, your workflow speed is dramatically increased. By including Gulp into your theme development will turn the whole process of developing WordPress themes so much more enjoyable. Rather than messing about with the setting up of environments you can just be creative!

Grav CMS banner

First Taste of Grav

Up until recently I have been predominantly a WordPress based developer. I have dabbled in other things, a little bit of React here and there but nothing crazy. Recently however, I have felt a bit nonplussed with it all. Everything seems to take a little bit too long to spin up, and although I have built Gulp scripts to help speed me along, they hasn’t help as much as I would like them to. Then Gutenberg became a thing. Not that I don’t think WordPress needs to stay with the times, I just don’t think it will make my life any easier.

 

Enter Grav. I was looking for a simple, easy to spin up static site generator that has a backend simple enough for idiots clients. It is PHP based (so I can put it on a clients hosting without having to explain Node), and speedy as anything. It seems to cover all those bases.

 

Installation

 

This was a dream. I already have WAMP and Composer installed on my machine so I had to run 3 commands to get Grav installed and ready to go.

git clone -b master https://github.com/getgrav/grav.git
composer install --no-dev -o
bin/grav install

 

This last one did give me a little bit of trouble. I got the error message:

‘bin’ is not recognised as an internal or external command, operable program or batch file.

 

Turns out this is due to the PHP directory not being found by Windows. To get past this all I needed to do was show my computer where PHP was located using this command:

 

C:\wamp\bin\php\php7.0.10\php bin/grav install

 

At this point everything went well. I already had Wamp switched on, so pointed my browser to that folder in my Localhost.

 

Grav Install Confirmation

 

 

Woop!

 

Installing Admin Panel

 

The Grav “Learn” section has a really good rundown of all the configuring and option settings that can be set. It walks through the folder structure, what is used for what, and the general layout.

 

At this point I was not bothered about this. I just want to install an admin panel and smash out a theme (if you are bothered, here is the link: https://learn.getgrav.org/).

 

It turns out installing the admin plugin is just as easy as installing Grav itself. Firstly you have to make sure that your version of Grav is the latest version.

 

 

bin/gpm selfupgrade

 

 

Then, once you are sure you are on the latest version, add that plugin

 

 

bin/gpm install admin

 

 

For the two above command, remember that is you had an issue with PHP when installing Grav, you will do again. So reference PHP directly.

 

I found that my console sat thinking for a while, before anything happened. But something did happen, so sit tight. The admin plugin also requires three other plugins. Login, Forms and Email. These set as though dependencies so will install them for you.

 

Once this has been completed, I found that when I pointed my browser back to the Grav folder on my Localhost the page had changed. Now there is a admin screen asking me to set up a user. Once this is done you are directed to the admin area.

 

Admin Panel

 

First thoughts: God damn I like this. It has very obviously been built with ease in mind.

 

All the options and settings that the “Learn” section went through are all included down the side of the admin section. This made me happy, as I want it as simple and as easy to explain to clients as possible. On a quick click through it seems much like any other CMS, but simplified. There is obvious room for adaption is a project requires it, but for a simple brochure site or blog this setup is perfect.

 

Grav admin panel

 

As Grav is saved down into static files, there is no need for a database. This means that the way the site is backed up, is by downloading the static files. This option is set front and center on the dashboard, alongside a simple user statistic chart.

 

I like to automate everything I possibly can, and the idea of manually downloading a site backup every week does not appeal to me. Turns out this is not a problem. The Grav CLI allows you to hook into the inner workings of the site, so a cron job could be set to do this for you. Happy days.

 

Markup Though?

 

The text editor works in the same way the pages do when editing manually. They use Markup. This is a barrier to entry for a lot of people who are not so technically minded. Turns out someone has already got a solution for this.

 

The TinyMCE Integration Plugin

https://github.com/newbthenewbd/grav-plugin-tinymce-editor

 

Once again, installation is a breeze (yes, I like Grav). There are two ways you can manage this.

  1. Log into your admin panel,navigate to plugins. Search the plugin. Click add.
  2. Or, if you are like me and want to run everything quickly when rolling out a new project. Run this command.

 

 

bin/gpm install tinymce-editor

 

 

Love. It.

 

I am going to spend a bit of time looking into developing a proper, fully fledged theme. But as a general overview to rolling out a site on a localhost, it is a definite winner! As there is no database it means the whole site can be dropped on a hosting service via FTP/SFTP and you are laughing.

 

CSS Shape Radius Blog Banner

Creative / Development Inspiration 49

This week is more developer heavy, but with reason. There have been some brilliant tools and articles this week, and I really wanted to share them all! Enjoy this weeks design (little less) and development (little more) inspiration rundown.

 

Website Inspiration

ACLU — 50 State Blueprint

Not your typical website, but incredibly effective. ACLU have created this simple website showing each one of the 1,942,600 people in state prisons and jails in the US.

https://50stateblueprint.aclu.org/

 

Designer Resources, Examples and Inspiration

Stop Solving Real Problems Once in a While

We sometimes take things too seriously and thus overrate people sharing their shiny design and code experiments with the world.

https://uxdesign.cc/stop-solving-real-problems-once-in-a-while-e7e1ecdaf9c1

 

Logo Lab

A tool to help you make your logo better. Checks balance, colour, accessibility, and more to ensure your brand is more able to catch that attention!

https://logolab.app/lab

 

 

Development Snippets, Samples, and Articles

Introducing GitHub Actions

This makes me very excited. GitHub actions allows build and deploy (actually, any task you can think of) to be run when specific commit commands are made. Yes.

https://css-tricks.com/introducing-github-actions/

 

Experimental Gradient Editor

A great Codepen project by David A, showing colour gradient manipulation. Doesn’t really work on mobile, but looks great on desktop!

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

 

Rythm JS

Spelling issues aside. This JavaScript library is has an interesting take on using music on websites. Lets make your website dance.

https://okazari.github.io/Rythm.js/

 

Keys to Maintainable CSS: Order

Krisztian makes some great points on how CSS should be organised in a project. From ordering, layout, and simple spacing, this article helps developers write better, more readable CSS.

https://pyx.space/post/keys-to-maintainable-css-order

 

Relax – A Promise Based State Management Library

Think Redux, but smaller. Written from scratch, with no action types, switch statements or middle ware. It’s only 2.23kb gzipped!

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

 

CSS Border-Radius Can Do That?

When you use eight values specifying border-radius in CSS, you can create organic looking shapes. The article goes through how this is done, and also links out to a handy tool to help in shape creation.

https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae

 

A bit of everything

How to Create a Design System

I am not going to give this up yet! I am big on this idea. This article covers the autonomy of a design system, and how you can build one.

https://medium.com/dev-channel/how-to-create-a-design-system-460b93a6565

 

The Inclusive Web – Why It Should Matter to Businesses

An article I wrote last week about how businesses seems to forget about accessibility. This makes no sense, as they seem to be missing a trick…

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

 

Of Deadlines and Due Dates

This article stood out to be due to this one like – “Do not commit to a deadline you did not help set”. I think this sentiment is something that needs to be considered by a lot of people in this industry. Interesting read.

https://blog.calevans.com/2006/02/03/of-deadlines-and-due-dates/

 

So We Got Tracked Anyway

A brilliant article about how SSL means bugger all to the monopolies of the interwebs, and how Google and Facebook track you everywhere you go.

https://youbroketheinternet.org/trackedanyway

 

Realtime Board

I stumbled across this tool on Reddit. A real time, whiteboard like interface to keep everything in one place. A simple white boarding platform for cross-functional team collaboration

https://realtimeboard.com/

Proper UX Animation Banner

Creative / Development Inspiration 46

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

Kin Movie Banner

Creative / Development Inspiration 43

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

Bit Little City Image

Creative / Development Inspiration 40

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/

 

React Vis Banner

Creative / Development Inspiration 39

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