Back to projects
IT services · Corporate website

Unlocking the power of IT to drive your business forward.

A full redesign of the Amman Dynamics corporate website — ten pages covering services, work, story, careers and blogs, built on a two-typeface system and a six-ramp colour palette.

Client
Amman Dynamics
Role
Product Designer
Year
2024
Scope
Corporate Website Redesign
Amman Dynamics website
Overview

The brief.

About Amman Dynamics

Unlocking the Power of IT to Drive Your Business Forward

Started Since 2016

Since 2016, Amman Dynamics has been dedicated to empowering small businesses. Our unique design process crafts modern websites, apps, and more, ensuring SMEs thrive in the digital age.

Helping SMEs Thrive

Our culture thrives on transparency and hard work. With a track record of empowering over 20 SMEs to thrive in the digital world, we're dedicated to their success. Join us on our exciting tech journey!

2016
Started since
20+
SMEs empowered
50+
Companies worldwide
5
Core service lines

Collaborators

Amman Dynamics
Company
Osama Turki
UX/UI Lead
Sereen Abualrous
UX/UI Designer
Information Architecture

Ten pages, three tiers.

Six pages sit in the primary nav and carry the marketing story. Four detail templates hang beneath them — a project case study, a team bio, a job application and a blog post — each reached from its parent listing. Header and footer stay constant across all ten.

Root
amman-dynamics

Primary nav

  • Home

    • Hero
    • Services overview
    • Solutions
    • Values
    • Process
    • Recent work
    • Partners
    • Testimonials
    • Team
    • Blogs
    • CTA

  • Our Services

    • Intro
    • Service cards
    • Solutions slider
    • Odyssey process
    • CTA

  • Our Work

    • Intro
    • Filter chips
    • Project grid
    • Partners
    • Testimonials
    • CTA

  • Our Story

    • About
    • Innovate / Empower / Connect
    • Timeline
    • Principles
    • Data
    • People
    • Memories
    • Honors

  • Careers

    • Intro
    • Culture gallery
    • Benefits
    • Hiring steps
    • Crafting excellence
    • Open positions
    • Apply form

  • Blogs

    • Intro
    • Topic filters
    • Article grid
    • Coming soon

Detail pages

  • Project

    • Tags
    • Problem statement
    • Solutions
    • Gallery
    • Feature sections
    • Results
    • Feedback
    • Up next

  • Employee Bio

    • Profile
    • Pull quote
    • Biography
    • Connect with
    • Other members

  • Job Application

    • Role header
    • Requirements
    • Personal info
    • Resume
    • Experience
    • Questions
    • Submit

  • Blog Post

    • Tags
    • Topics
    • Inline media
    • Discover more

Global

  • Header

    • Logo
    • Primary nav
    • عربي toggle
    • Get Started

  • Footer

    • Brand
    • Discover
    • Get In Touch
    • Social
    • Legal
Foundations

Typography

A two-typeface pairing — Source Sans Pro carries headings and interface labels, Libre Baskerville carries body copy and captions.

Headings · UIBold · Bold Italic
Source Sans Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ # % ( )
Body · CaptionsRegular · Bold
Libre Baskerville
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ! ? @ # % ( )
Text styles · DesktopEnglish typography
Header 1
Source Sans Pro, Bold, size: 48px, line height: 56px, letter spacing: 0.5px
Header 2
Source Sans Pro, Bold, size: 40px, line height: 48px, letter spacing: 0.25px
Header 3
Source Sans Pro, Bold, size: 36px, line height: 40px, letter spacing: 0.25px
Header 4
Source Sans Pro, Bold, size: 32px, line height: 44px, letter spacing: 0.25px
Header 5
Source Sans Pro, Bold, size: 24px, line height: 32px, letter spacing: 0.25px
Header 6
Source Sans Pro, Bold, size: 18px, line height: 24px, letter spacing: 0.25px
Body 1
Libre Baskerville, Regular, size: 17px, line height: 24px, letter spacing: 0px
Body 2
Libre Baskerville, Regular, size: 14px, line height: 20px, letter spacing: 0px
Body 2 bold
Libre Baskerville, Bold, size: 14px, line height: 20px, letter spacing: 0px
Button
Source Sans Pro, Bold Italic, size: 16px, line height: 24px, letter spacing: 0.25px
Caption
Libre Baskerville, Bold, size: 12px, line height: 16px, letter spacing: 0px
Foundations

Color system

Six tonal ramps — a primary, secondary and tertiary brand colour plus two accents and a neutral grey — each stepped from 50 to 900 for surfaces, borders, text and states.

  • Primary
    Carnation Red
    #F15D5A
    #FDECEB50
    #FCDFDE100
    #F9BEBD200
    #F79E9C300
    #F47D7B400
    #F15D5A500
    #C14A48600
    #913836700
    #602524800
    #301312900
  • Secondary
    Curious Blue
    #2AA5CF
    #F7FBFD50
    #D4EDF5100
    #AADBEC200
    #7FC9E2300
    #55B7D9400
    #2AA5CF500
    #2284A6600
    #19637C700
    #114253800
    #082129900
  • Tertiary
    Buttercup
    #F1BF10
    #FEF9E750
    #FCF2CF100
    #F9E6A0200
    #F6D970300
    #F4CC40400
    #F1BF10500
    #C1990D600
    #90730A700
    #604D07800
    #302603900
  • Accent
    Apple
    #4CB944
    #E9F7E950
    #DBF1DA100
    #B7E3B4200
    #94D58F300
    #70C769400
    #4CB944500
    #3D9436600
    #2E6F29700
    #1E4A1B800
    #0F250E900
  • Accent
    Affair
    #88498F
    #F3EDF450
    #DBC8DD100
    #CFB6D2200
    #B892BC300
    #A06DA5400
    #88498F500
    #6D3A72600
    #522C56700
    #442548800
    #1B0F1D900
  • Basic
    Gray
    #8B8EA5
    #FAFAFD50
    #E7E8F4100
    #DADDF1200
    #BEC2D8300
    #A4A8BE400
    #8B8EA5500
    #73768B600
    #5B5E72700
    #454858800
    #30323F900
Basic
White
#FFFFFF
Key Screens

Ten pages, end to end.

Each page shown in full. Scroll inside a frame to move through the whole layout.

  • ammandynamics.com
    Home page

    Home

    Hero, services overview, values, process, recent work, clients, testimonials, team and blog — one continuous scroll.

    • Hero
    • Services
    • Values
    • Process
    • Case studies
    • Testimonials
    • Team
    • Blog
  • ammandynamics.com/services
    Services page

    Services

    The five service lines laid out in an offset card grid, followed by solutions, the Odyssey process and the closing call to action.

    • Time Leasing
    • Process Inspection
    • Technical Team Building
    • Outsourcing
    • Web Consultation
  • ammandynamics.com/our-story
    Our Story page

    Our Story

    Innovate / Empower / Connect intro, the year-by-year timeline, guiding principles, data points, team and accomplishments.

    • About
    • Timeline
    • Principles
    • Data
    • People
    • Memories
    • Honors
  • ammandynamics.com/our-work
    Our Work page

    Our Work

    Filterable project grid with category chips, a partner logo strip and the client testimonial player.

    • Filter chips
    • Project grid
    • Partners
    • Testimonials
  • ammandynamics.com/our-work/project
    Project page

    Project

    Case study template — problem statement, solutions, feature sections, results and client feedback, closing on Up Next.

    • Problem
    • Solutions
    • Features
    • Results
    • Feedback
    • Up Next
  • ammandynamics.com/our-story/team
    Employee Bio page

    Employee Bio

    Team member profile with pull quote, biography, social links and cards to explore other members.

    • Profile
    • Pull quote
    • Biography
    • Other members
  • ammandynamics.com/careers
    Careers page

    Careers

    Culture gallery, benefits carousel, the four-step hiring path, open positions by department and a short apply form.

    • Culture
    • Benefits
    • Hiring steps
    • Open roles
    • Apply
  • ammandynamics.com/careers/apply
    Job Application page

    Job Application

    Role detail with position requirements, then the full application form — personal info, resume upload, experience and screening questions.

    • Requirements
    • Personal info
    • Resume
    • Experience
    • Questions
  • ammandynamics.com/blogs
    Blogs page

    Blogs

    Topic-filtered masonry article grid with a Coming Soon strip below.

    • Topic filters
    • Article grid
    • Coming soon
  • ammandynamics.com/blogs/post
    Blog Post page

    Blog Post

    Long-form article template — tagged header, topic sections with inline imagery, and a Discover More Blogs grid.

    • Tags
    • Topics
    • Inline media
    • Related posts
Process

From research to shipped UI.

  1. Research

    Reviewed the existing site, the five service lines and the competitive set to find what SME clients actually look for.

  2. Information Architecture

    Grouped the content into six nav pages and four detail templates, then mapped every section per page.

  3. Wireframing

    Blocked out each page at low fidelity — offset service cards, filterable grids and the long-form case study template.

  4. Design System

    Built the foundations: Source Sans Pro and Libre Baskerville, eleven text styles, and six colour ramps from 50 to 900.

  5. UI Design

    Designed all ten pages to high fidelity, including the Odyssey process diagram and the application forms.

  6. Prototyping & Testing

    Prototyped the apply and case study flows, then refined the filters and form validation from feedback.

Results & Scope

What was delivered.

  • 10
    Pages designed end to end
  • 11
    Text styles in the type system
  • 6
    Colour ramps, 50–900
  • 5
    Service lines given their own layout
← Previous
PHC
Manufacturing · Web + Store
Next →
RSA
Strategy advisory · Web
← Back to all projects