A Bit of Chaos

The Design of This Site

Welcome to an Easter Egg of my theme I had a very specific design in mind, so I started with a stripped theme called 'html5Blank'

The Design of This Site

Goals of the Design

  • 2+ iterations of Dragon Curve as layout
  • Use styled binary
  • Information Architecture reflects Dragon Curve (Stay semantically valid)
  • Responsive First Design, incorporate such functionality later
  • Keep posting easy, uncomplicated
  • A clean, open design
  • Focus on art work
  • Display web design/graphic design abilities in execution of design as much as display portfolio

Goal 1

Perhaps, at first glance, the design of this site might seem to buck standards and trends of current responsive designs. The evidence for this is in its strong vertical first impression, but there is a reason for this. The nature of the linear elements comes from Goal 1 above. The feature/hero/splash section of the design a user first sees anywhere between 2 and 4 iterations of the Dragon Curve from Chaos Theory. Based on my research this is what I have discovered, but I first encountered the form in the Jurassic Park novel. Once I decided on this form, the process of laying out text and imagery in a way that was clean and easy to consume became paramount.

digital sketch of horizontal menu

Tried for a horizontal main menu

Goal 2

Additionally, I have a fascination with computer science and digital capabilities (which admittedly is mostly musings on the nature of binary), so I wanted a simple presence of the stylized aesthetic of binary I’ve arrived at in my visual art work and research. This resulted in the binary Easter egg that leads to this page. The binary, illustrated as a simple orange circle and gray line, translates to ‘dp’, as in my initials. This is how Goal 2 was achieved.

I am fascinated that 3 sets of 3 numbers plus a decimal [rgba(000, 000, 000, 1.0)] creates a color with transparency. It’s like translating between languages.

dp bits

“dp”

Goal 3

digital sketch of content

Where should h1 go?

For Goal 3, staying semantically valid is important to me both as a designer and and artist. I think at some point I discovered how words have their true meaning, but before then my understanding of some words relied on strict interpretations. Semantically valid in the case of this design, employs the appropriate headings, guided by keeping them concise and flowing (as appropriate to western cultures) left-to-right and down the page.

One of the challenges was the vertical nature of the design, and Goal 3 reflects the principle of Chaos Theory and maybe a little bit of a ‘static’ interpretation of Complexity Theory (of which I am also a fan). I was basically using Chaos Theory to organize information, and again as the vertically progresses downward in increasing complexity based on the initial conditions of the iterations of the dragon curve. Not counting this Easter egg (consider it a hidden perturbation), the logo is the encompassing concept of the site, then move to the navigation of the site, slightly further to the left and readily accessible. Following that is the announcement of the subject of the page the user is one, very large with and h1 tag accompanied by a subtitle (an h2) immediately to the right; yet still separated by a thin line. Below this we have an h3 that exists as brief summary, and below that, left to right, a feature image relevant to the page content, a quippy quote as an aside (really a p tag) to the content 9with an arrow in the background to indicate more information further down), and lastly a bit longer paragraph that may be aside information, or tangentially relevant.

Additionally, as the visuals manifested themselves, various transitions evolved as they often do. Certain features are handled by readily available WordPress Plugins. These are things like the gentle scroll guiding the user up or down the a screen.

Goal 4

With regard to Goal 4, I have a different approach than most designers. I like to start with the desktop version of a site and layout all content available in a large field. This allows me to ‘play’ with more dynamic layouts and shuffle what I call ‘micro-layouts’ (smaller, often more compartmentalized areas of content) in a coherent manner. After this is established it is easy for me to shrink the canvas and let the sections begin to stack themselves in a decent manner. Devices/browsers targeted for this design were the iPhone 6, iPad Air, and the most common desktop size (1366×768, as of 2015, anyway). These were not only my own devices, but also pretty narrow measurements based on other devices out there according to my research. Additionally, Chrome and Safari were targeted due to usage penetration numbers. The sandwich menu on smaller devices still feels a little tacked on, but I like it.

I enjoy how CSS and HTML work together, kind of like drawing lines with math and exploring colors with coordinate numbers. One trick is, however, that such things as computers love squares and hence the grid. I’m a fan too, of course, but not just because I’m German or went to a German inspired design school (hurray, Bauhaus!). the element I want to point out here is the h1 tag below the navigation. In order to keep that element’s box long, and still appropriately draw out the iteration, the lower line actually extends the length of the tag. Using a pseudo-class (:after) I put a color block over the top of most of it that matches the background color. This solution allows for flexibility, and is really the only way the implementation community seems to agree it can be done.

Goal 5

In order to divide the content into the compartments created by the iterations as I outlined, I had to incorporate specifically coded custom fields into the WordPress composing pages. The core content section below the iterations, is actually the WordPress composition section proper. While composing a page or post had to be largely easy and simple, this was the only way to answer filling in these blanks. If I leave these custom fields empty, however, the iterations remain intact. Part of this effort was considering myself as a often and regular user to the site and making it easy for this ‘client’ to post without too many complications in the admin sections. I think I achieved this part of this goal.

Screen cap of fractal with empty fields

It had to work even if blank

It was easier to build the HTML and CSS for a desktop version as mentioned. I forewent things like bootstrap and such as I knew I wanted to use WordPress (Free install, good penetration as a content management system, and I’ve had previous experience managing it). WordPress can incorporate such things, but I wanted to build my own theme as much from scratch as possible since I had never done that (which also explains the length of the projects timeline). I found a basic HTML5 blank theme (literally called html5blank) that I could throw my HTML and CSS into. I learned a lot more about PHP in this whole process, as well as running a test server locally and such things.

Goal 6

I already considered the design to very clean, uncomplicated (despite coding issues to display it as such) with the use of this many iterations of the Dragon Curve. This was a achieved by the final decisions to dominate this top portion with text, as the linear/graphic nature of the iteration was sleek and minimal enough. After these items were in place and coded, the core content below it was easily developed and implemented. This core content consists of the main image of any portfolio work, followed by descriptions or narratives and additional thumbnails or images of the work or it’s details. For posts, which may not be image dominant, the text rules remain the same.

One of the considerations was also the listing of posts and pages as summary squares on main pages. This is partially response to trends sites like Pinterest have created, but also reflective of the geometric nature of the iteration. It is a way to continue that effect down the page. I am also a fan of small thumbnails anyway. This openness, simplicity, and conciseness is also exemplified by the use of a single font throughout (Avenir Next!).

digital sketch variation

Title length was an issue.

Goal 7

This is primary treated as a portfolio and experience site of my art and design career across full time positions, teaching, and as an artist. As such, my research and own experience led to keeping color in the actual site design and layout to a minimum, thus black and (kinda) white—the background is not a true white, yet still promotes high contrast. Now, there are studies that say light text on dark backgrounds for large bodies of content reduce eye strain, and I do like to talk, but for now I’ve decided to keep the design as it is. I have attempted to keep any descriptions or written portions to smaller content sections for quick absorption. Keeping the background this very slightly off white overall doesn’t help the colors and quality of the images pop more. I’ve even gone through and retaken many, many images of my artwork for the new design (again, hence the longevity of the project). I think I’ve achieved a high level of focus on the art and content of the site as a whole.

Goal 8

Though even my advanced degrees are in sculpture and studio art, web and graphic design has paid the bills. I have unique approaches, considerations, and a thoroughness brought on only by the consideration of extra dimensions of problems presented. I knew full well that going into this design, it had to be purposeful and dynamic. Not only that, it had to incorporate current standards, identify the trends that seemed to be in stable enough to become standards; and exist in a future-proof way that would not fall apart as the various technologies use updated as well.

Additionally, the design had to reflect my own philosophies, in visual and developmental forms, and display my abilities as a creative and professional as well as a visual artist. My aesthetic had to be dominant, but not so much that my works in other media took a backseat or were less prominent. For my profession as a designer, I had to convey a useful clarity due to the nature of the purpose and content of the site. As a working artist and professor, I wanted to apply alluring mystery. Between these two concepts, which I suggest all designers consider, can be struck a fascinating balance. I think I’ve captured what I’ve desired and insisted of myself in the design, development, and implementation of this site.

I have, as is my standard practice, employed an agile approach to this design as opposed to a waterfall approach. This means essentially that I’ve brought it to a publishable point that is acceptable to the client (me). I will continue to improve and update the site as usage develops. From a pragmatic standpoint, I’ve also made it fail gracefully on other/older devices and browsers, but for the most part many devices and browsers out there (fragmented as they or the market may be) are delivering the design as expected.

I hope you enjoy my site

 
Share if interested

View More: , , , , , , ,