Skip to main content
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.

 

Inclusive Web Banner

The Inclusive Web – Why It Should Matter to Businesses

What is Web Accessibility?

Web Accessibility is about designing the web so that everyone can use it. The web is a resource that is used across all aspects of life. Education, employment, government, health care, the list goes on.

 

The United Nations Convention define the web as a basic human right, which is understandable. The right to work, the right to access to education, the right to participate in culture; all connected and obtainable through the web. An integral part of society and daily life. If a user is denied access to the web, surely their access is limited to the fore-mentioned.

 

However, in a broader perspective web accessibility benefits all users. For example, one of the key principles in accessibility is to meet certain users needs and situations. This could range from a physical or mental disability, to having a slow internet connection. Web Accessibility is about being fully inclusive of each and every user.

 

So why is the article called ‘The Inclusive Web’, not ‘The Accessible Web’? Because that’s exactly what it should be. Your site should not be designed, and then accessibility factored in afterwards – the whole approach should be a unified, considered, and inclusive of everyone.

 

Why Should Businesses Care About Web Accessibility?

It’s a fair question. At the end of the day businesses (at least most of them) are in it for the profit. If making their site accessible costs money, with no obvious return, surely it isn’t worth it?

 

People with disabilities are a large market segment

19% of adults working in the UK age are disabled. That is almost 1 out of 5 people that may be in a situation where they are unable to view, or navigate a website not built with accessibility in mind. If there is a perception that an organisation doesn’t support the disabled, the fallout can be disastrous. I never thought I would mention her in a blog post, but a perfect example is Kylie Jenner’s cosmetics website being sued for not being accessible – not a good look. Not only that, having a fully inclusive website open the doors to a much larger market. An almost 20% larger market.

 

Every business has customers with accessibility needs. The thought that a business doesn’t is categorically false. Unfortunately, there are no statistics to see which of user are disabled, so a business is unable to see how many of its customers are being turning away.

 

Search Engine Optimisation

It goes without saying, fully accessible websites have better search rankings.

When designed accessibly, the site is more user friendly for all users. The font is larger, which makes it easier to read. How many times have you been on a website with size 12 font, in a terrible type face. I tend to read half a sentence and leave. It is just too much work! Not only that but the messaging is simpler, once again, making the site easier to digest. Already the time spent on the page has increased and reduced the bounce rate.

 

Images have fully thought out alt tags, and all elements within the site are properly labelled. This means that suddenly Google (or whomever) has so much more content to get hold of and index.

 

Key word ranking (if done properly) increases. Why? Because 19% more people can use the site! This is a big thing!

 

On top of all of this remember, Google doesn’t have eyeballs! The easier a site is to screen read, the better the businesses SEO score will be.

 

Ahead of the Curve

Currently, less than 30% of the websites on the internet are Americans with Disabilities Act (ADA) compliant. Now although not a UK act, the requirements exist. Users with accessibility needs use the internet in the UK. This lack of uptake means there is a high chance a business’s competitors are not inclusive. By ensuring their website is compliant, this provides a real opportunity to increase thei market share and have a better competitive edge!

 

Lawsuits

In America companies are facing an alarming number of lawsuits for websites and mobile applications that are not accessible. The belief is that the ADA should apply to website, and that they should be accessible across all devices. Currently these lawsuits are only happening in the States, but I can believe that this mindset will cross the pond.

 

So why is it that so many large businesses, both in B2B and B2C are not fully accessible?

This stems from a lack of understanding and availability of information on the subject. There are no statistics on what percentage of users visiting a business’s website are disabled, which may make it tough to justify the extra expenditure. It may also be that agencies that businesses use for web development are unaware of the benefit of an inclusive website, so do not provide it as a service.

 

However, the facts on SEO and related analytics are not so easy to ignore – if a business has an existing digital marketing strategy, accessibility should surely be integrated to achieve the best results.

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

Fixed Menu Banner

To Sticky or Not to Sticky

Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?

 

Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?

 

Excited? I know right.

 

I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉

 

A sticky menu is quicker to navigate

https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

Pro

Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.

Con

However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?

 

Top 5 Common UX Mistakes

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

Pros

There are benefits, but only when considered correctly.

Cons

If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.

 

The Pros and Cos of Fixed Header Bars

http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/

Pros

They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.

Con

If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.

 

Summary

Users seem to prefer fixed headers, but only if they are implemented correctly.

The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.

When being used on very small devices, headers need to be hidden to provide a larger content space.

The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.

Card 2.0 Web Banner

Creative / Development Inspiration 45

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/

Design audit banner

Creative / Development Inspiration 44

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

Kollegorna Banner

Creative / Development Inspiration 42

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/

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/