I must admit; throughout all my years as a creative. Little else frustrates me more than customising every bit of a web page design. Consider that my tagline being Multi-Disciplinary – that I am a Humility of many, yet a Master of none.
Whether it be (refreshing) my memory on how Inheritance Tag works in Cinema 4D’s Mograph to overcoming Apple Motion 5’s multiple parametric-rigging limitations with FCPX. All the way now to troubleshooting layers of code – still unaware how changing one line will affect a SERIES of anothers’ often without any hints of guidance how they relate from one to another. How one rule behaves, from one screen size to the next.
I would not be surprised if this impresses nobody – for the fact that it took me not mere hours but days alone without prior coding or development background.
I can only hope that these humble set of changes I’ve brought for this (the least visited sites of the world wide web) This Is™ Humility – brings a renewed sense of faith amongst us few designers who knows how to tread that fine balance between non-coding pragmatism vs outcome based aesthetics / usability.
…If somewhat also – a hair pulling experience inbetween nights and days – in its process. With all this on top – alas, nobody would believe me that I am actually surviving (albeit just “able-to”) on multiple bouts of $25 LC+IF weekly budgets. INCLUDING carb re-feed days. Next write up on this would certainly be in order!
Emphasis on Typographic texturing and separations.
I am an advocate for prioritising typography as a “segregated logistics” away from other nearby elements. That is, by implementing a lot of margins and paddings on any readable content – away from surrounding pictures, images or any other visual elements.
More often than not, a lot of people demonise white space as wasteful, redundant evil. Strange to say that I do not call myself a “printer” biased graphic designer. But I still have a somewhat print-based mindset when it comes to typographic prioritisation (read: Legibility). Aia allowing white space; to comfortably revolve around each line’s leading and each paragraph’s texturing. Texturing – as in how each paragraph looks as a compositional feature as we read from top to bottom. Does it look as though it tries to be intrusive to its neighbours? Or does it look calm, peaceful or collected as though it sits happily on its own accord?
Thus, the biggest change you will see would be in reading my blog articles – is the expanded real estate canvas. No more “cramped-up” clogging around the headers and all of typography against tight or narrow canvases.
I have learned far more from remembering what my MOTION GRAPHICS (that’s right, not Advertising, or even Typography, or Illustrator) lecturer – quoted this to me than any other books on typography, layouts and graphic design: “It is not what you draw. It is what you DO NOT draw that is important.” I find this hugely relevant to almost anything. From illustration to branding identities. From letterheads to (soul-draining) 200+ pages of annual reports. How you interpret is less upon what you put in, it is the effects it impose on everything else outside of it.
All this may seem visually simple. Yet required an intense re-coordination. Days if not week – of scrutiny and readings across multiple resolutions (both simulated and real devices).
Responsive Set Rules Revisited.
I have learned much thus; thanks from my recently completed folio project (within Squarespace® platform) – on implementing @media screen set of CSS rules to devise a set of typographic scalability across a range of screen resolutions.That project alone took me nine days, and ninety (90) genuine hours of my own time. Just to prove my own humble mastery of none at front-end customisations within facing one limitation over another.
I really do care how typographic proportions look on larger and smaller screens. As well as how pleasingly isolated they are in relative to everything else. Legibility via dominance here is key as I design Responsive Set Rules towards larger screen resolutions.
You will witness; depending on what resolution you are in as the following changes:
- On VERY high desktop resolutions (I’m talking about 4K resolutions) – you will see much larger body font, and heading sizes on both my blog entries and that of my manuscript front page. The sidebar widget’s labelling and its contents you see on the right also becomes enlarged. You’ll get a “wider” white viewing resting canvas; and that all blog’s content typography now will be marginalised within a narrower dimension to allow focus and separation away from other things. Once again, “legibility” = requires separations.
- One point of note also is that the entire white area canvas now extends to 1920px. Unfortunately, I am carrying with me absolutely no Developer or Coder’s background – the landing page of The blog still carry one limitation- I still do not capactively know how to dynamically set each column width dynamically so that they fill proportionally to the extents of this new canvas’ width (1920px). Except the only “workaround” I rely is – to increase the left margin just for the sake that everything appears centralised.
- On resolutions at or below 1080p (1920’s, 1680’s, 1440’s) = quite similar to the above typographic recoordination and canvas width extensions but typographically scalable as such they remain visually in their own happy places. Arguably speaking – these set zones are the amongst most difficult to coordinate harmoniously with the rest of set points above and below resolution/s.
- On smaller desktop resolutions (1300s and belows / 1280s) = the entire white space now accomodates the width of the entire browser. As such, you will no longer notice the background ripple stock photography creeping/bleeding inwards to the content area, I consider this as redundant. Anything that creeps in without sufficient or legible-enough contextual exposure to me is visually redundant and hence must be excluded.
- For mobile resolutions (640’s or below) = Blog entry title now are displayed with thicker Rajdhani weights. Blockquotes and headers take a back seat. The blockquotes now are presented against the feature branding highlight yellow instead of grey. Their margins will push back more towards the left to allow content visibility.
Other small things help contribute to overall changes – new underlining styles for hyperlinks, navigation menus’ font size increased (on larger screen resolution viewing), more (and more) scrutinisation paragraphing space before’s and after’s (via margin-tops and bottoms) were explored. The Search sidebar is now more legible across all screen sizes. If you’re looking at my blog’s landing page at 4k resolution – you will be presented not three but four columns; giving you a wider overview of content at a glance.
What are your thoughts? / Further help.
Little else; if any – frustrates me more than increasingly homogenous same-ness of the world wide web.
…But nothing more annoys me also – that out of some strange fetish towards visual elitism – web sites typography is getting lighter, thinner, “grey-er”, with icons getting lighter, and nimbler, and greyer all the same. Perhaps in the near future – everything will be a wash of gray. Because everyone wants to look sleek.
Sorry honey, just because everyone is “special” – then technically speaking – nobody – is special. First everyone wants parallax. Now everyone hates it. Next flat icons takes over, then everyone misses the messy drops of paints, dried acrylics and accidents. Boohoo! What’s next?
I actually am typing this on an inverted screen right now. Thank goodness for the Cmd+Ctrl+Opt+8 shortcut (on Mac, for Windows – you need to run Magnifier first before PC-only shortcut Ctrl+Alt+I can work).
None of these attempts are of course – developer’s friendly approved nor me getting any stamps of approvals for landing a job as a Front-End developer. Heck, you developers may even call these mere “attempts” as hopelessly pathetic.
My passion as a designer remain diverse. I am my own resilient diversity as my Humble authenticity.
I cannot and will not – sacrifice my other diversities just for the sake of fulfilling one industrialised tagline. Be it “Illustrator”. “Typesetter”. Or “Operator”, or “Coder”.
Why? Because I refuse to be institutionalised to homogeously “fit” into one career, or one fixed peg of a shape for anyone assuming my role to society. I am no square or triangle.
I am a sphere but never – a polygon.
Please let me know of your comments and thoughts below on these above mentioned changes to the site.