Close search
Hoa

New design and search bar

Written the .

Months ago, we would like to add a search bar to optimize the way users, developers and new comers find resources on the website. It was optimized for mobile, for several disabilities but the design was getting old and with the landed layout, it was not possible to integrate a search bar. That's why we decided to redesign the website.

Let me show you a quick tour.

Homepage

The homepage has been redesigned but not from the ground up. We removed the “Download” button because we noted that only 4 downloads were made through this button in 2014 while we reached 300,000 downloads with Composer and Github. So this button was definitively not useful!

We replaced this button by the list of Hoa's libraries. In this way, the new comers have a better idea of what Hoa is about and it provides direct links to the documentation.

Previous version of the homepage.

The community is centre stage with a bright new poster showing more than 800 people following and supporting the project!

New version of the homepage.

By default, the page fits into the viewport, masking the menu and the search bar.

Menu

The previous menu was smart in the early days but the Web changes quickly and the user interface too. Moreover, it was impossible to introduce a search bar in this context.

Previous version of the menu.

The menu has new icons, on top of a gorgeous blurred background. The icons are more meaningful and provide more colours.

The main content shifts to the bottom and to the right to create a space for the search bar!

New version of the menu.

Search bar

When we focused the search bar, the menu disappears and the main content moves far in the window. It provides a clean and simple interface.

The search interface.

Type something and our search engine will suggest you several links. The icons remind the menu classification. Click and here you go!

The search interface in action!

The search engine is based on ElasticSearch. Thanks to Guillaume Dievart and Raphaël Emourgeon for the huge help. They made it real!

Community

Finally, Hoa exists because of its community. This is why the community page has been redesigned from the ground up with the avatar of every contributor and the community poster.

The community page.

Conclusion

Everywhere in the website, we have polished and rethought all the details to promote the community, their work, the libraries, the documentation etc. The design is however not yet perfect so feel free to contribute or to tell us what's wrong, we will be glad to hear you!

Comments

menu