Tag: design

Mindscape Extracts

Mindscape Extracts

An audiovisual presentation of a series of drawings done in 2014

Part 1 : Madness
This section is full of images that explore my drawings which relate to states of madness or dark states of mind. The music used is a recent improvisational pieces produced using Audiomulch software.

Pieces:
Self Portrait : Mad Haired man
The Reluctant God
The Anonymous Patient
Red and Black (Physic Landscape)
Shadow Man

Part 2:The Dark Feminine
Images of dark femininity with soundtrack by Naturemagnet – a musical band I am in, track is called Brainjar

Pieces:
Breakdown Corridor
Obscene Machine
Miss Babylon (Ward 666)
Part 3: The poets and the Dreamers
Portraits of dreaming souls , music if poetry in small Places by my solo project BrokenGod, from my latest EP Deadstar 0

Pieces:
Closing Time
The Poet
Vampyr
Sophie
The muse she waits by the tree

Part 4: The Visionaries
Closing the extracts off with some portraits of people both known and unknown and a final self portrait

Pieces:
Becca Smith – Poet , Dreamer, Sage, Artist
Mindful Combustion
Ben Nield – The Anima Animus Egg
Seeing Red – The Artist (Self Portrait)

Bootstrap Responsive Landscape Image Slider-Demo on Github

Bootstrap Responsive Landscape Image Slider-Demo on Github

https://github.com/drnoir/Bootstrap-Responsive-Landscape-Image-Slider-Demo

Download / fork etc on link aboe

Bootstrap-Responsive-Landscape-Image-Slider-Demo

Demo in HTML of responsive landscape images scaling and tested on multiple devices made with Bootstrap / css / Jquery

Features:

  • Responsive Bootstrap Layout
  • Creates scrollable and responsve full page height images that will display wide range of devices via css / Media Queries
  • Side menu with additional onclick submenu (View Demo in index.html to see)

A quick demo of a landscape image slider made with Bootstrap, custom CSS and JQuery

View the Index.html example to see the resizing of all images to browser view windows across – desktop / laptop / mobile / tablet etc

Notes on important files

  • index.html – Main HTML
  • custom.css – all custom css is managed here including media queries (will probably seperate out eventually, as it is somewhat bloaty)
Rapid Website development using Bootstrap Template

Rapid Website development using Bootstrap Template

Website : www.chrisgodberart.co.uk 

Rapid Website Application 

A website created quickly in one night as an exercise in rapid web development to showcase some of my art using a responsive and accessible Bootstrap Template that I then customised with my own content, as well as adding some JQuery for a lightbox options to display some paintings and drawings.

UI 

I wanted the website UI to emphasise a strong bold visual that is easy and also fast to navigate so I using an existing bootstrap template here https://startbootstrap.com/template-overviews/stylish-portfolio/ which was based around responsive design and showcasing creative work.

Advantages of using Boostrap in rapid app / website dev 

This saved me the effort of having to create a lot of responsive classes and sped up the process of creating layout classes (one of the main advantages of using the bootstrap framework for quick prototyping and web design) whilst still presenting my work in an interesting way that is led by visual design and minimising text bloat (Which I consider important for showcasing visual art, to me personally nothing more offputting than a text heavy artist site with no pics of their work….)

I decided to also incorporate a video I did a few years ago of being interviewed about my artwork to make the website even more visual and interactive in a sense and to add a nice element of additional media.

It is simple in design and execution , and Bootstrap is often very useful for rapidly creating interfaces given it’s modular pre-defined classes / components / JS library and  grid system.

Advice on getting started with Bootstrap 

I think the best way to get started with it, is to build a simple website layout from scratch as opposed to building with templates at first, to get familiar with the CSS / Grid System and JS / JQuery functionality as well as directory structures. But it’s definitely is useful for rapid application building to use a template if you are tied for time, and still achieve a nice result without compromising quality design / visual aesthetic and responsiveness / cross browser compatibility.

Download Bootstrap here: http://getbootstrap.com/