A Portfolio For All

To create an inclusive experience that showcases some of the skills I have to offer, while showing that accessible design can still be fun.

Self imposed limitations

Designers are their own worst client. We want everything and we want to show you how we did everything, but curation and restraint is crucial.

I needed to cherry pick a handful of projects that showcase the work I want to do more of (that I'm able to share) and from an archetectural point of view I want to limit it to a maximum of 3 main page templates. The hompage, the project page and if I'm feeling adventurous, a contact page.

Accessibility as a requirement

Through good intentions, or through threat of being penalised, companies are now starting to get more on board with being more accessible. I have taken it on as part of my role at Next to bake usability and accessibility into the future UI framework for the company.

The truth is that a lot of the implementation falls within the front-end developers realm of execution, but as designers, we have a role to play too.

We can start by making sure that text elements have sufficient colour contrasts and font sizes. You'll quickly realise that in making this small conscious decisions, you'll also start to make your website and apps that much more usable.

Delivering appetising, digestible content

Time is precious, especially to potential clients or hiring managers. So breaking down content into clearly labelled sections, using headings and maximum content widths to allow users to absorb smaller chunks of content and making your users just a little more likely to skim your content.

Refine, optimise and improve

My time working in the e-commerce industry has taught me the importance of speed and forever optimising. By leveraging features that I helped implement there, such as progressive lazy loading of images, loading perception speed and reducing cumulative layout shifts it helps the user prepare for and enjoy an experience regardless of their internet connection.

These elements of UI design and implementation are really reaping benefits now, especially with googles latest search engine optimisation considerations.

Who is this for?

The default stance in the design community is mobile first, which is great as it encourages you to evaluate the hierarchy of your site based off the smallest viewport. However, when it comes to things like portfolios, the audience is often a hiring manager, who is probably looking at this as part of their workplace tasks.

It is therefore safe to assume that the individual responsible for making the leap to hire you won't be conducting their assessment primarily on a mobile device, so the scope for impressing people is equally as important for wider screen resolutions.

Lightweight and reusable

Being able to create fast, templated experiences is a prerequisite for most web based companies as it allows for enhancements and changes to propogate with less technical debt or manual changes.

Leveraging my experience defining API endpoints, I adopted a similar approach with my site by using a writeable data feed to populate my projects.

This allows me to populate the page and determine the UI while keeping the web page light, reusable and all without sacrificing the frills.

Making it keyboard navigatable

When it comes to users who have difficuly navigating through websites using the more traditional methods such as a mouse or touch, there is the option of falling back to using a keyboard or screen reader.

In order for this work, it takes a few key considerations. One of the fundamentals is correctly written and structured HTML, there is a reason why there are so many HTML Tags, it's because each one serves a particular purpose and that helps to give utilities such as screen readers the ability to communicate back to the user what the element is and its intended use.

Another favourite of mine is focus states. Too often I have seen websites actively removing the browsers focus states as they are deemed to interfere with the aesthetics of the site. I prefer to embrace and enhance then, so why not try and tab through the site and see if you can use it just with your keyboard alone!

Interactions

When I've got the key core functionality and content locked down, I can start to have some fun with things and inject moments of delight across the site. You'll have probably encountered some of these on your way to this project (unless you've set a preference for not wanting things to move around).

Inheriting users preferences

Most modern browsers have the ability to indentify some of your operating system preferences that indicate how you want things to behave/appear. The most popular being whether you like browsing in light mode or dark mode, but also things such as whether you don't like things moving or animating as they cause feelings of nausea.

Regular refinement

I'm a big believer in testing and iterating, so this will continue to grow and improve over time.