#ixd301

[dominicmcgrath46]

Elements Superhero Project

[wiktoriabigaj]

Digital wire - frames:

(Uploaded above image to tumblr changed the vibrance and colour of the original image. The correct colours are seen on the other images.)

After I had all of my designs finished and paper wire-frames done I decided to do a final digital wire frame for each page just to have an exact idea for the website composition and layout. Taking all of the content I decided to include in the website and deciding where to present it. I decided to stick with the same content composition for each element page for a cohesive design. The landing page being the brand image taking you to the home page of the element set where there will be a navigation bar but also all of the elements will be linked to approporate pages. 

[sayskez]

The Cursed Transform

Inline SVGs can be lean, mean, responsive machines or they can be covered in transforms which not all browsers like to cooperate with (looking at you, Safari). So what to do? Optimsers are generally the way to go. You want your SVG to be as small as possible anyway so why not optimise it as much as possible?

Plugins such as SVGO (or the handy online GUI version) are great for this, removing transforms while optimising the code, but problems can occur when you want to animate the SVG in question. Depending on the animation, you may parts of your SVG to remain distinct so you can target and manipulate them individually. Optimsers like to merge paths, which is where problems can occur.

Sub Optimal Solutions

Avoid transform as much as possible when creating the SVG by being careful with where transforms are applied (generally occur when manipulating groups).

Slap a group around it. Not great for lean code but if transforms are causing animations to act funny, sometimes the quickest fix is wrapping the troublesome spot in a group and targeting that instead.

What I’m Trying

Fiddle with the settings in SVGO to prevent merging paths so you can maintain individual paths while also stripping out transforms.

Optimise in chunks then recombine in the code. This is more time consuming but if you have a particularly bothersome SVG and need one portion to not merge with the others so it can be animated, then this can work.

[wiktoriabigaj]

Elements Poster - Carbon

This is the a4 elements poster that I designed for the carbon element. To stick with the theme I kept the same composition style with the diamonds at the bottom going up to the character. Adding the element symbol at the bottom. I’m happy with this layout. 

[sayskez]

Flexbox Starter Kit

First up: Flexbox Froggy

Honestly, this is the best introduction to flexbox I have found yet. It runs through all the relevant properties and gives you a chance to see them in action which is essential because just reading through a list of them can quickly become overwhelming. Plus it’s all dressed up as a cute game of frogs. What more can you want?

Everything else: CSS Tricks Guide to Flexbox

Everything. The CSS Tricks guides are always good and the flexbox one is no exception. However, reading it with no prior knowledge can be confusing if you are trying to do something even a bit more complex than a standard row of images. But it’s the perfect follow up to Flexbox Froggy and if I run into any problems, it’s generally the first article I refer to.

Guide to Properties

Exactly what combination of flexbox properties to use is often my biggest challenge and I sometimes end up experimenting until I find the right one. This handy visual guide can help with that and you can experiment away right in your browser.

[sayskez]

Meet Mixic

What: A pocket speaker which turns playlists into mosaics and helps you discover new music.

My original name for it was Musaic, which I was never sold on and finally scrapped after discovering there is a home speaker which already has that name (and, disappointingly, has seemingly nothing to do with mosaics).

I experimented with several different approaches to branding for this before breaking out the isometric grid. It’s the first time I’ve used one of those in Illustrator so it was definitely a learning experience (and the logo took longer to make because of it) but worth it in the end because I then riffed off the design for the accompanying illustrations for the product breakdown visuals.

The tagline “hear the rainbow” evolved from the description in my original sketches (Listen in Colour) and is intended to convey not only the colourful nature of the product and what it does but the variety it is designed to bring to your listening habits. The top image is intended to represent an icon for the Mixic app while below it is one of the logo/wordmark layouts I’ve been experimenting with (among others). It reminds me of those old scratch off colouring books with the black charcoal(? Foil? Dust?) covering the bright colours beneath. Must be lodged in my subconscious from when I was little even though I probably spent more time poking people with the ‘pencil’ that came with those books than actually colouring.

[csa-brown]

Links to projects

Elements: https://www.figma.com/file/rXhJw60Pv9FDMehyGtfSdU/Elemental?node-id=0%3A1

Portfolio: https://charlotte-browns-stupendous-project.webflow.io/

[csa-brown]

Elemental Sketches