This week is more UI focused, due to a project that I am working on. I have still managed to include some brilliant development inspiration articles, and a few thought pieces at the bottom of the rundown. Have a good week!
Designer Resources, Examples and Inspiration
Adobe XD Wireframe Kits
A collection of Adobe XD wireframes to get you off the ground in your next web project!
It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.
Strategies For Headless Projects With Structured Content Management Systems
Using a Structured Content Management System (SCMS) can be a great way to free your content from a paradigm that begins to feel its age. In this article, Knut Melvær suggests some overarching strategies, with some concrete real-world examples on how to think about working with structured content.
Drop-Down Usability: When You Should (and Shouldn’t) Use Them
Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky. This article talks through the when and wheres.
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…
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:
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.
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
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.
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.
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 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: 188.8.131.52 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
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:
This is essentially shutting the computer down. To start it back up just run:
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!
Two great website inspiration examples, several website generators, and why the open-plan office is rubbish! This plus a lot more in this weeks website design development inspiration rundown.
I found this site whilst doing research into investment apps. The thing that struck me was its simplicity, and ease at which is gets its message across. The whole site is well thought out, and easy to digest. It could look into user accessibility a little more, but as a piece of inspiration, perfect.
Although simple, my god its quick! The way the blog title and images are swapped from the standard card layout is interesting, and works well in this case. Once again, accessibility is an issue (why is this such a standard problem, its not hard to fix!).
According to Hubspot research, 85% of people have a negative opinion towards websites with obnoxious or intrusive ads. What’s wrong with the remaining 15%? This article points out the ad creators, and how they tried to trick you. Interesting read.
I am surprised it has taken me this long to find out about this. But now I have I am definitely sharing it. Storybook is a development environment for UI components. You can browser a component library, view different states, and interactively develop them!
I have been banging on about accessibility for the past few weeks. Here is a link that can help you with that. Some great examples of common elements, and how they should be built to include/improve accessibility.
The open-plan office is a terrible, horrible, no good, very bad idea
Articles like this one have been circling for the last few weeks, and I finally decided to add it to the rundown. I have always been of the belief that open plan offices are counter-intuitive. Especially for individuals who need to concentrate on their work. As much as a support Dave hyping up his client on the phone and getting that sale, I also now can’t concentrate on this awkward function.
Why you need to care about UX design, some brilliant tips on improving mobile interaction and how to create single element patterns. This weeks creative website design and development inspiration also looks at how to create HTML5 sprites and a beginners guide to A/B testing.
As well as going over keeping up with what is new on “that there interwebs” I also use this blog for a place to keep all the best bits that I want to remember.
Its easier to find here!
“User flows done right” is this sites tagline. No wonder the site is perfectly designed. Perfect landing page with large header, and understandable call to action (I think I might use them).
The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it. This article breaks down 7 places that could be improved.
This is something I have been pushing for, and manoeuvring my workflow to get to this point. A project based on lots of small elements that can be reused over and over again. This article breaks down a few essential rules you should follow to make sure you can work faster.
I had never heard of Scrimba before finding this tutorial, but I’m so glad I have. This tutorial walks you through building a chat app with React.js and Chatkit. Each step has a video, and you can take your own pace.
Most designers are obsessed with screens. They have features and screens piled up, but rarely see their apps with their users’ eyes. Familiar? Well, it’s time to start thinking in flows instead of screens. A user journey shows how your people reach their goals in your app. This article introduces the basics of creating a user journey with some tips and specific examples.
A great collection of new inspirational website examples, snippets for the web developers, and a break down of design strategies. Also look into how to foster a performance based culture, as well as some brilliant animated logos using CSS and JS. This weeks Creative and Development Inspiration hopefully helps you broaden your understanding of web design, and create a better web experience for your users.
I have been scouring the web for examples of websites to help get your brain moving in the right direction. This week I have a great animated story, as well as some nice, clean sales sites.
Oat the Goat
A really well created interactive story about a Goats adventures. Created by Bullying Free NZ to teach children about bullying.
It is easy to fall into the trap of always using pre-determined design patterns. User needs a form? ok, we already have a standard style. Unfortunately this takes away from the users need, and stops us from thinking about the design. Sometimes maybe we should stop and consider what we need the pattern for…
Critters is a Webpack plugin that inlines your app’s critical CSS and lazy-loads the rest. It’s makes it a good fit when inlining critical CSS for prerendered/SSR’d Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.
Bulma is an open source CSS framework based on Flexbox and used by more than 100,000 developers. Very easy to customise, allowing a quick to launch product. A framework that is at the top of my list to use on my next project.
Web Performance is not only about understanding what makes a site fast. It’s about creating awareness amongst both developers and non-developers. Performance is a feature and needs to be prioritised as such. There tends to be a lot of money riding on it.
Tablet is a premium and Open Source dashboard template with responsive and high quality UI. It has so many modules and components that it could be used immediately off the bat with no customisation required. Built with Bootstrap and icons integrated into thew build, its definitely bookmark-able.
I have mentioned Crypto Currency before in this blog, and am a strong advocate of the idea. I have recently been following a project called Nimiq, which labels itself as “the blockchain designed for simplicity”. I agree with this, the wallet is easy to set up, transfers are so fast! and mining is so easy! Because of my belief in the project I have started work on a WordPress plugin for mining Nimiq. It is at early stages with lots of features in the pipeline. Take a look!
Web Designer Depot have written this great summary of what they thing the top 3 trends are of May. They have included some great examples of actual websites to go alongside their trends. Perfect website design inspiration.
Why You Should Never Centre or Right Align Your Logo
Many designers assume that centre or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.
As a designer in the digital era, you certainly don’t have to stick to the colours available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to colour. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.
Canvas covers Colour Theory is a way that makes it so easy to understand. Definitely on the bookmark list for me.
Priority Guides: A Content-First Alternative to Wireframes
A List Apart have put together this expansive article covering how Content-First allows you to better understand what is required on your website. They break down each stage to show how much simpler the concept is.
How paper wireframing will make you a better designer
This one goes against the above article. However, in a sense they also go hand in hand. The idea of moving away from from a computer and getting hands on allows a greater freedom of expression. You are not limited by the software and its toolbar. Worth the read.
This weeks creative & development inspiration covers some great articles, all the way from bad user onboarding and UX to using IBM Watson to analyse your social media. The most eclectic post so far.
4 Examples of Bad User Onboarding That Will Ruin Your UX
Starting off with this great article on bad user onboarding, Ty Magnin breaks down a few issues that are causing bottlenecks in getting users onto your service. It doesn’t just stop there either, if the user can sign up easily, they may hang around longer.
Gender pay gap: women in graphic design earn £4,000 less than men
Gender equality is something that is being spoken about in all industries. This article discusses the issues behind the gender pay gap for woman in design, and how woman in design get paid 6% less than their male counterparts.
Whilst researching different portfolio websites for styles and how the page load is managed I stumbled across NEA Media. The way the site loads and then animates up is really enjoyable, as well as the design across the whole site. Definitely worth a look.
“Let’s not be elitist about what we do”: should designers give away their secrets?
Pentagram partner Natasha Jen recently lambasted the term “design thinking” as “bullshit”, “jargon” and “extremely dangerous”. Designers share their thoughts on the concept and discuss whether teaching design skills to businesses is helpful or irresponsible.
Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js
Jamie Munro demonstrates how to perform a search with Twitter’s API to retrieve content that will be inputted into the ML algorithm to be analysed. This way, you’ll be provided with characteristics about the users who wrote that specific content so that you can get a better understanding of your audience. The example application will be written using Node.js as the server.
This week creative and development rundown is more development orientated. I have found some great packages to help enhance the user experience, as well as some alternatives to already well used solutions. Although a shorter list than usual, these items are far more usable, both in terms of using within a project and for learning more!
React Tutorial: A Comprehensive Guide to learning React.js in 2018
As the title says, this tutorial is a ground up guide to learning ReactJS. It is well broken down, and incredibly easy to understand. ReactJs is definitely a must for most front end developers. The majority of tech companies use it as a quick route to sale.
No one like having to make code work on legacy browsers. But sometimes it matters. The developers of Toast US couldn’t find a project which supported legacy browsers, maintained reliably, and was free for commercial use, so they decided to make one. It is well documented, and quite pretty! I will most probably be giving this a trial run on the next web development project that requires charts!
Animating Elements Along SVG Paths: Introducing PathSlider
This tutorial by Scotch is a really simple to follow SVG path animation guide. It used the PathFinder plugin, and anime.js, both very user friendly packages. Although not a groundbreaking example, it is a great gateway drug into SVG animations.
Rough.js allows you to create roughly drawn graphics within the browser. It is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.
Forms are of pivotal importance to individuals & businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.
Christmas and the New Year have come and gone and tens of millions of people around the world have made resolutions for the next 12 months. New Years goals about getting into shape are the most common, probably brought on by the binge drinking and food comas.
Unfortunately many people fall short of these aims. This isn’t to say that these people are lazy; rather their system is not working for them. It is one thing to say “I will run 3 times a week”, but that is not enough. You must use tactics that work to help you stick to your New Year’s goals, whether they are to run more, eat healthier or get a new personal best. Use this 4 point plan to get running this year.
1. Get a plan, Get a Program If you don’t have a plan in place then you are unlikely to achieve your goals. This saying can be used for all your resolutions, fitness or not! If you want to run a marathon in the summer make sure you know how to get to that stage.
It also helps to keep track of your runs, how long you went for, how far you ran. This doesn’t have to be anything smart and sexy; a piece of paper on the side of the fridge will do, as long as you can see your progress.
2. Shout about it Tell your friend, family, co-workers what you want to achieve. If you are constantly being asked how for you have progressed there is less of a chance that you will hang it up to dry. It also helps being proud about what you are doing, enjoying the run or the outcome can really help motivate then next one.
3. Make it work for you Convenience is the key. If you don’t have a gym in your office, or within 10 minutes of your house don’t get that membership. Driving to the gym is an inconvenience; it is too difficult to “try hard” to go to the gym.
Instead get up a little earlier and run before work. It is hard to skip a run when there are no other pressing obligations (aside from going back to sleep, I’ll leave you to not press snooze). If this doesn’t work, maybe take your running clothes to work and run home.
4. Make it a habit They say it takes 30 days to make something a habit. If you can start, and stick with it for 30 days then you won’t event notice when February rolls around.
Try and stay consistent as well. The number one way runners improve their performance is through consistency, one step at a time, one mile at a time, one day at a time. When you’re consistent, you develop and maintain a solid base of running fitness from which you can improve.
Life is short. Be pro-active about reaching your goals and keep pushing yourself to get better. You can succeed by changing little things in your routine to make your run easier.