Kierans SaaS Landing Page

The objective of this project was to build a performant, accessible and responsive modern landing page for a fictional company providing SaaS. Since the design of the UI is so critical to attracting and retaining users I decided to first design the site using the design tool Figma. This would allow me to quickly piece together an attractive and accurate template to work from.

A real world project such as this would allow me to work on critical aspects required of front-end development. These include optimizing site performance and the page first load speed, ensuring the site is accessible and ARIA compliant and finally responsive design.

To bootstrap an accurate and modern design as quickly as possible, the desktop version was designed with Figma. This time spent in design now would save me much more time later on and therefore increase my development efficiency. Good UI is critical for or a company that relies on attracting and retaining users.

By working from design I was able to better visualize common and recurring styles which ensured I could limit duplicate code. I able to save a large amount of time in development which otherwise may have been spent iterating in the browser.

For the rest of the technology involved the focus was to keep things simple. A lightweight build using HTML, SCSS, and Snowpack as a build tool and development server was chosen. The bloat involved in a JavaScript framework was not required for this project.

The deployed version of the site is successful in accomplishing its objective of being performant. First page load on average is less than 1 second and the same goes for the time-to-interactive.

To provide accessibility to it's users the sites main mobile navigation is functional even without JavaScript and color contrast guidelines are adhered to.

As far as the design itself I am more pleased with the outcome. By first starting with design I was able to produce a more polished first release version which is important if you expect to retain users. It looks modern and uses different shades of the same color effectively. I believe having a good eye for detail is important even to a developer like myself.

Often developers are required to work from a specific design and so this was an important task to me. It allowed me to visualize how I would structure and write code and therefore increased my efficiency and allowed me to produce a better product faster.