Git Product home page Git Product logo

gutenberg-redesign's Introduction

Title Picture

57.000+ free Books deserve a beautiful home!

Thats why we went ahead and thought of ways to improve the user experience (UX) of gutenberg.org the largest open source project for making books a public good. In order to let everybody take part in this process we made it available here and everybody who wants to help is welcome!

New Features!

  • Modern design
  • Easier book search
  • Brand new mobile app!

New Logo

old logo new logo

We simplified the logo using only the G in the font "gutenberg" and made it black giving it a premium, classic look.

New Homepage

new homepage

We gave gutenberg.org a much improved, modern design. Because nothing should distract from the core-element of the site - the books.

If you open a website to read a book, you want to get reading as quick as possible. Thats why we also added a new kind of search: Simply fill in the sentence

"I want to read ... "

with whatever you like, be it the genre, the author, release date or reading time. And if you know already exactly what you want, just type it in and it'll get you there instantly.
Given its importance, we placed the search as a prominent element, capturing the users attention immediatly. Based on the users input on the search field the site displays book recommendations.

One place for both books and audiobooks.

reading and listening

Having one website that does it all is radically improving the ease of use. So we want to combine project gutenberg and libriVox. If a book is available as audiobook as well, it is indiacted by a headphones icon on the cover.

Making contributions easier

contribute audiobook

The gutenberg projects depends on contributions, thats why contributing should be made as easy as possible. So we added the possibility to set up a profile, benefitting also the user experience of the site, as the profile can be used to set up personal booklists and reading preferences. When content is missing (Be it a translation, an audio recording or reviews) the possibility to add new content is displayed prominently.

New Menu

menu

In order to simplify the user experience and tidy up the page, we created a hidden side menu with a List to access all subpages easily. The website slides to the right making way for the menu.

New Design for Blocked Page / 404 Page

blocked page

We are based in Germany where project gutenberg is currently faced with a lawsuit over a few books, which led to the blockage of german IP Adresses. The current page german users are "greeted" with is definitely worth improving. So we created a new design for 404, Blocked or error pages on gutenberg.org

Contribute

So far these ideas are all just concepts and mockups. We havent even started with updating the design of the other subpages on gutenberg.org. So theres a lot left to do.
But if you are a designer/programmer dont hestitate to jump aboard and get involved :)

Creative Commons Attribution ShareAlike

All content is licensed under Creative Commons Attribution-ShareAlike. This means that you can use & modify everything as long as you credit us and publish your resulting work under the same license.

Together we make project gutenberg a more beautiful place!

To Do

  • Design mobile page / maybe even app
  • create designs for all other subpages on gutenberg.org
  • code designs in css, html, js
  • submit them to the gutenberg team

P.S.

If anyone knows a way to get in touch with the gutenberg team we'd love to hear that, as were currently trying to contact them ;) Thanks in advance!

gutenberg-redesign's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.