Creating an easy to use and accessible layout for a new social net for those who love reading books.
Understand
Starting Point
LGBUR was pretended to be a social net for those who love reading books. As the main way for users to interact within the net "book cards" were requested to take up most of the space available on screen, which allowed users to see a bunch of books without even having to do any further actions.
Among the main areas a "Top Navigation Bar", fixed to the top of the screen, was also required. It was the area where users, apart from being able to navigate through all the sections within the website, could make a custom search.
The layout also had to have a very simple "Footer", which must be fixed to the bottom of the screen while visiting the site.
Among the main areas a "Top Navigation Bar", fixed to the top of the screen, was also required. It was the area where users, apart from being able to navigate through all the sections within the website, could make a custom search.
The layout also had to have a very simple "Footer", which must be fixed to the bottom of the screen while visiting the site.
Ideate
Wireframes
Early sketches on paper of Lgbur website
Digital wireframe of Lgbur's "Home" page
Before moving onto the design process, rough sketches on paper of "wireframes" were carry out to quickly lay down main ideas. "Crazy eight" ideation technique was used to quickly draw the desired features of the layout.
Once a layout was picked out from the rest of the sketches, digital "wireframing" process could begin.
Once a layout was picked out from the rest of the sketches, digital "wireframing" process could begin.
Design
Key Mockups
View of Lgbur's "Landing" page
View of Lgbur's "Home" page
View of Lgbur's "Want to read" page
View of Lgbur's "Profile" page
On Lgbur's website users could barely carry out any actions apart from browsing books, liking other users' books and manage their "Want to read" ones. As you can see above, and due to what it's been previously said, "Book Cards" take up most of the space available on screens, no matter if it's on desktop or mobile resolutions.
Design
Sticker Sheet
View of Lgbur's final "Sticker Sheet"
Gathered on the above "Sticker Sheet" you can see Lgbur's colour palette, iconography, typography and some components used to build final mockups.
Take aways
Get to the point
Comparison between Wireframes and Mockups
On Lgbur's website users can barely carry out any actions apart from browsing books, liking other users' books and manage their favourite ones. As you can see above, and due to what it's been previously said, "Book Cards" take up most of the space available on screens, no matter if it's on desktop or mobile resolutions.