Jonathan Copeland

Helping people feel smarter in their day-to-day lives

JSON Viewer

02 April 2023

Today I discovered, JSON Viewer, a ‘native Mac app to visualise, validate and format JSON datasets in a clean and snappy interface’.

In my test case I opened a 4 MB JSON file containing 97,296 lines of data and it loaded quickly with syntax highlighting and the ability to easily expand and collapse nodes.


The new Hipstamatic

25 March 2023

The new Hipstamatic is one of the best of examples of quality iOS design in 2023.

It’s full of moments of delight and craft, with tasteful animations throughout.

Also, leveraging App Clips on the web as a sub-step between web pages and the App Store feels right. Users get a chance to get a feel for your app without getting redirected and having to go through the whole process of entering their Apple ID and starting a download. Try it here.

App Clips launch into a rich unauthenticated experience.

Links: http://hipstamatic.com/x/


Splatoon 3's interface design

20 March 2023

Earlier this year I purchased Splatoon 3 and I’ve have been completely obsessed with it ever since. The combination of quick-fix multiplayer games, diversity of game modes and the overall fun and quirky energy has me hooked.

Something about Splatoon 3 that’s especially caught my eye has been its interaction and visual design. The game menu mostly takes place in a virtual town square, Splatsville, where the player can enter different shops and buildings to start various game modes. Once in one of these shops or buildings the interface is usually an overlay that the player can easily jumping in and out of. I’m saving some of my favourites here for future inspiration and appreciation for the designers behind them.

Loading states

The core game mechanic is shooting and swimming through ink, so it makes sense to illustrate loading as swirls of ink.

Splatsville

The player can enter different shops and buildings to start various game modes.

Pre-game

Game mode selection takes place in a mobile phone-like navigation that players can tap up-and-down through. The neon focus indicator matches the visual style of the shop fronts in Splatsville. Current maps and rules are displayed in a cardboard punch-out card.

Previous matches are saved in a history tab, and the player can see a picture of the map, ink colours used in the match as well their team’s score represented in a flowing lozenge of ink.

Rules are always accessible and displayed as a stack of scrapbook like cards, using images, and minimal text.

In-game

The in-game HUD is lean, showing your team, remaining time and score. Ink level can be monitored by viewing the backpack on the in-game character. In the bottom left the player can see their two ways to communicate with their team: by saying ‘This way!’ or ‘Booyah!’ - phrases which are surprisingly adequate.

The player can open a mini-map at any time, to see their team’s progress in splatting the map, or even to jump to a team-mates location after respawning.

Post-game

Points are tallied in a flowing lozenge of ink, accompanied with the labels of ‘Good Guys’ and ‘Bad Guys’. When the ‘Good Guys’ win, the screen breaks into celebration, with rock music, confetti and a range of in-season stickers dropping down and framing the map and score.

Bonus

As players progress, they unlock additional gear and items from the season’s Catalog. The Catalog is represented as a magazine that players can page through to see seasonal content.

The use of skeuomorphism continues in the Alterna story mode, where players create a scrapbook of things they learn as the story progresses. These scraps range from post-it notes, to stickers, magazine cut-outs and pencil scribbles, all adding context to the Splatoon world and lore.

Links:


100 Days of SwiftUI, Day 15 Swift overview

13 February 2023

I’ve enjoyed how lightweight Swift feels in comparison to other languages like C++ or Java. I’ve noticed this in it’s concise and readable syntax, as well as it’s helpful compiler which gives clear feedback as to where to debug your code.

For future reference I’ve made a Swift overview document that can be found here.

Day 15 of the course includes this great Learn essential Swift in one hour video which demos various features.


Browse the archive. Subscribe via RSS.
Newer Posts
Older Posts