Early version of lanceplaine.com (2016)

UX/UI Design - HTML/SCSS/JavaScript


📋 1. Description of the project

In April 2016 I decided to redo my personal website. The purpose was to have a clean and really simple website which highlight what I was doing at Talentoday.


👨🏻‍💻 2. Process and work

2.1 Analysis

Before I started to draft any mockups I took the time to analyse what I wanted to appear on my website and what was it purpose:

  • Briefly describe my work: Talk a little bit about what I am doing at Talentoday and what is my design process.
  • Contact: Have a way for people to contact me.
  • This website shouldn't be a news feed about me: There are a ton of social media about this like Facebook and Instagram. Instead it should just contain links to my social media accounts.
  • Be short and concise: One page was enough for me. I wanted something that I can do quickly and that would not require a lot of time to update in the following 12 months.
  • Prove what I can do: I wanted through this website to prove that I'm able not only to design a webpage but also to do the related HTML/Scss views. This is why I decided to code this page from scratch instead of using a service like SquareSpace.

2.2 Early drafts

After benchmarking a little I started drawing few options. You'll find below the last drawing iteration. The website, which is a one-page application contains the following sections:

  1. Header
    • On the top left 3 anchor links "Summary", "Previous work" and "Contact" with icons.
    • On the top right my profile picture with a chat bubble saying "Hello". The initial plan was to have the page in both English in French. People would be able to change the language via the select input in the footer or on clicking on the chat bubble. When the English language is selected the chat bubble would says "Hello", otherwise it would says "Bonjour".
    • The header has a pentagon shape.
  2. Summary
    • Few lines to describe me and my work process.
  3. Previous work
    • Few sub-sections with illustrations of my work at my previous companies. I ended up later renaming this section "Work" and only talking about my job at Talentoday.
  4. Contact
    • A tagline and a call-to-action to contact me.
  5. Footer
    • On the left my social media accounts: Facebook, LinkedIn, Instagram, Twitter and GitHub.
    • On the right a select input to select the language.

2.3 Sketch mockups

Once I had the draft of the website I started to use Sketch to do a pixel-perfect version. You can see below 6 majors iterations that I did on this page:


2.4 Exports

Once the Sketch mockups completed and prior to code I make sure to export all the assets:


💎 3. Outcome

I designed and coded the website from the ground up. The design was made using Sketch and the website was build using AngularJS and Express. The code was hosted on GitHub and published under the MIT license.

The icons (HTML 5, Sass, AngularJS, Git and Sketch) on the top part of the website were animated using CSS.