William Park

A creative scrapbook that I maintain almost daily, posting design inspiration, and some of my own work.

[williamipark]

IXD303 - Designing User Experiences

This is my final submission for IXD303.

You can find all my supporting material in this download:

https://www.dropbox.com/s/8jblcc5xtqjwzlq/IXD303%20-%20William%20Park.zip?dl=0

Final Work:

Weather Site: www.paper-umbrella.co.uk

Oblique Strategies Part 1: https://williamipark.github.io/oblique-strategies/

Oblique Strategies Part 2:

For this part of the masterclass, I took the oblique strategies idea and turned it into a Chrome Extension. The extension will show an oblique strategy every time the user opens a new tab. It is available here:

https://chrome.google.com/webstore/detail/tab-strategies/hgnoildmfggegfbmogecbhbiiaaepnok

[williamipark]

IXD304 - Creative Entrepreneurship Submission

This is the final submission for IXD304,  Creative Entrepreneurship.

Final Website + Icons:

http://www.iconsoles.co.uk

Sketches, reference images, final icon’s raw files:

https://www.dropbox.com/s/gdvs8ylxnz28jp8/IXD304%20-%20William%20Park.zip?dl=0

Note: I’m submitting reference images here as with the level of detail I was working at, they were more useful to me than the sketches.

[williamipark]

Videos I used to learn how to create isometric graphics

These are the videos I used when I was just starting with Affinity Designer. I didn’t know what I wanted to do with my icons at this point but I did know I wanted them to be isometric, as I love the style.

[williamipark]

Paul Dunning’s ZX Spectrum

I spotted this work by Paul Dunning this morning on twitter, who made this graphic in Affinity Designer which is the same application I’ve been using for my console icons. The work reminds me of my own so much.

[eggbadger]

So therapeutic to make some art!

[williamipark]

Some isometric 3D work that reminds me of the console icons I’m making. I like the presentation here.

[cosmicdesigners]

Creative South Recap Alicja Colon

[williamipark]

I’d love to get back into making 3D models to aid with designing graphics. I love this kind of style.

[dailyminimal]

#AP17-917

A new design every day

[williamipark]

I think the shape here is pretty awesome. 

[williamipark]

Back-end of Paper Umbrella

I wanted to take some time to write an explanation about what happens behind the scenes of my weather app, as it is a significant part of the application hidden away that I had to develop. It's also an explanation on why a back-end was even necessary for this project.

To make my application functional I was going to use Openweathermap's API but the current weather data just updates every 2 hours, which I didn't like. On top of this, it doesn't have a precipitation prediction which is a key part of my app. So instead I used an API from DarkSky.

DarkSky's API is also free, but only for the first 1000 requests a day and works using an API key as you would expect. I had quickly run into a problem when the API didn't work because it doesn't like data being requested from a client (your browser) directly. If you're making a request directly from the client that means your API key is exposed to the public, which opens it up for misuse. Not good. Que the requirement for a back-end to hide my key.

To get around the problem I had to create a proxy server to act as a middleman in the trade between the API key and the weather data. The way it works is I send a location request to my proxy server, instead of the DarkSky API. The proxy server then takes this location and the API key (which is now stored on the server, away from public eyes) and asks DarkSky for the weather data.

DarkSky is happy now because the API key is safe, and gives the proxy server the weather data without an issue. Finally, the proxy server gives that data back to the client to display in the browser.

Despite this problem setting me back, it was a nice excuse for me to jump back into Node.

[morkittenart]

Just thought I’d re-purpose some older stuff I did for uni for a small animation

[williamipark]

Cool to see another isometric Game Boy in the wild.

[cosmicdesigners]

Westfax Brewing Co Crowler Label Joshua Jevons

[williamipark]

I really love the subtle reflection in this. It adds so much to the metallic effect of the can.

Would be an awesome idea for icons.

[williamipark]

NES Progress GIF

I took screenshots while creating the NES “icon” for a bit of insight into my process for these icons.

Interesting things about this image that you may spot: 

I use a basic outline to get the basic console shape modelled out, before moving to solid fills, and finally gradients to get the shading done.

When working with small details, like the light highlights on parts I use the “Image effects” panel for this. This really helps make shapes pop out.

The wireframes show how this is really just a bunch of simple shapes combined.

[williamipark]

Critique Material IXD303

Mobile Invision: https://invis.io/QXB396QGK

Desktop Invision: https://invis.io/Q5B397SH3

[williamipark]

Weather App Logo Process

A quick animation showing some of the process of building the “Paper Umbrella” logo. 

[cosmicdesigners]

Capitalization game loading screen Dmitriy

[williamipark]

Wow! So much detail.

[cosmicdesigners]

Weather App White and Dark Screen Nahid hossain

[williamipark]

The UI theme changing to dark would be an interesting way to change the app if it were opened at night time - it would make it easier on the eyes.

[cosmicdesigners]

Wearther App feige

[williamipark]

I like how the Illustration changes slightly when it’s dark outside. The rest of the design feels very similar to what every other weather app does. 

[cosmicdesigners]

Robogen — Builder Pierre Georges

[williamipark]

The grid structure here is really cool. I’d love more about what this was for.