Loading ...

Responses by Gabriela Baka, designer; Moby Digg, digital design firm; and Owls Department, development.

Background: Housed at the Center for Philosophical Technologies at Arizona State University, Techniques Journal presents a hybrid space within the world of publications. It is simultaneously an academic journal and an art magazine, a curatorial platform and a design experiment. As the publication touches upon techniques from various points of view, treating each issue as an experiment that challenges both its contributors and audience members—an audience that will change and grow over time.

Design core: The commenting function, which was specifically tailored for this website to enable guest respondents to begin online discussions. These discussions connect each contribution with extra layers of parallel ideas and thoughts. By doing so, it provokes a wide range of audience members to respond and thus enable content to expand endlessly.

This functionality aligns with Techniques Journal’s main conceptual idea “questioning technique,” thereby becoming a space for mixing perspectives: a forum for online discussion and exploration of views.

Challenges: Creating a unique visual language that enhances the idea of discovery and wonder, which Techniques Journal does by interrogating techniques. A diagonal letter T masks the name of the publication but also works as a spotlight, revealing images underneath. By this, we create new visual connections between the journal and its content.

The developed identity is based on sharp, geometric forms placed in an isometric grid, some of them similar to abstracted letterforms. Shapes transform when triggered by user interaction, creating two-dimensional spaces and new connections with text while masking images. By doing so, they visualize change, progression and the variability of the Techniques Journal world.

Navigation structure: We boiled down the navigation to two main points: Issue and About. The landing page functions mainly as a key visual, introducing users to the journal’s world and an image selection from the latest issue. All issues are featured on an overview in alphabetical order, following Techniques Journal’s naming convention. Big letters are interactive, first transforming into a shape and then filling up with the issue’s content. Similarly after selecting an issue, the main hero animation presents images masked within geometric forms.

To help the user navigate inside of long-form, text-heavy content, we created a small side navigation that lets them jump to sections. Additionally, there is the option to download a PDF of all the text.

Technology: As the content plays a key role on the website, we’ve used WordPress as a reliable, elastic CMS. We created a bespoke theme following the journal’s design. On top of that, we built a complex custom module that handles comments to the articles on a per-paragraph basis.

On the front end, we wanted to keep Techniques Journal’s site simple and lightweight. So to create the visual effects, we relied heavily on dynamic SVG manipulation together with a trusted GSAP animation suite. To provide a seamless experience when navigating between subpages, we used Owls Department’s lightweight JavaScript framework designed for building such websites; its newest version has recently been released to the open-source community under the name Ovee.js.

techniquesjournal.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In