Are you able to be the villain? What about if the product you are making has potential to harm? Also, on a more positive note. Here are some great examples of design systems, the state of UX in 2019, and more! Enjoy!
Designer Resources, Examples and Inspiration
Stop Showing Design Options and Commit
Normally create 20 different versions and let the client pick? But you are the expert, no?
They’re not going to be fun conversations. It’s not going to be easy convincing others that these aren’t paranoid delusions best tucked out of sight in the darkest, dustiest corner of the backlog. Realistically, talking about it may even harm your career.
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.
This week is a little more focused on UI design and development. And god damn they are pretty. Its all about those micro-interactions. On top of this, there are articles on Just In Time Design (it rhymes right!) and User Empowerment. Plus so much more! Enjoy this weeks design and development inspiration rundown!
Website Inspiration
BornFight
A digital agency that has been building websites and apps since 2009. Considering they have been doing it this long, I would have hoped the site would load slightly faster. However, it looks really good on desktop!
Another design and dev article curator. But this one is so much nicer. Build on Webflow, the auther only adds 5 pieces of content a day. Each from a different sector. Well worth a look.
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability. Only loads the ones you need.
autoComplete.js is a simple pure vanilla Javascript library that’s built for speed, high versatility and seamless integration with wide range of projects & systems.
Continuously delivering small iterations based on the team’s needs can transform the product development process. This approach shifts the focus away from highly-produced, out-of-date, difficult-to-maintain design, opening up the process to tighter collaboration and a higher standard of quality.
In our industry surveys help with understanding the end user. The issue is how companies go about getting the information. Sometimes a survey on a website that interupts the user experience just isn’t the best way!
Very few projects end up with exceptional results. HolaBrief makes it easy to ask all the right questions and nail your design brief every time. Built by designers, for designers.
A massive selection this week. 2 great website examples to help inspire your portfolio designs. Some great JS frameworks and testing tools. A few articles to help designers design the good stuff, and even more articles to keep you busy. Enjoy this website design and developer inspiration rundown.
Website Inspiration
Tom Rush
A Leeds based digital creative website. Tom has built a simple, easy to read, and quick to load portfolio that does a great job.
First Tom, now Tim. A lead designer at Transom Design in Seattle. His site uses lots of white space and grids to display his work. Clean, simple, easy to read.
Flow charts, like any deliverable in the design process, is an excuse to talk to your team. As much as we like complaining about meetings and formal deliverables, the truth is that design work would come to a dead stop without (a) conversations and (b) pictures.
A continuous UI testing tool that combines the accuracy of manual testing with the efficiency of automation. 21% of software budget is on bugs, and the cost of bug repair in production is 5-10x. This tool helps save time and money.
The magical disappearing UI framework. I still need to have a proper look into this but it seems really interesting. Using vanilla JS, but the same functionality as major JS frameworks. Teeny tiny in size.
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.
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.
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.
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.
Once again, installation is a breeze (yes, I like Grav). There are two ways you can manage this.
Log into your admin panel,navigate to plugins. Search the plugin. Click add.
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.
This is the 50th Creative and Development Inspiration rundown. That is almost a year of finding best practise articles, and not updating my site to have SSL (I only sorted it yesterday, what a ballache). In any case, this week has been a great one for web articles. From best UX practices, to setting website goals, to infinite scroll, and back to web accessibility. This weeks design development rundown is an eclectic mix.
Website Inspiration
Franco Manca
Kicking this week off with the website inspiration. A website for sourdough pizza. Simple, easy to understand, with subtle (and not so subtle CSS animations). Someones websites don’t need to be astounding to do a great job.
UX Design Practices: How to Make Web Interface Scannable
Scannability is one of the most essential factors of website usability. We have so much content at our fingertips, more than as can consume. Due to this websites need to be designed in a way to get the information easily and quickly, so we can go back to Twitter.
User Experience: How to Improve Your Website UX with Humor and Cuteness
Building a website is all about your users. You need to be aware of your audience and you build your brand identity around them. There are thousands of ways to approach and enhance your website user experience. One of the strategies we are often presented with is using humor and cuteness added to your website style.
Taken from Design Sprint: A Practical Guidebook for Building Great Digital Products. This article breaks down how to maximise the chance of making something people actually want.
Is Gutenberg the End or a New Beginning for WordPress?
I would argue yes, maybe, depending on the user. Iain from Delicious Brains has a lot of say on the issue. Well worth the read if you are a user of WordPress
I’ll be honest. I was surprised when I saw this article, as I had no idea people still developed sites with infinite scroll. Turns out they do. Please, please stop.
Sold as an all in one visual testing solution, Percy takes screenshots of your site when a new version rolls out. If there any any issues, Percy will tell you!
Today’s content can consist of VR, animation, data visualisations, and video games. As well as the more standard HTML tags. This means a broken experience for those who rely on assertive technologies. How can this be changed moving into 2019?
Components are not static. They resize and move with the page. So why are designers designing them as such? Is it due to the tools evolving from a print background?
In Design and Development Inspiration 58 I covered the 2 part of this article. Here is the third. A real look at why Uber should get gone (they don’t know what is going on it seems).
Big reveal research does not work. As in, one person going away and doing all the work, ending in a presentation does not allow the team to immerse in the user information. The team must be there from the start.
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.
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.
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.
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.
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.
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
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!
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.
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?
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
