Select Page

Mobile UI/UX Proof of Concept

Prologue

I will say, this project was born out of a strange, confusing, and quite frankly stressful time. My job description was very much up in the air, and and there was even uncertainty around this entire project. Unfortunately, this project never saw the light of day, but I have been searching hard drives all over the office to find this one and I finally found it! I just wanted to post it because I still really love the idea, and I will probably try and revisit the concept and try it on a special page here on mattjones.tech.

Assignment

The ask for this project was to create a web page that really engaged visitors and explained the concept of baptism along with various beliefs about baptism that were applicable to the church. Admittedly, a largely vague assignment with plenty of room for interpretation. So instead of creating a typical page design with images, I decided to take it up a notch.

Concept

The existing site was built on WordPress. The idea was to simulate a water splash in 3D, “freeze” the water in time, create some text blocks in and around the different areas of the splash, and animate a camera to stop at each of the text blocks. Once the splash and camera animation were created and in place, the objects, animations, and materials would then be imported into a ThreeJS scene. Once it’s imported to ThreeJS, the appropriate tweaks would be made to make the render look similar to what I had in Blender, then just animate the camera along a path based on scroll direction. Once that was complete, just paste that code block onto a WordPress page and you’re done!

As you can see from the video above, I was able to simulate the water, block out some dummy text, and get the camera animations in place for a proof of concept. The next step would have been getting approval from the client, but unfortunately, the project was dropped before it could progress to the next stage. However, I’d love to just take this project all the way to completion just to see if it is even possible. In all honesty, this is a workflow I’ve never executed in a real world scenario, but conceptually, I can imagine all the technical bits coming together fairly seamlessly.

Thoughts on Design

Looking back on this rushed design, if I were to reattempt this project, I would probably design a completely vertical experience. This would more closely mimic the actual movement of being baptized, and give opportunities to stop at each stage of submersion and rise for explanatory blocks of text. A vertical design could also have a great opportunity to shine on mobile screens as well.

Emphasis on Flexibility and Ease of Use

The only thing I can anticipate rethinking would be the implementation of the text blocks themselves. “Real” HTML text blocks (“real” as in “easily editable”) would be extremely beneficial here, as it would meet the almost guaranteed need to modify the text later. And when you’re rendering a 3D world, live, right in the view port anyway, it makes sense to just implement live rendered, and easily editable text as opposed to Blender text objects converted to mesh for rendering in the page.

Check out more articles

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Adjust Trackpad Sensitivity XFCE

xinput set-prop "Elan Touchpad" "Synaptics Finger" 1 1 1 What are the values 1 1 1? This sets the sensitivity as close to the original ChromeOS as possible. Larger numbers will decrease sensitivity of various aspects. I never looked into which individual value...

Fireworks (Short Film)

https://vimeo.com/395077249 About the film Year: 2020 Director/DP: Tim Searfoss Writers: Matt Jones, Tim Searfoss Sound Mix: Matt Jones

Hosting Multiple Sites Using LocalWP

I've done a write-up on hosting local WordPress sites before, but I definitely prefer this method over the previous one. If you've never tried hosting multiple sites using LocalWP, then I'd encourage you to check it out. I've had really bad issues with it in the past,...

How To Load Javascript in WordPress

Doing things the WordPressy Way Yes, technically it's possible to just drop scripts into template files, but it's not the correct method to use on WordPress sites. WordPress is pretty particular on how it handles JS. Register Scripts via functions.php Just a heads up,...