# animeshrai.com URL: https://kalpana-srivastava.pages.dev/work/visual/animeshrai-com > The personal-brand website of Animesh Rai, HR consultant, author and co-founder of Ripples Learning. Many roles, told as one credible story. [← All visual work](https://kalpana-srivastava.pages.dev/work#showcase) Website · Animesh Rai · Ripples Learning # animeshrai.com The personal-brand website of Animesh Rai, HR consultant, author and co-founder of Ripples Learning. Many roles, told as one credible story. _\[Image: animeshrai.com home page: hero “Prescribing Solutions that Work” with a portrait, an introduction with three numbered roles, NDTV feature, social links, masterclass video, the HR Analytics book, blog posts, a photo gallery, client logos, a speaker enquiry call to action and a newsletter sign-up.\]_ Page 1 of 2 Home “Who is Animesh, and why should my organisation work with him?” What to look for - A three-word promise and a portrait before any biography - Credentials in numbers, then the three roles he plays - Proof in layers: press, video, a book, events and client logos - Everything ends in one action: call him as a speaker or consultant Pick a page, then scroll inside the window to see all of it. Client Animesh Rai · Ripples Learning My role UX & UI designer Year 2022–23 Platform Web [Visit live site ↗](https://animeshrai.com/) ## Context Animesh Rai is many things at once: co-founder of Ripples Learning, director at CHRMP, an HR consultant with 18 years of experience, the author of a book on HR analytics, a speaker and a keen traveller. His website had to hold all of that without reading like a CV, and give event organisers and companies one clear reason, and one clear way, to get in touch. > How might we present one person with many roles as a single, credible story that ends in a conversation? ## What I did - Defined the information architecture: Home, Video, Travel, Book, Blog and Contact - Designed the home page as a story, from promise to proof to action - Set up a small visual system (one serif, one sans, one blue) and reused it across every page - Designed responsive layouts for long, content-heavy pages ## A promise, not a biography _\[Image: animeshrai.com hero: black navigation with a handwritten signature logo, the headline “Prescribing Solutions that Work” with Work in large blue serif, a letter-spaced subtitle and a cut-out portrait of Animesh.\]_ [1](https://kalpana-srivastava.pages.dev/#hero-1)[2](https://kalpana-srivastava.pages.dev/#hero-2)[3](https://kalpana-srivastava.pages.dev/#hero-3)[4](https://kalpana-srivastava.pages.dev/#hero-4) 1. 1 A signature as the logo A personal brand signs its name. The handwritten mark appears again in the book section and the footer. 2. 2 One word carries the hero “Work” is set at 128px in blue serif, so the promise reads in a single glance. 3. 3 A quieter second voice The subtitle is spaced out in light grey, so it supports the headline instead of competing with it. 4. 4 A real face, cut out The portrait breaks out of the grey band, with blue line accents that echo the headline colour. ## Credentials, then roles Straight after the hero, one paragraph gives the credentials in numbers. Then three numbered columns split the person into the roles visitors actually come for. _\[Image: Introduction to Animesh Rai with highlighted numbers, followed by three numbered columns: Entrepreneur, Consult and Traveller.\]_ [1](https://kalpana-srivastava.pages.dev/#roles-1)[2](https://kalpana-srivastava.pages.dev/#roles-2)[3](https://kalpana-srivastava.pages.dev/#roles-3) 1. 1 The numbers are highlighted “More than 20,000 HR professionals from 56 countries” is picked out in blue, so skimmers still get the proof. 2. 2 Three roles, one icon style Entrepreneur, Consult and Traveller each get a blue icon, a serif title and two lines of copy. 3. 3 Ghost numbers Large, faint 01, 02 and 03 give the row rhythm and a sense of order without adding noise. ## The home page as a story The home page is long, so every section has one job and they come in a deliberate order: who he is, proof that others trust him, what he offers, and then a way to reach him. Hover or tap a number to see each section’s job. _\[Image: The full animeshrai.com home page as a thin map with 11 numbered sections.\]_ [1](https://kalpana-srivastava.pages.dev/#map-1)[2](https://kalpana-srivastava.pages.dev/#map-2)[3](https://kalpana-srivastava.pages.dev/#map-3)[4](https://kalpana-srivastava.pages.dev/#map-4)[5](https://kalpana-srivastava.pages.dev/#map-5)[6](https://kalpana-srivastava.pages.dev/#map-6)[7](https://kalpana-srivastava.pages.dev/#map-7)[8](https://kalpana-srivastava.pages.dev/#map-8)[9](https://kalpana-srivastava.pages.dev/#map-9)[10](https://kalpana-srivastava.pages.dev/#map-10)[11](https://kalpana-srivastava.pages.dev/#map-11) 1. 1 Promise “Prescribing Solutions that Work”, with a portrait. 2. 2 Who he is Credentials in one paragraph, then three numbered roles. 3. 3 Press Featured on NDTV: borrowed credibility, early. 4. 4 Community A dark band with his social channels, to follow him beyond the site. 5. 5 Masterclass A video invitation, so visitors can hear him before booking him. 6. 6 The book HR Analytics, signed with the same handwritten mark, with one Get your copy button. 7. 7 Blog Three recent articles as cards, proof of expertise in his own words. 8. 8 Gallery Events and conferences around the world, in an even photo grid. 9. 9 Clients Fifty well-known logos: “Have helped top organisations with meaningful solutions.” 10. 10 Act “Want to call me as a speaker or consultant?” and one Fill the form button. 11. 11 Stay in touch A newsletter card that overlaps the footer, for visitors who aren’t ready to call, then short links and the signature once more. ## One system, different moods Every inner page reuses the same parts: the hero formula, the serif headings, the blue accent, the newsletter card and the footer. The mood changes with the subject. _\[Image: The Book page hero: a tilted HR Analytics book cover beside “Knowledge is the only way to Success!” with Success! in large blue serif and a Get your copy button.\]_ The Book page reuses the home hero formula, a small serif line and one big blue word: “Work” there, “Success!” here. _\[Image: “The Author” band on the Book page: large grey serif title, a biography in white on black and a black-and-white portrait of Animesh.\]_ “The Author” switches to black and white, so the book page feels editorial while keeping the same type. The Travel page (second tab at the top of this page) goes darker still, with a night-sky hero and a masonry gallery, while the type, newsletter card and footer stay the same. ## The style guide behind it 01 · Colour - Signature blue #0087cc Hero word, buttons, highlights, newsletter card - Charcoal #333333 Headings, social band and footer - Black #000000 Navigation and the author band - Hero grey #ededed Hero backgrounds - Body grey #7a7a7a Subtitles and body copy 02 · Type - Hero word · Libre Baskerville_128px · Bold_Work - Heading · Libre Baskerville_32px · Bold_Have helped top organisations - Subtitle · Helvetica_24px · Regular_Helping Organizations & Individuals - Body · Helvetica_16px · Regular_Animesh has been consulting organisations for 18 years. 03 · Components Hero formula · reused on Home and Book Prescribing Solutions that Work Helping organizations & individuals Knowledge is the only way to Success! A must-read for HR professionals Buttons Get your copy Enter your emailSubscribe now Numbered role Consult Consulting organisations and individuals for 18 years. ## Result A live personal-brand website that brings a consultant, author, speaker and traveller together in one consistent story, and ends every visit with an invitation to talk. Visit it at [animeshrai.com](https://animeshrai.com/). [Next · WebsiteRipples Dimensions websiteThe website for Ripples Dimensions, a Ripples Learning product.](https://kalpana-srivastava.pages.dev/work/visual/ripples-dimensions-website)