Quote
Menu
Open
Close
Close
Back
Back
Selected Projects
Quote
Three ring binder design for financial company.

Morgan Stanley
Students inside a College Interior.

Legat Architects
UI/UX design for manufacturing and technology company.

Caterpillar
UI/UX design for a manufacturing company.

Kitamura
Client logo in a dark color on a dark background.

Aiwa
Person Holding Report Design Cover.

Hilton
UI/UX design for language coaching company.

Lingo Live
A semi-truck on a highway.

Volvo
A recording studio with a person signing in a booth.

Philharmonic Studios

NDSS Symposium

Symposium event info shown on large billboard flyer ad.
UI/UX UI/UX

Project Disciplines

01
Research
02
Strategy
03
UI/UX design
04
Web design

Interactive User Experience

Continuing their collaboration with the non-profit Internet Society, ArtVersion teamed up with them to redesign and refresh their NDSS website and UI/UX experience

UI design visual elements bento layout.

A Refreshed UI/UX Design

The Network and Distributed System Security Symposium (NDSS) is a symposium that fosters information exchange about network and distributed system security. To amplify this renowned event, ArtVersion transformed its digital presence into a dynamic platform that reflects its reputation for innovation and offers an engaging user experience.

Technolgy 3D purple graphic elements.
A website UI design on a desktop display.

Dynamic Web Presence

The website's design began with a conceptual stage, carefully addressing its content-rich nature.

ArtVersion focused on preserving the intricate details while presenting them in an engaging layout. Given NDSS's extensive information, including past Symposium events, submissions, leadership details, and historical data, the information hierarchy was critical. ArtVersion balanced this dense content with captivating visual elements, enhancing user engagement through microinteractions and integrated graphic design.

UI Mobile

Responsive Designs
Lower mobile resolution home header section of a UI design.
Symposium event page on UI mobile design with image and info.
Custom purple and grey icons on a lower-resolution screen.
A responsive mobile screen for a non-profit organization.
Previous symposia page with year buttons UI design.
A lower resolution UI design featuring custom icons and event offers.
A person holding mobile device of a website design for a non-profit organization.
A responsive mobile web design.
Header with text and gradient background displayed on mobile screen.
Keynote speeches title and image of mobile design displayed on lower resolution screen.

Contextual Graphic Design 

The website's graphical elements were carefully chosen to symbolize the concept of "networking."

Through abstract, circular designs, symbolizing unity and community—ideal for a symposium theme, the graphical elements added visual interest. Additionally, the headers featured a rich color gradient and graphic elements, cohesively tying together the visual aspects of the site.

Web UI design on tablet screens.
Web design of tech company shown on laptop device.
Vertical UI design resources page shown on a tablet device.
Company logo mark overlay on a gradient background.
UI Design dropdown accordion feature displayed on tablet device.
UI/UX web designs displayed on digital mobile tablet devices.
Capital a in black and lowercase in font Hind and weight regular.
Hind
Regular
Hind semi-bold typeface letter A.
Hind
Bold
Roboto slab typeface in bold weight.
Roboto Slab
Bold

Typography

Hind and Roboto Slab were chosen as the typography styles to convey a professional appearance. These fonts mirrored the esteemed nature of the symposium, offering clarity and professionalism without straying from the Internet Society's established brand standards.

Color Selections

The website's color palette drew significant inspiration from NDSS's established brand colors. ArtVersion creatively adapted these hues across the website, using varied tones to highlight specific sections, segment content with color blocks, and integrate them into graphical elements for added visual appeal.

Teal Green
#40B2A4
Blue
#24366E
Light Blue
#3A82E4
Purple
#511E84
Light Lavender
#E3DAEB
Black
#000000

Custom Icons

Custom iconography was designed for the website, serving as a visual tool to segment the information-dense site and establish a clear visual hierarchy. Each icon was methodically designed to symbolize distinct aspects of NDSS, such as its attendees and their fields and other critical elements. This attention to detail was paramount, recognizing that icons play a significant role in conveying the overall visual narrative.

A custom icon of a person and security lock.
A purple and grey security shield icon.
A purple and grey shield icon.
A graduation cap icon in purple.

Interactive Elements

UI Icons on a mobile device gradient overlay background.
Custom icons with a purple color palette.
Custom icons with a blue color palette.
Company logo on a mobile design UI screen.

Outcome

The website’s launch resulted in a dynamic and informative platform that showcased upcoming symposium events, as well as functioning as an archive of past years. Now, with a website composed of simple navigation and categorization alongside visual appeal, NDSS continues to inspire leaders and innovators.