I'm a front end developer and I need a page to display information about all schools in my city (52).

I tried using Bootstrap Cards and an input where the user will type and the cards bellow will be filtered, only showing the schools that matches the user giving info.

But I think it look really bad and boring. Does someone has tips on how to do this in a nice way?

how it looks right now, pretty bad

  • Why do they need to all be on one page? I live in a city with many, many schools. But the only ones that are relevant to me are the ones I can realistically get to in the morning. So.. in my local region. Let the user choose their region of the city they are interested in so as only to show them the schools most useful to them. – JonW Feb 14 '19 at 14:39
  • 1
    Seems like you have divided the schools into regions, so why not use a map to show the geographical locations more clearly? Not sure what the purpose of your website is or who the primary audience are but you can also try ranking or sorting them in more creative ways (take a look at data visualization examples). – Michael Lai Feb 14 '19 at 22:14

A scrolling list of nicely designed, consistent cards might look a little better than what's there - even though the cards themselves are the same size, the variable height of the information WITHIN each card makes it look misaligned, since the buttons show up as staggered. Also the actual information is all very similar in look

You might also consider what information is most critical to show (and what you have available), and perhaps find a more nicely designed way to display each school. A photo or map on the side, the name called out more prominently, maybe a little more information about the school that is of interest to the audience.

Here's a super quick idea...

School List idea

| improve this answer | |

I agree with JonW that you can automatically filter down based on the user's region.

However, to start, you may consider integrating with a mapping service and showing a map with pins and popups with this info for all the schools. Users will be comfortable with panning and zooming to regions they are interested in even before they realize they can filter the schools in other ways. Also, it acts as a colorful initial visual to greet visitors.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.