michael puskas
View Project

Duolingo’s Front Page

My second wireframe was a replication of the top of Duolingo’s front page, which showcases some very attractive design. It’s a very welcoming introductory page, with little information being presented, and a large focus on the “Get Started” button.



I made this wireframe using Axure, Inkscape, and Gimp.

Everything, fonts excluded, was made from scratch.



Functionality is of much less importance on this page than on Google’s. For example, the original site features a carousel on the bottom of the screen that only moves 2 flags per button press. This slow trudge through flags was, in my opinion, causing too much friction to retain the element’s usability. Because of this, I changed it to move the entire set of visible flags on every button press. The downside to this is that the number of flags would have to be a multiple of 7 to maintain full sets, but I feel that having a non-full set at the end isn’t very bothersome.



This front page is very interesting in that its sole purpose is to pull potential users in. Most sites immediately showcase the breadth of their functionality, or at least offer some of the advertised features, but Duolingo’s designers must have felt that would be too overwhelming. With this page, you give users an easy starting point from which to ease them into the service, and once they choose a language, they’ll never see this page again. This allows them to keep the page as a simple introduction, and allows users to be comfortable in the restricted set of verbs.



On the original site, there are more graphics and information sections underneath the area that I’ve chosen to wireframe. Since the interactions present in them were fairly simple, I’ve chosen to instead focus on the first impression that this site offers.




Note: Since this project was meant to be quick, I didn’t go through the extra work to make everything responsive. 16:9 resolutions should work, since that’s what I developed on.

© Michael Puskas, 2016. All rights reserved.