This site has gone through many iterations over the past few years, from being an online portfolio through to a space for ideas. Trying to cater to all social media platforms as a one-man band is an insurmountable task, which meant I needed a single source of truth. Essentially, two pages, one, an archive showcasing my architectural visualizations and two, a blog that records the process. As for the technical side, I tried to keep it as simple as possible after having experience with many content management systems like WordPress and Cargo, I felt a static site generator, would be the way to go.
Concept
I started creating variations based on a twelve-column grid layout in photoshop. My aim was to list the projects with relevant meta-data on each row. I then needed some inspiration on how I could develop this concept, so I have listed some of the sites that influenced the result below.
John Pawson
When I first visited John Pawson's site, it felt brilliantly minimal. Right from the home page, consisting of just four headings, placed all the way to the top left and then a list of entries with an accompanying thumbnail on the right once selected. The article page taking up about twenty percent of the screen space and being positioned to the right makes for easy reading when the text is larger than usual. The position of the elements on an ultrawide monitor however, become a little extreme.
Good Times
This site by design practice, Good Times, instantly stood out to me for the huge title, which incorporated an animated colon, in between the word "GOOD", visualising time moving. I also thought the projects, listed as folders, resembled a Mac/Windows OS UI which was clever as you could also switch the view into a list.
YEEZY
The brief for the Yeezy store must have been to strip back everything to its bare essentials. A minimal store with each item, together with an id code and thumbnail image, positioned on a dynamic grid that can be resized. Once an item is selected, the product is centered on a blank page, with only the additional photography, price and size in view, which immediately adds the product into the basket once clicked.
ZARA
Zara's site could be perceived as an expansion of the Yeezy store. Largely due to the similar layout and the addition of hundreds of more items and the extensive product data available as variables that could be filtered, just like tags on a project. The travel guide/mode section of the site was surprising considering this was a clothing store but felt the personal posts on cities through photography was inspiring.
Kühl & Han
I was immediately drawn to the index page of Kühl & Han for the immaculate list of projects in chronological order. Hovering over a project also overlaid a few images/gifs in random positions across the page, resulting in beautiful compositions that seem to break the grid layout. Even the cursor seems to have mutated into a pair of sunglasses or eyeballs.
Jacob McKee
Jacob McKee's impressive portfolio as a colorist includes a homepage that is divided into a three by two grid which dynamically resizes once a featured film is selected. The index page is then an alternate view of all projects displayed as a list that takes up half the screen on the right and allows for the film overlaid on the left once hovered over the title. What I found pretty neat was that the Colors page filtered selected screen grabs based on the color-temperature found within the frame.
Result
After getting to grips with 11ty, a wonderful static site generator, I was able to convert my final design from a photoshop concept into working HTML and CSS.
Essentially, there is a homepage with a large menu consisting of site title on one row and Projects and Notes on the next. Hovering over any of the buttons changes the colour from a light grey to a darker one. I then added an empty grid, styled on graph paper, that could also be interpreted as 3D axes, waiting to be filled and hinting at the work to follow.
The Projects page is a list style view of each project sorted by most recent or in-progress. The column headings also provide important data such as building type, location, architect and year. As "Projects" is the current active menu item, it takes a darker shade of grey to emphasise this. This is also carried over to the hover colour when selecting projects, together with a 1px bottom border, determines the chosen one.
The selected project page puts the work on centre stage with the title taking a third row. The colours of the title and "Projects" are the same, again, to emphasise the current selection. It's based on breadcrumb navigation over three rows instead of one. The date and tags are also displayed below.
The Notes page is where blog posts are listed, in the same style as the projects but with only two headings: date and title. The pagination system is hidden until more than the required posts have been created.
The Tags page lists all tags currently in use on the site. It's a great way to categorise posts and search for relevant content as there is no search function built in.
Once a tag is clicked on, a page with all selected tagged posts will be displayed in a numbered list.
That's pretty much the whole site but as an added design requirement, I wanted it to have a dark mode, which only got activated if the system mode matched what the user had set.
I built this site to be future-proof and dynamic enough to cater for all sorts of arch-viz content. I have a few projects currently in the works and will be posting regularly in the coming few months documenting their progress.
The eagle-eyed amongst you will have noticed that I have intentionally omitted the About page, as I believe, to put it poetically: every project and post is what I'm all about.
Peace out.