The Evolving Style

This was an internal document for me to keep track of what I was changing and why, but decided to reword it and make it an article. Hope you like it.

This website was built from scratch using only Notepad. While it would have been easier to create the site in Dreamweaver or another program and then upload it, I wanted to learn first-hand about the steps involved in web development. The site has allowed me to hone my design skills, both aesthetically and organizationally. After a series of, in hindsight, questionable decisions, the site has undergone several radical changes. A javascript-based database was replaced with the more standard MySQL database. The old, admittedly ghetto initial website gave way to a slicker, more modern interface. I would like to briefly discuss these changes, giving examples and links to material that have been of use.

Infrastructure

Originally each article was isolated and static. Each had a unique heading, body and other html/javascript code. This was both cumbersome and inefficient; adding new articles was a chore and links needed manual updating throughout the website to incorporate new items. For example, the works page was static. I updated it through an Excel file that concatenated all the article information into html blocks. It was then copy-n-pasted into the appropriate html file. I envisioned using a database that would get around this. The initial concept relied on javascript; a .js file with an array containing the different article information would be loaded and then document.write() would insert the correct database information via javascript. This was cumbersome and involved the client downloading files and data they may never use. A better solution was needed.

Awhile ago, I had come across a great article on NPR called COPE: Create Once, Publish Everywhere. The idea was to publish content to a central database, which pushed said content to different devices and services. The idea of storing content in discrete chunks sounded good, but knowing only html, css and javascript wouldn't get me the desired results. PHP and MySQL fit the bill and I had an interest in learning a server-side language. The Excel tables--article names, dates, and other information--were transfered to a MySQL database then accessed via PHP queries. I added to the table unique IDs for each article that correspond to its folder location. Thus, the php script would just determine the current directory, locate the ID in the MySQL database and then pull-down the article information (title, date, etc.). Example script below:

In addition, I created templates that each article loaded; each article was split into three parts: header, content, and footer. The text of each article would be loaded from a text.html file in that folder and the formatting imported from other locations. A long term goal would be to also move the main text to a database, increasing portability.

With all this, I could both modify an articles information in the MySQL database while changing the layout of each page via central .php header/footer files. And for the works page, new articles would be automatically added without me having to do anything, I only needed to update the database and add the article to the correct folder. Another script I made allowed me to drop files into the Design folder and have it automatically add them onto the page. It uses scandir() then takes the modulus of the length of this array to split the images into three rows, see below:

Model-View-Controller
Basic outline of the architecture. Source

At the behest of a friend, I learned about MVC architecture (MVC). I split the architecture used to access the data from that used to display the web pages. A central controller would coordinate the two and allow finished code to be displayed to those viewing the page (see below).

This will allow me to more easily update (refactor/rework) the code in parts of the site without affecting other portions. The site has several easter eggs, the most fun of which is navigating with the keyboard, implemented via the below code. These have been mostly removed to reduce suprises.

The website's infrastructure has undergone many revisions and while many were not surface apparent, it has trended toward a more maintainable website that will be more easily ported over to other servers. I recently tested the code, untouched, on Stanford's servers as opposed to MIT's and it works flawlessly. Nice.

Aesthetics

Figure 1 | Concept Design
This was the original concept design made in PowerPoint. The idea was to have a clean, spacious website with an emphasis on white space.

Aesthetically, there was a clear initial vision (fig. 1). The site should be clean, spacious and contain only a few colors, which would highlight the content, increase contrast between elements, and make images stand out. The name of the original site 'Balanced Design' stemmed from my then current obsession with aesthetic design, if not so much how it would affect the way readers navigated the site. Further, there was a certain 90s vibe about the website--its simplicity went go too far and its minimalism would be considered boring by many.

Figure 2 | Initial Website
The website had two goals: high contrast and simplicity. The page was to contain no scroll bars around the edges and everything was to be contained within the central window.

Thus, for the actual site, I focused on sprucing up the look while keeping the minimalist design and focus on content (fig. 2). The website accomplished this goal, but there were several problems. Some were due to content organization, as discussed previously, while others were navigational. I had my name and date on the top right. While cool and a fun way to test some javascript, it served no purpose and feedback from others showed that this header date was confused with the article date. Further, the article's date and name were the same font and size, leading to confusion as to what the date represented--publication, current or another date. Nevertheless, the boxing of the content so that it didn't fill the entire screen is a design element I used in many future revisions, along with the focus on bold, contrasting colors.

Figure 3 | Changing Aesthetics
This revision turned toward a simpler color palette to reduce visual clutter while providing extra cues about the current site section and meaning of the date next to an article.

An important part of many future designs appeared in the next revision: I wanted to make the site accessible to more people, e.g. the color-blind. Though perhaps a bit of a step back, the next revision to the site involved a return to the simpler color palette of the initial design (fig. 3). The boxed content was removed and the current section of the site made more obvious, underlining was not clear enough (see the 'Home' on the top-left). A 'posted on' in front of the date clarified things along with a change in color; though, this was later changed to a different font to accommodate poor eyesight or color-impaired people.

Figure 4 | Evolving Design
Moving the navigation to the top and giving the content full focus and more space to breath. Due to it's easy implementation and graceful degradation, this version was kept as a backup for those without javascript.

A problem identified with the past versions of the website was a meh homepage and an increased complexity, along with a slightly boring color lineup. To combat this, a homepage was made with eye-catching imagery (fig. 4). This served two purposes: to draw the reader in and easily explain the purpose of the site. The flowing, abstract colored lines draw the eye; however, they are a bit garish. And while the picture from a hiking trip in Switzerland was meant to add a personal touch, it added unnecessary clutter to the page and should have been removed. Putting navigation items on top provided consistency across the site. Continuing the trend of making visual elements bright, clear and redundant, highlighted navigation links changed color and were underlined (color-impaired people might not see just the color change). The footer was made black to add some visual tension; it also visually indicated its separation from the navigation items.

Figure 5 | New Windows 7 Interface
The new interface, based largely on Zetro lead to a clean look that reduced the visual clutter associated with all the glass effects in the traditional Windows 7 theme.

Sometime after christmas, I revamped the Windows 7 interface on my PC to be more in line with Metro and other similar designs philosophies (fig. 5). This changed my perception of the homepage. In addition, at the time I was reading into mobile development, putting mobile first then building for the desktop. Several sketches were done of the site that would allow for a more organized layout that would work as well on a giant monitor as the small screen of an iPhone (fig. 6.1). It provided a clear entry point with several points of prospect: the buttons offered clear categories that helped visitors find what they needed quick. In addition, taking a cue from Fitt's law, the buttons were large to help reduce time and fine homing movements needed to click them.

Figure 6.1 | Grid Based Design
Grid-based sketches guided the new look. Drawing designs on paper allows for rapid iteration. Often, as was the case with the original concept, using Photoshop or PowerPoint can lead to a focus on the tool being used or trying to refine details before settling on a good idea, which sketching allows.

This led to a complete overhaul of the site's front-end (fig. 6.2). The site now followed a grid layout. The different grid variables (gutter size, button width/height, etc.) were chosen then made percentage based so the interface scaled to any dimension screen. A true dynamic website, it would also resize automatically if the window size was changed.

The new homepage took advantage of several design principles: alignment, consistency, similarity, constraint, 80/20 rule, accessibility, aesthetic-usability effect and others (will discuss in greater detail in future posts). Alignment allowed for an aesthetically pleasing design, the previous sites had some things off-center and the location of items was not calculated beforehand. In addition, each panel was visually identical to the others and a similar interface and style permeated each page from the color of links to the alignment of the text. If one was to construct an objects/action matrix, it would have gone from a large n*n to a much smaller n*m matrix, reducing mental burden on the user. It also provided a more goal-oriented site.

By showing users all options up front, they were constrained to particular webpages. Google Analytics allowed me to focus on just the most important parts of the site (80/20 rule), ignoring (for the moment) pages that were rarely visited. The new layout increased accessibility by allowing mobile users larger objects to interact with while the perceived usability was likely increased due to a easier, more friendly interface. This was supplemented by multiple cues (size, color and other changes) when hovering over page elements--a common method to cover for users with differing abilities. Gestalt principles--symmetry, continuity, etc.--were also taken into account as the site evolved; though, that discussion is for another time.

Figure 6.2 | Radical Departure
While a bit garish, this design was very mobile friendly. The icons were large and other parts of the navigation put mobile first and then refined for the desktop. The current site built from this basic form.

However, this new design was a throw-back to hurt-my-eyes-with-too-much-random-color websites. I eventually decided to add shadows and change the background to white to soften the page's effect on the eyes (fig. 7) while still allowing for nice edge contrast, something the visual system is optimized for. I also kept with primary colors, as they are most distinct and provide 'pop' compared to using more saturated ones. It was around this time that external fonts were added into the code, allowing for the site to take on a more distinct look.

To allow the fonts to scale appropriately, I used FitText, a jQuery plugin to resize header font to fit an html element. This allowed for the big, bold type that continues to grace the site's homepage and navigation. While it adds clarity to the site, it also gives it a distinctive feel; often people associate a particular type with some experience, company, website, etc. The aim was to replicate this with Akzidenz, the font chosen here.

Figure 7 | Aesthetic softening with increased clutter
The original metro-style interface hurt the eyes (fig. 6). A while background, slight shadows and other small touches gave the revised interface more room to breath. However, it soon became cluttered with too many elements, an information overload that was soon rectified.

The site soon became cluttered (fig. 7). As I added more things to the page--article links, a running clock, links to outside websites--the interface became cluttered and as one person put it, "it's still a bit too busy UI-wise for my taste". There were the central items of interest, links to About, Works and other pages, but there was an abundance of peripheral data that people would ignore. The 80/20 rule came to the fore and demanded a new focus.

Figure 8 | Refinement of Style
The site's clutter was greatly reduced to allow focus on essential content. A background image--people love images--and off-centered elements (based on the rule of thirds) increased initial interest in the homepage.

Thus, I kept with the same style--a focus on large, clickable buttons--and reduced the number of home page down to just the essential links (fig. 8). I added a background image, a common way to increase initial interest, and off-centered several elements, channeling the rule of thirds. The aim: to increase interest. A static, centered interface with a white background is boring and draws no special attention. The softer browns were chosen to lend a professionalism to the site; though, a shade of gold and a more saturated red might have achieved a similar effect (see Stanford's websites).

Figure 9 | Clarity of Content
While approaching the ideal, the button's background became unnecessary and the article wasn't given as much focus. A slight change increase focus on the content (most current article) along with a more appropriate background.

A further revision involved a slight change to the main-page, with a focus on making the icons larger, giving the most recent article better focus by making it's icon larger and shuffling around the container and website name to reduce clutter further (fig. 9). The background image was change to one I'd recently made that better reflected the website. The spacecraft and the bold text 'Onward' emphasizes my focus on the future, pushing forward with new designs and more up-beat, fast-paced attitude. Things at the top of pages are often considered foreground (think sky in a picture) while things at the bottom are perceived to be in focus (think ground). Thus, the logo, 'Syscarut', was moved to the bottom of the page. This makes it more memorable, shifting it to the foreground, a way of adjusting the figure-ground relation.

To further add visual flourishes to the site, both to delight and increase navigational awareness (visitors would understand where interface elements went after clicking), I cooked up the above code. The CSS code above allows smooth transitions when an element's properties change. This is normally done with a :hover selector so that an item, say a link, changes color smoothly rather than in an abrupt fashion. The javascript code above then allows me to transition an element out of the screen (-200%) and bring another one in. By making the body tag have a style of overflow:hidden, there will be no weird scroll bars. This idea seemed novel, so I applied it to switching between articles:

The first code smoothly transitions the page out and then after a set delay, glides the page back in. The second code finds the articles directory and because they are ordered numerically, it can just add or subtract the value and then inject the new source code into the iframe element where each article is located.

Figure 10 | Striking Imagery
The current version of the site puts the most recent article front and center, further reduces visual clutter by removing the shaded background behind the navigation buttons and making the title black-on-white--a higher contrast and more assertive combination than the weak shades of brown used before.

But there was still a certain staleness to the website, the colors did not match the changing attitude. I was listening to Kyau & Albert - Be there 4 U ( Mat Zo remix ) one day while reading a article on DeadEndThrills about Mirror's Edge. The beautiful pictures and freedom evident in the form and structure of that game's city, along with the upbeat rhythm from the song induced me to change to the current layout (fig. 10). There were so many good images to use, I decided that it would be best to use a random number and choose a different picture each time someone visits the site (those re-visiting the site get some new, interesting image each time). I wrote the following code to do so:

Simple, but it works quite well. The striking imagery added a nice touch and the repeated use of white against different primary colors, in both the background and interface elements, gives the site a slick look. Further revisions are undoubtedly forthcoming, but I am very pleased with the aesthetic evolution of the site.

Here are several books that have helped increase my understanding of design: 100 Things Every Designer, Non-Designer's Design Book, The Design of Everyday Things, Universal Principles of Design, Designing with the Mind in Mind.

Pages

Figure 11 | Changing the About page
From information overload (left) to clean, navigable interface (right). Using some CSS tricks, highlighting each topic slides in relevant content rather than overloading people with everything up front.

Several pages received overhauls as the site evolved, among them the about page. Initially an overload of information and text (left, fig. 11). The redesigned page now hides much of the information and gives users a choice of what they want to read and allows quick perusal of the different topics; this is in line with the idea that one should reduce the amount of reading necessary up-front unless a user wants to read it. The ordering of information is further accented by visual hierarchy: the article and navigation text is largest, followed by slightly smaller topic information and finally text at the bottom.

Figure 12 | Evolving the Links page
A static page that just contained a bunch of links, it was pared down to only a few, important topics and links presented hand-picked (fig. 12). This greatly reduced clutter and continued the trend of a consistent interface between all the pages.

The links page had too many elements initially and overwhelmed the user. It contained headings in castellano (Spanish) along with search forms that served no purpose (left, fig. 12). The revision set out to provide an interface consistent with the About page and that focused on key topics with only a subset of the previous links represented. This allowed visitors to look at the topic of choice without other content distracting them.

Figure 13 | The many face of the Works section
Initial works page (right), revision (center) and current implementation (left). The look evolved over time and finally settled on an interface consistent with the Links, About and Music page.

The initial works page just showed a static table of elements, inconsistent with the rest of the website and lacked visual grace while containing too much information (right-most, fig. 13). Searching for some inspiration for a new layout, I came across Thinking for a Living, a great site showcasing interesting content meant to stimulate the mind. The next revision brought images, which make it easier to navigate and give users a better idea of what they will be reading. But it was hard to navigate (horizontal scrollbars anyone?) and took too long to reach the end. The final revision brought the highlight-n-show method from the About, Links and other pages. All the articles were listed horizontally, when hovering over the link, the articles image and date slide in. Much better.

The design page evolved out of a desire to showcase evolving aesthetic style. Initially, many designs took the Swiss style too literally, the posters had too many primary colors, were very blocky and the images were not striking. However, as time evolved, I have gained a better sense of what people like and are looking for. Lastly, I have begun each new poster, image, etc. by laying out what the design criteria are before beginning to put things together in Photoshop or PowerPoint. This focuses attention on the relevant details that need to be included and leads to a better design down the road.

Analytics

Figure 14 | Numbers Matter
Like most site, there was an initial burst of interest following the 'launch' and intermediate activity afterwards. Lesson: Don't launch a site until it has undergone extensive testing and is aesthetically pleasing.

Google Analytics allowed me to assess how revisions to the site affected user interest. Bounce rate, pages per visit and other factors showed positive trends as particular aesthetic revisions were implemented. Unfortunately, when the site recieved its highest level of traffic, it had just undergone the Metro make-over (fig. 6). However, this primary colors on black background wasn't very pleasing to the eye and looked cheap, turning away many users at the homepage. While not necessarily a bad thing--I gained a lot of valuable feedback--it also likely left a lasting impression that would deter people from revisiting. Lesson learned.

In addition, the analytics would allow me to trace desire lines: the pages on the site most often visited, what order they are visited in and those pages that are not used often. This feedback on what is being used shifts attention to which panels need to move (giving more emphasis to oft visited ones) and those that should just be removed (as with the 'Old Blog').

Icons

The icon has evolved from a simple reworking of the letters in the site's name to a more abstract work and finally on the current, more slick design. Like the main aesthetics of the site, the icon evolved both as I learned about the necessary components in a design and the changing goals and look of the site. Icon Handbook was helpful in formulating ideas while Creative Workshop also steered me in the right direction. The initial versions were just lettered forms of the site's name (left-three icons, fig. 15). The next version was very abstract and I had no real vision of what it was supposed to represent, it was something like a comet, but bore no relation to the site. Using the first design challenge in Creative Workshop as a guide, I wrote down the important elements of the site, most used colors and other factors. This lead to the current icon, which gives a feeling of speed and agility, just like the site. The progressively larger stripes also point toward my obsession with rapid revision that lead to reduced clutter (in this case a shorter line at the bottom). Lastly, there is a focus on the three colors used throughout the site: black, white and red.

Figure 15 | Evolving Site Icon
The icon evolved from a basic representation of the site's name (left) to a more abstract work that reflected the feeling and goals of the site (right).

I hope this gives a better understanding behind the design decisions made and the reasons for the constantly changing aesthetic-style. While much of the back-end changes were transparent to the user, they allowed for a site that is more compatible with a variety of browsers and servers, making it more easily updated. The current design is a result of many expriments, some of which were dead ends while others remain in use as secondary skins on the website (fig. 4). The website will continue to evolve, whether that stems from learning a new language, finishing another book on design (e.g. this great book on typography) or other influences, I always aim to keep the user in mind, providing them an interesting website with content they can find easily and want to read.