Mark Cunningham is a New York based interior designer who has worked on a wide range of residential and commercial buildings. He has been written up in Vogue and the New York Times Magazine, and has been included on the yearly list of America’s top designers by Elle Decor and Architectural Digest. For his site, I wanted to create an immersive visual presentation of his work that encouraged users to dive in and explore the different projects.
In my initial conversation with Mark, I asked him to identify a list of words to describe the site he wanted to have. We narrowed the list down to three finalists that would serve as a starting point for the design:
Clean - Mark’s personal style is simple and precise. As a reflection of him, the site should be too.
Innovative - We looked at many sites of other interior designers and they often felt repetetive. It was important that Mark’s site be distinct.
Editorial - Mark wanted the site to have the feel of a magazine spread.
My next step was to examine Mark's existing site. The first thing I notived was that navigation was laborious. It took three clicks to go from the homepage to a project page, viewing a second project took two more clicks. The site architecture looked like this:
I wanted to make it as easy as possible for users to start looking at his work, so tried to remove as much friction from the process as possible. To do this, I flatted the architecture so that every page is alays available with one click. The new architecture looked like this:
To enable this, I needed a more robust navigation menu that would contain links to every page. This presented one of the main design challenges of the site - I needed to present this information without overwhelming the site imagery.
My first solution was to create a single work page that hosted every image and allowed users to switch between projects with a sub-navigation menu of project links. This was done using the Isoptope Javascript plugin, which hides and shows different sets of images without the page having to reload. I liked the seamless viewing experience it created and the fact that the sub navigation menu presented all the options upfront to the user, leaving no opportunity for confusion.
However, Mark preferred the navigation menu I made for the mobile site.
He liked the hamburger menu functionality and how the images stood on their own without the the sub-navigation menu text distracting.
On desktop, I recreated this experience with a dropdown menu that was triggered by hovering over "Work" in the main navigation menu. Each project was now broken out as its own page.
To create the editorial feel Mark identified, I organized the images into a grid - similar to how a magazine might be laid out. I wanted the images to be arranged in a manner that drew the eye down the page, presenting the project as if the user were on a walking tour of the house.
We selected over 200 images to use on the site and they came in all different shapes and sizes. To fit them into a grid that would scale correctly with the page, I formatted their shapes into standard ratios for portrait and landscape orientations. I then created three different types of row layouts they could be placed into.
Images with the same orientation could be placed side by side.
Images with different orientations could be placed next to each other with a ratio of 2:1.
For special images we wanted to highlight, we made them full width.
At a mobile size, the site uses responsive design to shift each image to 100% width in a single column.
Odyssee is a world composed entirely of gifs that the user must navigate. The site architectures is a 10 x 10 grid of "slides," each of which is composed of a full screen gif, a set of navigation controls and often some other kind of elements. Certain slides contain puzzles the user has to solve to continue. The goal is to make it to the end of the path.
The New York law firm Sullivan Cromwell LLC has a network of blogs on its site that cover different legal topics. This was a design project (they wanted the programming to be handled by their in house team) for their tax law blog - Tax Law Today.
The firm wanted to evolve the site's look and improve the overall user experience. At the start of the project, I spoke with representatives from their Marketing department. We identified these goals for the project, as well as certain limitations.
While they wanted to give the page a cleaner, modern design, there were certain restrictions on design elements because they were standard across their blog network. The color scheme, typeface, header image and certain page elements had to remain in place.
The way to improve the site most significantly was to improve its pay layout and create an information hierarchy to guide the user. The blog consisted of two types of posts: long form pieces written by the firm’s lawyers, and daily roundups of news links from other sites. The long form pieces represented the blog’s core content, but they were quickly buried on the blogroll by the news posts. News posts were added daily, while long form pieces only once or twice a week. The previews of the two post types had the same visual format, so there was little to distinguish them from each other. Their was also an About section that described the tax blog pinned to the top of the blog roll that pushed content below the fold of the page. As a result, the core content of the site was hard to find.
To clarify the user experience, I broke these content types out into separate sections. The main blogroll was reserved for the long form pieces and daily news posts were moved to the right rail. The current day's links were shown in a list, with a link to an archive page. The About section was moved to its own page.
Sullivan Cromwell's motto is “Quietly confident.” My goal was to communicate that with a professional design and an efficient user experience. The site is still being developed by Sullivan Cromwell's team, they are planning to launch in summer 2018.
JZ Banking Services is a private equity group based in the Netherlands. They needed a company website, and wanted it built on Wordpress so that they would have the ability to made content edits. They wanted a modern look and feel that still maintained the level of professionalism that you would expect as a finance company.
Lite.fm was my final project for the General Assembly Javascript course. The assignment was to create a website that used any third party API. I chose to use the Youtube API and built a site where anyone can add a youtube video to a communal playlist, and listen to other videos that have been posted.
The concept was inspired by the way that my friends and I share music over email. We constantly send each other youtube links and I wanted to streamline that process and make it easier to revisit songs that were sent in the past. As a next step, I am adding upvoting and sorting functionality so that songs can be viewed in order of most recent or top voted, and am creating a chrome extension that lets you add a song by clicking it when you are on its youtube page.
Sam Dakota is a New York based artist. For his portfolio site we wanted to create a design that complemented his artistic style and a user experience that made it fun to look through his work. He created a custom wallpaper pattern to serve as a background and I used the localScroll Javascript plugin to create a navigation system that lets users seamless toggle between projects (this is something I later explored in more depth with Odyssee).