NDSS Symposium
![Symposium event info shown on large billboard flyer ad.](https://artversion.com/wp-content/uploads/2024/01/symposium-event-billboard-flyer-ad.jpg)
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.](https://artversion.com/wp-content/uploads/2024/01/ui-visual-elements-bento-layout.jpg)
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.](https://artversion.com/wp-content/uploads/2024/01/techology-3d-graphic-elements.jpg)
![A website UI design on a desktop display.](https://artversion.com/wp-content/uploads/2024/01/usec-security-desktop-ui-design.jpg)
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
![Lower mobile resolution home header section of a UI design.](https://artversion.com/wp-content/uploads/2024/01/low-mobile-resolution-home-header.jpg)
![Symposium event page on UI mobile design with image and info.](https://artversion.com/wp-content/uploads/2024/02/sympossium-2023-mobile-design.jpg)
![Custom purple and grey icons on a lower-resolution screen.](https://artversion.com/wp-content/uploads/2024/01/icons-on-mobile-screen.jpg)
![A responsive mobile screen for a non-profit organization.](https://artversion.com/wp-content/uploads/2024/01/symposium-program-mobile-ui.jpg)
![Previous symposia page with year buttons UI design.](https://artversion.com/wp-content/uploads/2024/01/previous-symposia-year-buttons-mobile.jpg)
![A lower resolution UI design featuring custom icons and event offers.](https://artversion.com/wp-content/uploads/2024/01/each-event-offers-mobile-screen.jpg)
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.](https://artversion.com/wp-content/uploads/2024/01/web-ui-screens-on-tablets.jpg)
![Web design of tech company shown on laptop device.](https://artversion.com/wp-content/uploads/2024/01/web-design-registration-page-laptop.jpg)
![Vertical UI design resources page shown on a tablet device.](https://artversion.com/wp-content/uploads/2024/01/vertical-ui-design-resources-page-1.jpg)
![Company logo mark overlay on a gradient background.](https://artversion.com/wp-content/uploads/2024/01/company-logo-mark-overlay.jpg)
![UI Design dropdown accordion feature displayed on tablet device.](https://artversion.com/wp-content/uploads/2024/01/ui-design-accordion-dropdown-2.jpg)
![UI/UX web designs displayed on digital mobile tablet devices.](https://artversion.com/wp-content/uploads/2024/01/ui-ux-web-design-on-devices.jpg)
![Capital a in black and lowercase in font Hind and weight regular.](https://artversion.com/wp-content/uploads/2024/01/hind-regular.jpg)
![Hind semi-bold typeface letter A.](https://artversion.com/wp-content/uploads/2024/01/hind-semi-bold.jpg)
![Roboto slab typeface in bold weight.](https://artversion.com/wp-content/uploads/2024/01/roboto-slab-bold.jpg)
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.
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.](https://artversion.com/wp-content/uploads/2024/01/person-icon-security-lock.jpg)
![A purple and grey security shield icon.](https://artversion.com/wp-content/uploads/2024/01/security-shield-icon.jpg)
![A purple and grey shield icon.](https://artversion.com/wp-content/uploads/2024/01/shield-icon.jpg)
![A graduation cap icon in purple.](https://artversion.com/wp-content/uploads/2024/01/graduation-cap-icon.jpg)
Interactive Elements
![Company logo on a mobile design UI screen.](https://artversion.com/wp-content/uploads/2024/01/company-logo-and-mobile-design.jpg)
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.