Skip to content
WorkServicesProcessPricingAboutFAQBook a call
All work

Website

CSIA Foundation

A website that makes a Web3 security group look serious and trusted.

Client
CSIA Foundation
Sector
Web3 security and standards
Deliverables
Desktop pages, dropdown menus, styles
Screens
12 desktop frames at 1440 px
CSIA Foundation key visual

Overview

A Web3 group that looks trustworthy.

CSIA Foundation sets security standards for Web3. Its site covers membership, a resource library, the mission, the $DVT token and the fight against black and grey markets.

I designed the desktop site: home, three dropdown menus, Mission & Vision, $DVT Token, Combating The Black & Grey Market, and the Blog, White Papers, Webinar & Podcast, Events and Forums pages.

The challenge

Serious content, and a name to protect.

  1. 01Membership, resources and articles fight for the first click.
  2. 02The library has five content types and nine industries.
  3. 03Long policy pages must stay easy to read.

The approach

Editorial look, clear menus, one rhythm.

  1. 01Thin serif capitals and dark photos feel calm and trusted.
  2. 02Dropdowns split resources by type and industry, two clicks from any page.
  3. 03Every page ends with the same testimonials, form and footer.

Structure

Four menus, one library.

The navigation, three dropdowns and page designs.

Home

  • MembershipJoin The AssociationCompany MembershipCorporate Membership
  • ResourcesBlogWhite PapersWebinars & PodcastsEventsForums
  • By industriesKYC & KYBLicensing & ComplianceID Cards & Access ControlMemorabiliaTicketingHealthcareManufacturingLuxury GoodsFine Art & Collectibles
  • AssociationMission & VisionOur Governance Protocol$DVT TokenCombating The Black & Grey Market
  • Editorial
  • AccountLoginApply

Key screen

The home page hero.

One statement, two membership paths, proof right below.

CSIA Foundation, The home page hero
  1. 1
    Knot mark and wordmark

    The CSIA mark leads a slim, dark nav bar.

  2. 2
    Four menus

    Membership, Resources, Association, Editorial, plus Login and Apply.

  3. 3
    One statement

    Reputation Is Everything, in Antic Didone capitals.

  4. 4
    Two membership paths

    Core Membership and Enterprise Membership as pill buttons.

  5. 5
    Hero slider

    Dots show there are several slides.

  6. 6
    Trusted by 45M+ Members

    A row of member logos under the hero.

Key screen

The resources menu.

The biggest menu, listing every resource in two ways.

CSIA Foundation, The resources menu
  1. 1
    Browse everything

    A link to all CSIA resources, above a blue line.

  2. 2
    By type

    Blog, White Papers, Webinars & Podcasts, Events, Forums.

  3. 3
    By industries

    Nine industries, from KYC & KYB to Fine Art & Collectibles.

  4. 4
    Underlined links

    Easy to scan on the dark panel.

Page flow

The home page, top to bottom.

Dark and light bands take turns.

CSIA Foundation, The home page, top to bottom
  1. 1
    Hero

    Reputation Is Everything, with two membership buttons.

  2. 2
    Trusted by 45M+ Members

    Five member logos in one row.

  3. 3
    About Us, Membership, Editorial

    Three photo cards with a blue caption.

  4. 4
    Membership Benefits

    A photo, a short list, a Learn More button.

  5. 5
    Membership Types

    Company and Corporate plans side by side.

  6. 6
    Resources By Category

    Six categories with icons, in two columns.

  7. 7
    Unlock the Power of Web3 Today!

    A blue banner with one Get Started button.

  8. 8
    Here's What Our Members Have To Say

    A testimonial slider on a dark band.

  9. 9
    Stay In The Know

    A contact form with two checkboxes.

  10. 10
    Footer

    Newsletter signup, links and social icons.

Inner pages

The same system everywhere.

Blog, $DVT Token and Combating The Black & Grey Market reuse the same look.

CSIA Foundation inner pages
CSIA Foundation inner pages
CSIA Foundation inner pages

Visual language

Ink, steel blue and light.

Steel blue is for buttons and cards. Ink is for the header, bands and footer.

  • Ink#0D0E14
  • Charcoal#14141A
  • Steel Blue#256488
  • Primary Blue#3EA7E2
  • Ice#E6F6FF
  • Mist#F5F6FA
  • Grey G5#C8CCD9

Typography

Display

Aa

Antic Didone

A thin, high contrast serif used in capitals for every heading on the site.

  • Regular
  • Uppercase

Text

Aa

Inter

Used for body copy, navigation, buttons and forms.

  • Light
  • Regular
  • Medium
  • Semi Bold

Deliverables

What I delivered.

  • Home
  • Dropdown menus
  • Mission & Vision
  • $DVT Token
  • Combating The Black & Grey Market
  • Blog
  • White Papers
  • Webinar & Podcast
  • Events
  • Forums
  • Colour and text styles

Want this kind of clarity for your website?

Book a free 30 minute call. You leave with 3 written fixes, even if we don’t work together.

Nafees ZulfiqarUsually replies within an hour 5.0 from 33 Upwork reviewsTop Rated
OpenTaking new projects for NovemberBook a call