Project Specs

2020・4 wks・Web App

My Role
UX / UI Design・Logo Design

Programs
Adobe XD, Illustrator, InDesign

Tags
Association for Computing Machinery・Conference・Graphics



Overview



Symposium of Computational Fabrication is a convention that brings together industry professionals and experts, from all over the world, who compose physical objects using computational tools as a medium.

The aim of the symposium is to, provide a platform for people to discuss and pioneer advancements, disperse/publish well-researched papers, and serve as encouragement for deeper explorations into computational fabrication.

Key speakers, presenters, and attendees come from a variety of backgrounds, such as: architecture, mechanical engineering, computer graphics, material science, manufacturing, human-computer interaction, robotics, applied math, biology, and design.

SCF 2020 is sponsored by the Association of Computing Machinery, an international society for computing. The general chairs and organizers of SCF 2020 provide assitance to host the event this year at Boston University, in Boston, Massachusetts.

Users

There are two audience categories in which the symposium targets:
» ACM, ACM SIGGRAPH, ACM SIGCHI » professional and student members affliated with Association of Computing Machinery; can receive membership pricing for SCF» non-members »  general public or other professionals / students interested in computational fabrication





Role / Scope / Constraints

S

Goals / Deliverabless

» free flow » allow users to navigate to their desired destination efficiently


» multiple pages » separation in categories of information; provide less crowdedness due to an abundance of typed content


» a logo » specific to the year 2020, in exhibition of the location of the symposium, and to rebrand deliverables

» website redesign » a cleaner, clearer concept and system

» poster / postcard / brochure/map / wayfinding »  to guide speakers, presenters, and attendees with the destination of the event spaces






Approach

I first brainstormed on what the team already acquired in the last few months, and used the initial design as a basepoint. From there, I created three versions of quickframes that resonated with their research, and professorial contacts.

Quick Survey

In starting the research and design for the site, a quick survey of 10 people, assisted in determining the make or break points of previous SCF websites.

Break:

» too much information for an infinity scroll
» hard to differentiate the sections from one to the next
» color do not feel welcoming / hook the eye
» would like more dynamic features / presentations

Make:
» visible menu bar to help viewers navigate
» great highlights of areas / informations that need attention to


Process

» Research » client desiring a similar effect of previous year designs; started with SCF 2019 and SCf 2018 site designs

» Content » produce assessible navigation throughout the website; appeal to professionals in the industry

» Design » base on Citgo sign / SCF 2020 Logo

» Development » Using HTML/CSS to implement webstie with web associate Liane Makatura

» Testing » surveying a goal of 10 people (with at least 5 people interested in the symposium’s objective) & receiving insights / feedback to better the design

» Launch » web alive to the public; all digital material design finished and sent out, and physical components printed
c

c

c


c


c

c



Guide



Logo


SCF’s logo derives from one of Boston’s most iconic neon light-up, the Citgo sign — the form is arranged as a cube to connect to the physical objects composed in computational fabrication, from a flat two-dimensional to something you can hold in your hands. The details also give a sense of a kaleidascope — which its constantly changing pattern help characterize the fabrication in design — and a lattice as an homage to molecular sciences.


Digital Sketches

Characteristic:
・Combo of XYZ axes, 3-D cube
・fabricaion of Citgo in negative space
・6 main points to represent carbon lattice
Election A

Characteristic:
・Triangles from Citgo sign
・x2 to form a diamond and represent Citgo ・sign as a gem of Boston
・lattice visual
Election B

Characteristic:
・Triangles from Citgo sign
・x2 to form a diamond and represent Citgo
・sign as a gem of Boston
・lattice visual
・kaleidoscope (constantly generating patterns, equating to the fabrication of patterns in design, repetition, and unconventional perspectives for emerging ideas
・3D cube

Election C

Election D / E

Final Results ︎︎︎



Prototype





Skyler Tse © 2022