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.

Adobe XD Auto Animate Banner

Creative / Development Inspiration 57

Website Inspiration

Andy Allen

Portfolio of a designer. Simple. Quick to load. Gets to the point.

http://www.andyallen.co/

 

Designer Resources, Examples and Inspiration

Adobe XD Auto Animate

It’s a fight to see who can get the best product out. Sketch is doing well, but Adobe keep upping their game. The newest feature seems pretty exciting!

https://www.behance.net/gallery/72065227/Auto-Animate-UI-Kit

 

How To Improve UX of Web Forms

By creating forms, you build an interface where dialogue happens. So, the goal here is to make sure that the form asks the right questions at the right time.

http://maxsnitser.com/blog/how-to-improve-ux-of-web-forms

 

Development Snippets, Samples, and Articles

An Empathy Lesson & Test on Accessibility for Developers

This article walks through 5 reasons why accessibility is so important when creating websites

https://www.ronaldjamesgroup.com/article/an-empathy-lesson-test-on-accessibility-for-developers

 

Rallax.js

I personally use a libary called Rellax. So when this came out I was pretty intrigued. Small. Vanilla JS. Dynamic parallax without dependencies.

https://chriscavs.github.io/rallax-demo

 

Coder

This web app looks like it is going to be a life changer for me. The full code editor, in the cloud. Starting with 3GB free, before any money is needed.

https://www.coder.com

 

WordPressify

A design system to automated your WordPress development. Looks a dream!

https://github.com/luangjokaj/wordpressify

 

A bit of everything

Only One Deliverable Matters

Too many people get precious about those documents—I know I’ve been guilty of it. Somewhere along the way, detailed wireframes, high-fidelity comps, and motion prototypes all got enshrined as critical deliverables. Those design artifacts are unimportant. Only one deliverable matters: the product itself.

https://bigmedium.com/ideas/only-one-deliverable-matters.html

 

Social Media Image Resizer

Need quick, clean image resizing? Promo has you covered.

https://slide.ly/promo/image-resizer/

 

Hand tremors and the giant-button-problem

This article looks at the accessibility problems with buttons, and how those with hand-tremors struggle with bad UI.

https://axesslab.com/hand-tremors/

Humaaans Illustration Design System

Creative / Development Inspiration 56

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?

https://medium.com/slite/stop-showing-design-options-and-commit-595d80bdb4aa

 

The State of UX in 2019

We have seen quite a lot this year. Here’s what to expect for UX in 2019.

https://trends.uxdesign.cc/

 

Humaaans

Mix and match illustrations of people with a design library. Definitely bookmark this!

https://www.humaaans.com/

 

A UX Guide For Designing Error Pages

404’s & maintenance pages. Use this checklist before you get started.

https://blog.prototypr.io/a-ux-guide-for-designing-error-pages-fb9ced1f1c8a

 

Development Snippets, Samples, and Articles

Why You Shouldn’t Split Test During an eCommerce Redesign

Comparing the performance of the old and new site isn’t as useful as other exercises during the redesign process you can run. Don’t split test this!

https://www.goinflow.com/ecommerce-redesign-best-practices/

 

Awesome Design Systems

A collection of design systems, some open source. All the way from Audi, to Cloudflare. Some great examples.

https://github.com/alexpate/awesome-design-systems

 

React Create

Simple library to create component templates for React and React native projects.

https://github.com/obiwankenoobi/create

 

Tiny Details: A Look at Hamburger Menu Reveal Transitions

Examples of the hamburger menu done well, and also not so well. A few nice takes here.

https://speckyboy.com/hamburger-menu-reveal-transitions/

 

A bit of everything

Be the Villain

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.

https://24ways.org/2018/be-the-villain/

 

8 Lessons from Creating a Design System

Mono created a design system. Here is what they learnt along the way!

https://mono.company/design-systems/eight-lessons-from-creating-a-design-system/

 

Raindrop.io

Think bookmarks, but your your team. Build collections of assets, or working on a new job that needs inspiration. Raindrop makes it simple.

https://raindrop.io/

Dogs on CodePen Banner

Creative / Development Inspiration 55

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!

https://newtodesign.com/xd-wireframe-kits/

 

Accessibility before Aesthetics

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.

https://uxplanet.org/accessibility-before-aesthetics-9a0fb463e149

 

Montage

Fast, easy prototyping for everyone. Using a user-generated library of components, designs can be got of the ground quicker than ever.

https://www.trymontage.com/

 

Rememberly — A UX case study to help people affected by Alzheimer’s and Dementia

A brilliant case study for a apps UX that needs to do its job.

https://medium.com/tj-egbert-design/rememberly-a-ux-case-study-to-help-people-affected-by-alzheimers-and-dementia-6a5c17a1e690

 

Development Snippets, Samples, and Articles

Zeroheight

This brings the design system closer to everyone involved. Starts with the designers, then can be fleshed out by the developers. Edited by everyone.

https://zeroheight.com/

 

The Dogs of CodePen

10 animated dogs. Thats all.

https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/

 

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.

https://www.smashingmagazine.com/2018/11/structured-content-done-right/

 

Getform

Not enough time to build in a form? Use Getform! Backend platform for designers and developers.

https://getform.io/

 

FreeCodeCamp – JavaScript Platform Game Tutorial

Lear how to build a Maria like platform game with this 3 hour video tutorial!

https://www.freecodecamp.org/news/beaucarnes/platformer-game-turorial-javascript–m1JO9zlF4

 

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.

https://baymard.com/blog/drop-down-usability

 

A bit of everything

Deep Dive Duck

Need to keep an eye on your competitors? Monitor changes on their site and get it set to you in a weekly email!

https://deepdiveduck.com/

UX UI Website Examples

Creative / Development Inspiration 54

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!

https://www.bornfight.com/

 

Designer Resources, Examples and Inspiration

Design Dots

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.

https://www.designdots.co/

 

UI UX Interaction Design Week 16

A collection of UI and UX interfaces. Some great examples of websites done right.

http://gillde.com/ui-ux-interaction-design-week-16/

 

Building Your Colour Palette

An article on how to build a website colour palette. Well written, helps get the job done.

https://refactoringui.com/previews/building-your-color-palette/

 

User Empowerment Through Design

It’s not just about creating stunning visuals anymore, users are seeking whole experiences that make them feel more powerful and complete.

https://www.imaginarycloud.com/blog/empowerment-through-design/

 

The UX of Registration and Login

Two of the biggest barriers to entry. Registration and Login. If not designed right can lose a lot of users.

https://www.twotalltotems.com/blog/index.php/2017/12/20/the-ux-of-registration-and-login/

 

Mobbin

A collection of hand picked mobile design patterns that reflect the best in design. A definite bookmark.

https://mobbin.design/

 

Gestalt-Driven UX: The Patterns That Drive Our World

Gestaltism is a holistic philosophy that studies how humans recognize patterns and simplify complex, disparate information.

https://hackernoon.com/design-psychology-gestalt-driven-ux-64ac01cd257a

 

Development Snippets, Samples, and Articles

Feather

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.

https://github.com/feathericons/feather

 

autoComplete

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.

https://github.com/TarekRaafat/autoComplete.js

 

A bit of everything

Just In Time Design

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.

https://matthewstrom.com/writing/just-in-time-design.html

 

No I Don’t Want To Take Your Survey

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!

http://gerrymcgovern.com/no-i-dont-want-to-take-your-survey/

 

HolaBrief

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.

https://www.holabrief.com/

Users love dark products like this

Creative / Development Inspiration 53

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.

https://tomrushworth.co.uk/

 

Tim Householter

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.

http://timhouseholter.com

 

Designer Resources, Examples and Inspiration

In the dead of night we are drawn to dark interfaces

Distraction free, pretty, and amplification. What dark interfaces are a massive thing in product design.

https://uxdesign.cc/in-the-dead-of-night-a4c7fa98aec4

 

Development Snippets, Samples, and Articles

Grid Tile Layouts with auto-fit and minmax

A new and easy way to make perfect responsive title layouts with CSS Grid.

https://gedd.ski/post/tile-layouts/

 

Building Your Colour Palette

You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colours to choose from.

https://refactoringui.com/previews/building-your-color-palette

 

Creating Excellent UX Flow Charts

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.

https://medium.com/eightshapes-llc/creating-excellent-ux-flow-charts-df6f1e46e524

 

Google Web.Dev

With actionable guidance and analysis, web.dev helps developers like you learn and apply the web’s modern capabilities to your own sites and apps.

https://web.dev/

 

Glorious Demo

The best way to create animated code for demos. Copy, pastable, and pretty.

https://glorious.codes/demo

 

Chromatic – UI testing for Storybook

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.

https://blog.hichroma.com/chromatic/home

 

Maizzle

Maizzle is a BYOHTML framework for rapid HTML email development. It’s like a static site generator, but tailored to email.

https://maizzle.com/

 

Svelte

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.

https://svelte.technology/

 

Why using `tabindex` values greater than “0” is bad

Using Tab Indexes in web development? Maybe you should stop doing that…

http://www.karlgroves.com/2018/11/13/why-using-tabindex-values-greater-than-0-is-bad/

 

A bit of everything

Web Typography Resources

A great list of resources all centred around typography. Perfect for designers and developers.

https://betterwebtype.com/web-typography-resources

 

Cacher

The code snippet organiser for developers. Integrates with most editors to store commonly used snippets from the whole team on the cloud.

https://www.cacher.io/

 

Heat maps 101: a complete guide with examples, tools, and case studies

Hotjar walk you through why, how and when to use heat maps. Mixed up with a few case studies and examples to show how valuable they can be.

https://www.hotjar.com/blog/heatmaps

 

Designing, laws, and attitudes.

I often hear from stakeholders who worry that “accessible” means “ugly.” Well here are resources that are accessible and visually beautiful.

https://ethanmarcotte.com/wrote/designing-laws-and-attitudes/

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

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.

 

Web Character from Pub and SVG

Creative / Development Inspiration 50

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.

https://www.francomanca.co.uk/

 

Designer Resources, Examples and Inspiration

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.

https://uxplanet.org/ux-design-practices-how-to-make-web-interface-scannable-2010125c710e

 

7 Ways to Design For a Global Audience

How you design a website that doesn’t have a clearly defined target audience? Web Designer Depot walk through 7 different steps.

https://www.webdesignerdepot.com/2018/10/7-ways-to-design-for-a-global-audience/

 

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.

https://icons8.com/articles/user-experience-improve-website-ux-humor-cuteness

 

What is a Design Sprint

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.

https://www.freshtilledsoil.com/what-is-a-design-sprint

 

Development Snippets, Samples, and Articles

Mouth Expressions with Pug, SVG ad GSAP

Bringing some character to Codepen, Alessandro Falchi as created this brilliant animation that jumps between moods.

https://codepen.io/afalchi82/pen/OBjKyZ

 

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

https://deliciousbrains.com/wordpress-gutenberg

 

Stop Building Websites With Infinite Scroll!

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.

https://logrocket.com/blog/infinite-scroll/

 

Percy.io

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!

https://percy.io/

 

Web Accessibility for 2019

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?

https://blog.sourcerer.io/building-web-accessibility-in-2019-b4bf16ef5754

 

A bit of everything

 

Making Your Design Systems Dynamic

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?

https://uxdesign.cc/making-your-design-systems-dynamic-644cf1c7d33f

 

Uber’s Undoing Part III: Redemption

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

http://www.elischiff.com/blog/2018/10/24/ubers-undoing-part-iii-redemption

 

The Modern Web Design Process: Setting Goals

The first step to a successful website, is working out the point of the website. This seems like common sense, but apparently not.

https://webflow.com/blog/the-modern-web-design-process-setting-goals

 

User Research is a Team Sport

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.

http://www.myddelton.co.uk/blog/user-research-is-a-team-sport