Scholarships.com Homepage Redesign

A responsive home page redesign for Scholarships.com using plain html, css, javascript without using any 3rd party libraries.

UI Design Concept - Comparison of existing vs new design concept + design manifesto

Figma Link: https://www.figma.com/file/DlHdjTzRmLoUT7PwtRWzsA/scholarships.com?node-id=0%3A1

Existing vs New design

Live Page - A responsive page per the new design concept

Link: https://lil-white-shadow.github.io/scholarships.com-homepage-redesign/

Highlights

• Graceful application of responsive behavior from 320px mobile screen all the way upto 2560px ultrawide screen size.
• Modern standard design of hamburger menu for tablet & mobile with no-scroll when menu is expanded.
• Impressive and consistent hero image behavior to give site a face lift.
• Sleek implementation of CTA form on button click with hero blur effect.
• Standard card accordion behavior in mobile view for below the fold content.
• Consistent use of color and typeface to achieve a professional, clean, and uncluttered look.
• Methodical & non-intrusive behavior changes in cursor pointer, button, etc. to provide important visual cues during interaction.
• Minimal yet effective use of subtle text shadow, box shadow and other effects.
• And many more ...

All of this achieved without using any external libraries or code snippets.

Demos

Hero image

Tab-1673161142105.webm

Register form and mobile menu

Tab-1673162342844.webm