Bits and Pieces

I write about React, NextJS, Accessibility, Reusable Components, and general website development and design topics.

Bikjoring Motivation

Cinnamon Buns




Organise Gatsby Queries with GraphQL Fragments

We solve a real-world challenge in a client project where we create a page that queries a large amount of GraphQL data within Gatsby in an organised method.

Use Cases - Discovering and Understanding Requirements

Owning The Business Internal Infrastructure

Hack For Good

Use Cases, User Journeys and Understanding Your Enterprise

Reviewing Porter's 5 Forces In Modern Business

What is Strategic Thinking?

The Impact Of Online Solutions To Businesses in the United Kingdom

HackSoton X (2019)

WordPress to Gatsby

This post shows how to get a truly bespoke developer experience that gives your clients control whilst using the latest frameworks and tools available.

Animation For The Web

Return of the Jack

Return of Jack! With a new name, new business and new course at University, I am returning to my personal brand with full-power!

What is Gutenberg?

Gutenberg is a new WordPress editor that has divided the community more so than the debate of whether pineapple should be allowed on pizza!


ShareUp 5 - Learning and Discussions

ShareUp Soton 5 went excellent, the residency ShareUp crew turned up ready to show off what they've made and set some content goals for the coming weeks.

How to enable WebP in WordPress

I am still in shock and awe at the presence of the WebP file type. The benefits the image provides can be achieved by any developer using a fallback!

WebP Image Format

WebP lossy images support transparency, are on average 25-34% smaller than JPEG images and 26% smaller in comparison to PNG images.

Compress Presentations

I often upload presentations for those who couldn't attend or attendees of events I talk at. I ran a little experiment on how to compress presentations.

3 Common Pitfalls of Growth Hacking

Growth hacking is a buzz word term that is linked to the promotion of a product or service. To me, growth hacking is marketing but by uncommon methods.

Winchester Creatives June 2017

Winchester Creatives is an event hosted in the heart of Winchester by 'Studio Republic'. I presented there in June on a topic that I feel passionate around.

The Hive

The colours applied to the abstract piece of art named 'The Hive' follow a candy theme, the colours are light, joyful and glow gently.

Rocket League Loading Screen

I love the simplicity of the loading screen design for one of my favourite games Rocket League. So why not create a codepen dedicated to the screen itself?

Magnet Stand

Magnet Stand was constructed using various shapes that have become distorted and transformed into fluid objects, covered in pink and purple gradients.

Solent University - Poster Day

On the 24th of May, I decided to go and visit Solent University to attend the poster day of those studying courses related to computing.

Rebuild Part 10: Going Live!

For what feels like it's been months of coding and learning, it is finally over (all within a month). My website is ready to go live!

Rebuild Part 9: Tests and Comparison

Before I run the tests and compare it against the original results, I first reflect on what the original goal of this project was.

Rebuild Part 8: Cross Compatible (Browser Support)

It is time to test the website outside of the Google Chrome browser and see how well the CSS fairs across the primarily used browsers.

Rebuild Part 7: Laptops and PCs (Desktop)

In this post, I will be talking about how I have rebuilt my website for Desktop, this will also cover laptops, PCs, tablets, etc.

Rebuild Part 6: Mobile First

I will show you how I rebuilt my homepage to become mobile first both in the number of requests required and overall file size.

Rebuild Part 5: Automation

My personal website centres around imagery more than the average website. If only there was a way I could add automation of keeping the file size low...

Rebuild Part 4: Plugins

Plugins, after looking at the current build of my website, it is easy to get tunnel vision on the theme of my WordPress site

Rebuild Part 3: Setting up a blank canvas

When I start any project, I like to have a blank canvas from which I can build upon. My personal website was no exception.

Rebuild Part 2: Goals + Agenda

I thought that before beginning the rebuild of my website, it'd be best to outline some of the key goals that I want to achieve as part of the process.

Rebuild Part 1 : Table of Contents + Running Tests

Welcome to my 10 part series of posts on how I improved the performance of my website, in this post I will be covering a table of contents on what to expect

Third Chance

Third Chance is an abstract piece of art I created using images of sunsets and distorting them beyond repair. This piece of art draws a line in the sand.


This piece of art, titled 'Carnage' was constructed using a stock photograph of a volcano that has been distorted beyond recognition.

ShareUp 4 - May The 4th Be With You!

After hibernating through winter, ShareUp returned in full force with a high turnout from attendees for ShareUp 4.

Illustration - Natural Clutch

Natural Clutch is the second liquid-styled poster I have created using the liquify tool on Adobe Photoshop. Prepare for a tutorial soon.

Illustration - Mowgli

Mowgli is an illustration I created using vector lines and distorting them with zig-zag effects, the name Mowgli itself is random and unrelated to the work.

Illustration - Eye Candy

Eye Candy is the first liquid-styled poster I have created using methods I had learnt from Skillshare. I may do a tutorial on how to achieve this effect.

Why did I create my new website webjack?

My latest website is where I showcase the projects that I've been working on in the past, that I see as of some significance.

Apocalypse Gang

Apocalypse Gang is a mixture of both liquify effects and vector graphics. One of my personal favourite pieces due to the candy-like rainbow colours.

Attending My First WPBournemouth, April 2017

I got to attend WPBournemouth, WordPress Bournemouth is an informal and friendly meet up for WordPress users, enthusiasts, and professionals.

All Day Hey! April 2017

I was fortunate to attend the 'All Day Hey!' event in Leeds during April 2017. The event is an all day conference around the subject of website development.

Can we identify our style?

4 hours sleep, 10 hours on the train and 4 coffees into my day and I decided to discuss style and how we can create our own style.

Building a Website with 100 Google Pagespeed Score

In the recent months, page speed is something that I have become rather interested in. Not only because of the effect it has on SEO but also UX.

HackSoton 2017

Recently I had attended HackSoton, a day for anyone who wants to be inspired by how technology can help produce fun and innovative ideas.

Abstract - Devils Tape

The original photograph used before being manipulated was that of a piece of sellotape under a microscope at a 10x view. It created a cool bubble effect.

Illustration - LuckyMe

Lucky Me was made using several vector shapes, sliced up into triangles and with gradients applied. I also applied some light noise to lower sharpness.

Illustration - Breakneur

With a photograph of a dandelion, I used the Adobe Illustrator image trace tool to produce outlines based on lighting, I then applied a tonne of distortion.

Simple, Fresh Signup Form

The task set by briefbox was to create a signup form using basic information like name, address, email, date of birth, and so on.

Illustration - 5%

5% is a poster that is meant to reflect the current state of mental health internationally. 1 in 20 of the population suffer from depression problems.

Wedding Invitation Template - Landing Page

I took on the challenge of designing a fluid landing page that can be tailored to any wedding invitation website landing page.

Animation - Loading Glass

I felt inspired to have a go at creating my own animation. Loading glass is a simple five-second animation that I have created in Adobe After Effects.

Pure CSS Loader

It had been a while since my last codepen, so I decided to create a simple CSS loader. I want to see what else I can produce using pure CSS techniques.

Abstract - Cicely

Made with a thread of string, frayed apart. Cicely is microscopic art made with a friend, who's middle name is Cicely, and therefore dedicated to her.

Illustration - Fai

Fai is an interesting illustration made using an SVG maze generator to produce outlines, these outlines are then given brush effects and colouring.

With Love - Mobile Dating Application

The concept behind "With Love" is a simple mobile application, sparking the old flame that has long been forgotten in the dating world.

Starting Class - Browser Compatibility

When I first started developing for the world wide web, I was very close minded about how browsers read my code. All browsers have differences reading code.

Growing Class - Image Compression

Image compression is something that I definitely overlooked when I had passed my beginner phase of development for the web.

Starting Class - Online Resources

If YouTube is your only source of knowledge, then you are never going to be too far ahead of the crowd, you will need to be looking around for resources.

Long Exposure Lighting // Festival of Light

To celebrate the opening of West Quay's food court, West Quay hosted the 'festival of light' exhibition which boasted beautiful displays.

Hire and Hired Talk - Solent University

An informative talk at Solent university about the journey from both a student and employers perspective and how a work placement was created.

Reasons.London - February 2017

Fortunately, I was given the opportunity to attend Reasons.London on behalf of Moov2 and have a mental refresh of what it means to be a creator.

Starting Class - Velocity

This starting class will discuss documentation, and how it allows you to understand the full potential of your code and the functions available to you.

Machine Pressure

Machine pressure is the product of an animation project I've been working on, the aim of which was to make a perfectly looping GIF image.


Bokeh is an animation that I have created using footage of microscope recordings of fruit and kaleidoscope effects in Adobe After Effects.

Starting Class - Atom Text Editor

In this video, I will be going over my personal favourite text editor program and the options/benefits you have when using it.

Pixel Boom


M4K3 is a representation of dark emotions pushing forward a creative and productive mind, always making to subdue emotions.


'Howwouldyouknow?' is an abstract piece of art, similar to the Rorschach Test it shows ink blot effects that may resemble silhouettes to individuals.

Long Exposure Traffic

After a long day of work, I went on a photography shoot to get some long exposure shots of traffic close to the city centre of Southampton city.

Eyes Closed

Eyes Closed, decorative pebbles mixed with X-Ray effects, the piece shows that even when others aren't judging, you cannot prevent yourself from judging.


'Backtoback' is one of my favourite pieces of art, with a strong burn from the centre of an eye figure to the fray caused by the feathers.


'INDO44' is one of my favourite pieces of scanography, even the simplest items can create an almost historic ruin effect when manipulated in Photoshop.


'MGMA-25' was made using a photograph of holly leaves that I had taken in the woodlands when experimenting with time-lapse filming.


'IIAH98' was made using several jewellery accessories aimed at steampunk themed jewellery. The outcome is a dystopian mess of cogs and machinery.

Farewell to the Airground

'Farewell to the Airground' is a title to a set of photographs taken in the South of Wales, during my studies at Swansea Metropolitan University.

Wilf Hertz - Isolate

I made a music video for a local producer in Southampton that goes by the name 'Wilf Hertz'. The video was made using microscopic footage of a strawberry.


I bought some flowers with the sole intention of using them for my scanography projects, the outcome is beautiful, I even put them in a vase afterwards.





Crisp Janabelle


Illustration - Speak Colours



Stigma was the result of experimenting with different pieces of software and photographs or photocopies of abstract acrylic paintings.


Virtue reminds me of old carpets you would often find people disregard. I happen to find those carpet patterns beautiful and this art piece follows suit.

Glass Thoughts

New Directions

Illustration - Disruption

Fullstack Hampshire

A place for all developer job fields to learn something new and apply it to their day in, day out jobs.

Illustration - Tracks

BIMA Digital Day

Moov2 took part in the BIMA Digital Day at Itchen College, the day focused on getting IT students involved with the digital world.

Tangerine Nightmare


Screw Space

Broken Son

Cracked Marble

As the title says the image was composed of a microscopic shot of a marble ball I had cracked. The image was then manipulated to give a symmetrical result.

Materialette - Flat UI Colours

Get tired of opening your browser every time you want a colour for your flat or material designs? Fear not, the solution has been made!

SVG & Media Queries

Hopefully, in the future, we will see other uses of creating media queries for SVGs. Now we are aware of media queries and SVGs capability when combined.

CSS Shorts - CSS Circles

To kick off my new CSS Shorts series, I will be looking at how to create a circle with pure CSS and HTML.

Employability Talk at Solent University

I was recently invited to Solent University to give a talk on employability, university and how to achieve a work placement.

ShareUp Soton

A couple of new faces, a couple of new ideas and a couple of drinks were the perfect combinations for a pool of creativity and discussions.

ShareUp Soton

The 1st ShareUp Soton was a great success! With a load of interesting discussions around content creation from creative individuals in the local area.

CSS Secrets - The CH Unit

It is believed from many sources that the optimal characters read per line falls under somewhere between 50 - 60. Find out how to fit that target with CSS!


Molten was made using the glitch processing toolbox, I imported an image into the 'drawing generative' process and created some groovy textures.

Stretched Space

The abstract experimentation titled 'Stretched Space' was made by various distortion techniques, manipulating a photograph of a microscope view of a button.


Simply titled 'Strawbone', this abstract piece of art was made using the microscopic footage of a strawberry that was finely sliced.


Groggy is an ugly piece of art that I made with a strong headache, mainly due in part to my medicine. I made it as a distraction from a headache.

Monday Scoping

On a Sunday afternoon, I pulled the trigger and purchased a microscope that uses my smartphone with. The following Monday I recorded the following footage.

Accessibility and the World Wide Web (Part 1)

In the UK there are over 11 million people with some form of disability (Disability facts and figures, 2014). That is over 15% of the overall population.

Daily UI Day 011 - Flash Message (Error/Success)

The task set by Daily UI was to 'Hint: Design a Flash Message with both the outcome for an error and success. Is it for a sign-up form?'

Daily UI Day 010 - Social Share

The task set by Daily UI was to "Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing."

Daily UI Day 009 - Music Player

The task set by Daily UI was to "Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc."

Daily UI Day 008 - 404 Error Page

The task set by DailyUI was to design a 404 page. Some aspects to think about were 'does it suit the brand's style? Is it user-friendly? (It's up to you!)'

Daily UI Day 007 - Settings Screen

The task was to design settings for something. Is it for security or privacy settings? Game settings? What is it and what's important? (It's up to you!)

Adobe Illustrator - Transform Tool

In this tutorial, I will share with you the most powerful tool in Adobe Illustrator, the transform tool! I use this tool to create complicated shapes.

Daily UI Day 006 - User Profile

The task was to design a user profile and be mindful of the most important data, names, imagery, placement, etc. (It's up to you!)

Daily UI Day 005 - Icon Design

The task was to design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance?

Daily UI Day 004 - Calculator

The task was to design a calculator. Standard, scientific, or speciality calculator for something such as a mortgage? (It's up to you!)

Daily UI Day 003 - Landing Page

The task was to create a landing page and to consider important landing page elements (call-to-actions, clarity, etc.) (It's up to you!)

Daily UI Day 002 - Credit Card Checkout

The task was to design a credit card checkout form or page. I was sure not to forget important elements such as the numbers, dates, security numbers, etc.

Daily UI Day 001 - App Screen

The task was to design a sign up page, modal, form, app screen, etc. I chose to create an app screen for finding the quickest route from A to B.

Textured Thursdays Pack

As per a weekly scheduling, the 3rd pack for Textured Thursdays is now available for download, included are a preview and download for the pack.

Textured Thursdays Pack

As per a weekly scheduling, the 2nd pack for Textured Thursdays is now available for download, included are a preview and download for the pack.

Sass or SCSS?

Which is better? Sass or SCSS? Find out the advantages and disadvantages as well as strong recommendation to decide.

Liquid Lions


Find out what re:cognition has to offer, this fun weekend focused on experimenting with natural interaction and cognitive services.


Colourgrain is one of my personal favourite pieces of art, the combination of vinyl like textures and a muted pastel colour tone combine amazingly.


Onslaught is the product of a photograph sourced from Unsplash of a fireplace, this photograph was then run through pixel processing effects and coloured.


Nepta reminds me of a liquid honey-like substance, however, the colours are almost the opposite of the colour yellow and bring a sea like essence to it.

Simple Example of How Sass Can Speed Up Your Workflow

Sass is a file extension that converts into CSS and allows for a new, and most will agree improved way of coding for CSS.

Update on Topics and Setup

Update on moving property, changing jobs, changing topics. It's all happening and find out why and what is going to come as a result.

Edit Object Colours in Bulk in Adobe Illustrator

In this tutorial video, I explain how to modify colours that are being applied to objects. You can even import colour themes to your illustrations.

Colour Themes in Adobe Illustrator

In this video, I will show you how to find and easily import colour themes into your Adobe Illustrator projects using Adobe libraries.

Welcome to my first logo tutorial, where I will be covering how to produce a hexagon logo! Let me know what you think after watching!

CSS Secrets - Remove All Default Anchor Styles

In the 4th episode of CSS secrets, I will show you how to remove the ugly default anchor styles applied to your links by browsers.

Speed Art - Collision

In this speed art, titled 'Collision'. I create a mesmerising animation using 3D modelling software and then flattening the animation to a 2D perspective.

Acrylic Painting - Attempt 1

WordPress Plugins - Easy Google Fonts

With easy google fonts I will show you how you can modify the typography elements on your wordpress website live.

Cloud Art Collection

A collection of the best cloud generated artwork made with Adobe Photoshop and Adobe After Effects. I keep my symmetrical style applied to all images.

Speed Art - Shape Shift

In this piece titled 'Shape Shift', I manipulate cloud effects. I have done a few animated versions and felt like showing the process of the production.

WordPress Plugins - WS Custom Login

Feel restricted to the default wordpress login page? Want to inject some change in to your website and create some unique difference?

WordPress Plugins - Google XML Sitemaps

Want to improve your SEO for your Wordpress website? You can now with a simple plugin.

Speed Art - Divide

'Divide' was put together using a nebula effect and mirrored with multiple effects including displacement maps to give it a unique look and feel.

WordPress Plugins - RealFaviconGenerator

The perfect solution to adding a favicon is with RealFaviconGenerator!

WordPress Plugins - WP-DB-Backup

In this episode I will be going over how to keep your Wordpress database secure using the WP-DB-Backup plugin.

Enter - Animation

Half Full - Animation

This is the first time that I have transferred my illustrator knowledge in to after effects successfully.

WordPress Plugins - WP Our Team

Ever wanted to quickly and easily add your own team page to a wordpress website?

WordPress Plugins - Jssor Slider

In this episode I will be going over the basics of the Jssor Slider plugin for Wordpress.

Speed Art - Cloudy (Adobe Illustrator)

A little speed art of a cloudy themed poster I made in Adobe Illustrator. The whole process is played back at about 5x the normal speed.

Learning CSS 3 -

The box model in CSS3 is one of the main foundation principles. It is essential for positioning content correctly and creating precise designs.

Illustration - Groovy

CSS Secrets - Box Sizing

In this episode of CSS secrets, I look at box sizing and how it can help fix your CSS positioning and in one line of code, you can solve calculations.

Illustration - Miami

CSS Secrets - !important

In this first episode of CSS secrets, I cover the !important rule that plays a big role in the specificity of code and how rules work with one another.

Illustration - Block Spiral

Just a simple poster I made in a few minutes, to accompany the A3 poster I also made an animation for the poster.

Learning CSS 3 -

Continuing from the previous episode, we will now add background images

Illustration - Impossible Triangle

Southampton Common

In Summer of 2016, I visited the Southampton Common Park with a friend to relax. She had decided to bring a camera to let me get some photographs.

Learning CSS 3 -

Continuing from the previous episode, we will now add background images.

Okami Poster

Original Okami poster design done by myself, Jack Davies.

Designing for Web Devices or Screen Sizes

In this video I discuss the importance of designing for web devices over the option of designing for screen sizes.

Learning CSS 3 - #4 Writing CSS Code (Selectors, Classes, IDs)

Learn how the basics of how CSS code is written, with the use of selector items, class names and ID names.

Smoke Brushes for Adobe Illustrator

Free giveaway for a free smoke styled brush. Best used in Adobe Illustrator CS3 and above. Great for creating abstract illustrations and vectors.

Bubbles A3 Poster Illustration

Learning CSS 3 -

Learn how to remove all default browser CSS, these styles allow you to code CSS without worrying about how the browser will add its own predefined styles.

Throwback Thursday - World Skills Award UK Competition

Information and Communication Technology (ICT) students from Gower College Swansea have been recognised as two of Wales' most promising computer wizards.

Learning CSS 3 - #2 Linking a CSS file to HTML 5

Learn how to link a CSS 3 file to your HTML 5 document.

Deep Clash - A3 Mandala Poster

A free to download A3 mandala poster with strong vibrant colours.

Upload Image - User Interface

I had seen many animations on Dribbble and Behance of uploading user interfaces and felt inspired to design a user interface. I

Learning CSS 3 - #1 Intro to The Series

In this series I will be explaining the many different aspects of CSS and how to use CSS to code a website.

Vintage Ensembles - Vintage Clothing Website

Vintage Ensembles are a new clothing store that love anything boutique and require a website. They follow a trend that is vintage clothing and accessories.

Southampton Docks

Simply titled 'Southampton Docks', this photo is a reminder of a milestone. I was alone when taking the picture, but I was never alone at Southampton.

Learning HTML 5 -

In this episode we will be looking at how to validate any code you have created in HTML 5. Using the W3C Validator we can seek out any errors or warnings.

Learning HTML 5 -

In this episode we will be looking at how you can add comments to your code for yourself or other to understand how your code works.

Learning HTML 5 -

In this episode we will be looking at how you can add comments to your code for yourself or other to understand how your code works.

Learning HTML 5 - #6 Types of Lists

The sixth part of a series focusing on HTML 5, how to setup the foundations of any web page. Throughout the series we will develop a basic understanding of coding conventions, web page optimization and how to code a basic website.

Learning HTML 5 -

The fifth part of a series focusing on HTML 5, how to setup the foundations of any web page.

Want to find out what are the latest website design and development trends of 2016? In this short video I explain the most popular trends that you will need

My Experience at Meetdraw

Meetdraw is a great place for designers, techys and all round computer geeks. Read my summary on my experience with Meetdraw.

Illustration - Ghoul

Illustration - Zags

Illustration - Torn

Speed Art - Foxes (Adobe Illustrator)

A piece of art, titled 'foxes' that I made in Illustrator. I made the shapes myself and apply my own style, watch the video to find out how it is done!

Create a Tab Navigation Menu with CSS

In this video, I will show you how to create a mobile navigation menu for a responsive website. The navigation will be implemented, only using CSS code!

Learning HTML 5 -

In this episode we will be looking at how to link between with the anchor element. This element will allow you to target internal and external web pages

Learning HTML 5 -

In this episode we will be looking at how to add your very own images to your website! As well as this, I briefly go over accessibility issues.

Learning HTML 5 -

In this episode we will be looking at how and why 'Heading' and 'Paragraph' tags are used.

Learning HTML 5 -

In this episode we will be looking at the basic foundations and how to layout the code of a website.

Create Adaptive Images using Adobe Photoshop CC

In this video, I will be explaining how to make adaptive images for use on a website. This will be done using Adobe Photoshop CC and the actions tool.

How to Save an Illustrator file to SVG for use in HTML Code

I will explain how to use SVG renders as code in an HTML document and show DOM the CSS manipulation available to you when you have imported the SVG code.

Making a Responsive Photography Portfolio Website -

This is an extra video in the 'Making a Responsive Photography Portfolio Website' series. In this episode, I cover jQuery plugins for your website.

Making a Responsive Photography Portfolio Website -

The final piece of the puzzle for creating a responsive portfolio. With adaptive images, you can increase load time and lower bandwidth used by servers.

Making a Responsive Photography Portfolio Website -

The final step to making your website fully responsive! Episode 4 looks at how you can implement media query breakpoints to the existing website.

Making a Responsive Photography Portfolio Website -

I will show you how to use flexible units and apply it to the website so far! Then moving on to aligning the images correctly using flexbox.

Making a Responsive Photography Portfolio Website -

We will focus on flexible units such as %, vm, vh and how you can apply them to the project. Flexible units are important for responsive designs.

Making a Responsive Photography Portfolio Website -

The first in a set of several videos which focus on creating a photography portfolio for yourself. We will focus on adding images, making them responsive.

Foxes Line Illustration

The final outcome of sitting in front of my computer for 50 minutes and playing around in Adobe Illustrator CC. View the article for the full video.

Kill the Hamburger Menu?

Since the appearance of the hamburger menu, there have been large debates that span across the internet. Does it negatively impact the UX of a design?

Printing My Artwork!

I decided to go and purchase myself some 40cm x 50cm frames and print off some of my favourite pieces of artwork to hang up in my room!

Love Chemistry

As part of valentines day, I had a go at making a love-themed poster, most arts along this theme are cheesy so I used the chemical compound of Serotonin.

Cold Echos Mandala Tapestry

So this one took me a couple of hours but I am happy with the results! The tapestry mandala vibe is a strong part of my decor, so it was fun to make my own.

Animating X - Pure SVG and CSS Animation

This CSS animation was inspired by LevelUpTuts and focuses on manipulating the stroke of the polygon object to create a cool looking animation.

Codepen - Social Media 3D Card

This is a little codepen I made using HTML5 and SASS to compile the CSS. It doesn't use any images or javascript, and the animation is made using CSS.

Carved Face // Animated

This time I created an illustration in Adobe Illustrator and then tried to animate it using after effects, still need some practice but good starting point!

No Face

No Face is meant to resemble a blank canvas, awaiting personality or traits to be projected to form an individual persona or character.

Woman Experimental Line Art Poster (A4)

A combination of both 3D models in Cinema 4D, brought into Poser, mixed with Adobe Illustrator, The Woman Line Art Posters are my favourite posters to date.

Bauhaus Themed A4 Poster

I've always loved the Bauhaus aesthetic, clean, minimal and sans-serif fonts. I thought I'd give following the style a try and make a poster.

Deer Line Art (A4 Poster)

Just a little line art piece I did of a deer! Not the greatest at adding colours, but I'm practicing! A great practice of symmetry and vectors.

Broken Planets A4 Illustration

I love messing around and learning line art. 'Broken Planets' is a poster I made on a dull Sunday afternoon to keep myself busy!

Responsive Design Report

Feel free to check out my new report publication on the use of responsive web design and specifications of how to use it to its full potential.

Try Not to Fall | Abstract Illustration

An Illustration I made playing around with circles, lines and my favourite transform effects. Let me know what you think in the comments!

Re-branding and YouTube Channel Launch!

I have finally finished redesigning my logo. To make it look more sleek and understandable I have refined it from an abstract and obscure concept.

Subliminal - Line Art Poster (A4)

'Subliminal' is an abstract art piece I made while studying how to make zig-zag patterns in Adobe Illustrator! Feel free to download and use wherever.

New Year Resolutions

As it was coming to the end of 2015, I decided to set myself some ambitious new years resolutions. The resolutions focus on design and growth.


In most industries when we see the change we rejoice in the new technologies that are found and how they may benefit humans and their lives.

Is Flat Design Here To Stay? (Publication)

Flat design is a design trend that has become one of the biggest trends of the last few years among the web design community.


Took me approximately 2 hours to do this mandala at A4 size, hopefully, I get good enough to print my own tapestry mandala soon!

Symmetrical Patterns

Following on from the concepts of patterns and symmetry, I applied smart objects in Adobe Photoshop to show how easy symmetry is to achieve.

Design vs. Decoration

I admit that I sometimes fall in the common design pitfall of new designers which is to focus mainly on aesthetics and making everything look amazing!

Lotus Flower Vector

Lotus Flower, created with Adobe Illustrator. This vector graphic was one of my first experiments using Adobe Illustrator CC.

Never-ending Cube Pattern | Free Download

Never ending repeating pattern that is available as an Illustrator file, Photoshop file and PNG image file. All download links can be found in the article.

Felt like making a quick mockup of a website loading screen/header. The logo was made in illustrator with shapes, fonts and texture packs.

Text Animation

I've always wondered how animators achieve the effect of text being animated to look as if it is being written, in real time. This animation is the result.

CSS Column Count Layouts

CSS column layouts are a great way of setting up a specific & fluid structure for a website. The beauty of it is that it requires very little code to work.

Web Design and Development Talk by Moov2 Talk at Solent

Fortunately, I was given the opportunity to visit a presentation given by Dan Thomas from Moov2 at Southampton Solent University.

Workout Application - Routine Session

'Routine Session' is the product of my beginner phase of attending the gym. I found myself running into common issues with several mobile applications.

Aperture Photography | Mobile Application

Inspired by the previous UI (user interface) that I have created as part of my university course, I designed Aperture Photography.

New Logo/Watermark!

New Logo/Watermark. Might make revisions in the future but will be using this for now onwards! If you are wondering why I've used it, it has my initials.

Contact UI Animation

When contacting someone from either mobile or desktop devices, you simply press the contact icon and 3 methods will display, email, call and text.

Best Blend Website

The best blend project can be found in full on my Behance profile page. Best blend is a hypothetical coffee business looking for a brand identity.

Best Blend Stylesheet

A detailed stylesheet for the 'Best Blend' side project I've been working on. Great for if future developments or designs were to be made for the business!

Logo for a hypothetical coffee shop project called 'Best Blend'. The full project can be found on my Behance profile, along with other assets.

Television Login Interface

As part of my website design and development my course, I developed a television login interface. The task was part of my 'Interactive Design' unit.

Fluid Illustration

Just a simple illustration I did, I tried to focus on adding some sort of lighting principal to the design. Perhaps it could be used as a mobile wallpaper?

Trends are a complicated subject when it comes to critiquing designers work, many designers see trends as a great thing to base their work upon.

Geometric Icon Pack

Let me start off by saying that I know this isn't a premium icon pack standard, but it is my first icon pack and I really enjoyed making them.

Volume Control Interface

The volume control interface design focuses on displaying the current volume, as well as warning the user when they decide to play music anywhere above 75%

Microphone Icon

A super simple geometric microphone icon. I thought the icon I had developed for my geometric icon pack deserved its own poster graphic.

Planning and its Importance

When it comes to design, it is not only important but more so essential to have a good plan made before any production begins.

Simple UI Form

It managed to rack up a staggering 2000 views so far! I appreciate the feedback everyone has given and please if you have any feedback I'd love to hear it!

Pure SVG and CSS loading icon

I had the idea at night when walking back from the gym to produce a loading icon for a web page made purely of SVG and CSS graphics and animation.

Double Exposure

I experimented with double exposure actions in Adobe Photoshop and came up with a woodland crossed with a bear. It's a cool effect that I can use in future

Glowing Planet

I've always loved the aesthetic of pixelating art. After doing some research I found it was easier than I originally though with photoshop resizing.

Orange Flower

I decided to go on a quick photo shoot, which led to this personal favourite image of mine. Simply titled 'Orange Flower'.

Penllergare Woods

My partner and I decided to go for a walk to Penllergare woods so that she could show me a woodland that was tucked away, right under my nose.

New Website is Live!

Welcome to my new website, this is the first post on my live discussion section. Come check out what I've made and learn what you can make!

What's next?

Are you ready to dive deeper into the exciting world of UI engineering?

Well, you're in luck because my blog is just a click away!

Head over to my blog posts to explore a treasure trove of information on user-centered design and cutting-edge front-end technologies.

Alternatively, click here to go back to the top of the main contents of the page.