Website Guru

Tell me something interesting, oh Guru

I enjoy making websites, and wanted to share some of my knowledge – this is the Guru page where you will find useful information, and resources that you can use to create your own awesome websites

The best place to learn about what looks good on the web is by exploring the web itself, take a look at your favourite websites and sit down and look at what you like and dislike about them. What do you find easy, is the navigation hard to find, is posting something easy to do, and how does it look? Is the whole thing a jumble, or is it laid out with plenty of white space to allow your eyes to rest upon the space in between the content

And play, just play around with layouts, colours, spacing and images, and share what you like, show your friends and family. They will be keen to give you feedback. Be prepared not to like what they say, learning to listen to what people say about your designs is hard, and a real strange feeling at first. But ask them what they like and don’t like, and use that to see a way forward to improving your design. Also check out some of the books in my recommended reading section, and most definitely peek at the collection of awesome information about famous design patterns and principles in the table below. Enjoy.

Explore more, using the menu below

(directionally aware hover menu)

(this is a directionally aware hover menu on a desktop – check it out some time)

Something Else

I’m working on it, nothing to see here… yet

Something Else

I’m working on it, nothing to see here… yet

Something Else

I’m working on it, nothing to see here… yet

Something Else

I’m working on it, nothing to see here… yet

Design Principles

Here is a list of resources I have compiled from various sources recently. Enjoy.

Air BnB How rethinking the Airbnb app changed the way we approach design

The way we build


BBC BBC GEL (Global Experience Language) guidelines

BBC GEL Design Patterns

Co-op “Our digital design principles reflect how we think about design. They provide a way for us to look at the work we create and how we create it: building the right thing; building the thing right.” The coop design
Google Design At Google we say, “Focus on the user and all else will follow.” With this in mind, we seek to design experiences that inspire and enlighten our users Design.Google
Government Design Principles The UK government’s design principles and examples of how they’ve been used.

Service Manual

Design principles

Material Design A visual language that synthesises classic principles of good design with the innovation and possibility of technology and science. Introduction
Principles of Calm Technology When we design products, we aim to choose the best position for user interface components, placing the most important ones in the most accessible places on the screen. Equally important is the design of communication. How many are notifications are necessary? How and when should they be displayed? To answer this, we can be inspired by the principles of calm technology. Calmtech
Principles of User Interface Design Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. The act of designing interfaces is not art and they are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world. Principles of UI Design
The Ten Principles of Inclusive Web Design Inclusive Design is where innovation and imagination flourish. Meeting the needs of the widest variety of people does not inhibit creativity. It opens our minds and inspires excellence. Principles of inclusive design
UI Patterns User Interface design patterns UI patterns
W3 Principles such as simplicity and modularity are the stuff of software engineering decentralization and tolerance are the life and breath of Internet. W3 Principles

Intro to SCSS

I’m a big fan of SCSS (SASS/SCSS are known as preprocessors), it is super charged, super powered CSS that makes life so much more flexible when designing websites.

You are given much more power over your CSS such as nesting, variables, calculations, and that are then processed to produce CSS for the browser to understand.

SCSS saves you a lot of donkey work that CSS creates, it means you don’t have to repeat classes each time, you nest within a parent class and it targets everything within it. You can perform mathematical functions and calculations, if/else statements, loops and structure your files to import smaller partials that focus only on a certain area. You can also create reusable mixins that are referenced throughout.

SASS has prebuilt functions, you can find more about them here: SASS Functions