search

louisvilletech / louisvilletech.org

A consolidated directory and calendar of technology user groups and meetups in Louisville, Kentucky.
https://louisvilletech.org/
MIT License
15 stars 22 forks source link

Design refresh #18

Open ericlathrop opened 6 years ago

ericlathrop commented 6 years ago

We've used the current design for a while, and after the name change it would be a good idea to do a design refresh.

jsonnull commented 6 years ago

I think a design refresh is a good idea!

I'm happy to contribute—I'll follow this thread for now.

ericlathrop commented 6 years ago

I do like the "cards" for events, but maybe that isn't the best format for the other pages? Also, maybe the events can be grouped into "this week" and "further away" groups.

jsonnull commented 6 years ago

I like the cards for events as well, and I agree that other pages could benefit from other formatting.

For the homepage events, I have a few thoughts. I remember on my first visit immediately seeing the cards and missing some of the headers. They're very information dense and the "Louisville Tech Event Calendar" heading is lightweight and does not have much whitespace. I think separating the events into "this week" and "further away" options could help give the page a better top-down structure.

I also think the cards themselves could have the structure adjusted to appear more like events at first. I have a few qualms here: 1) The date appears before the session title. I usually look at the title and then go down for more info, so it takes some piecing-together to get the full picture. 2) The dates are very dense, and we could make them easier to read at a glance by omitting some information. For reference, currently the format is "Wed, November 1st, 2017 @ 6:00pm." I propose something like "Nov 1, 6:00pm" or "1 Nov, 6:00pm". I do think the day of the week can be important for reference, so maybe it's possible to show this with hover text. 3) Text-alignment varies. The top information blurbs have icons, which set them off from the side by a consistent amount. The session name has a larger icon, pulling it out of alignment. Finally the description is fully left-aligned. A consistent left-alignment for the text would help a lot by making the icons more recognizable (they're isolated in the left gutter) and making the text more legible (easy to scan and read the start of each line) 4) I don't have the best vision, and the combination of grey/blue text and small/smaller text sizes are slightly straining. I would suggest aligning all the text with some vertical rhythm—consistent margins and line height. The links can stay a primary color, but the supporting info could be darker and heavier. Finally, the description could also be darker—in order to keep it from becoming too distracting and dense with the darker color, some additional whitespace could be used to let it breathe.

I would like to do a digital mockup to present how these improvements would look compared to the current ones. It would also put these ideas in a format that could be discussed and iterated quickly upon. Is that something you'd like to see?