general styling changes to make client look more polished

livemusiclocator / lml_frontend_client

2 stars 1 forks source link

general styling changes to make client look more polished #5

Open markryall opened 6 months ago

threefins commented 6 months ago

I can start on this if that makes sense. It wont be particuarly pretty but will get us some of the way.

webfont choices
Page organisation/ IA type stuff
nav perhaps
idea of what a 'gig listing' should look like - what is the important information in the headline version and the long form version

Also, we should consider:

working well offline (if I have the tab open on my phone and go into a venue in an underground carpark)
sharing and bookmarking needs to just work !
responsive design
accessibility ( starts with using the right markup i reckon)

More generally:

We probably need to think about what the punters would want went they arrive and how we get them there (metaphorically or not).

Perhaps we can think about what examples do this well - Air BnB is a kind-of good example of using a map. The realestate websites I guess (ahem...) too.

threefins commented 6 months ago

Update:

I'm deep into a bit of html-refactoring - mainly targetting the root level navigation - so stuff like the overall branding header and nav. I'm trialling using tailwindcss which has proved a bit controversial in the past but I'm liking it right now!

Oh and I've decided initially to use the existing stuff: https://www.livemusiclocator.com.au/home as inspiration for colours and design etc. Once I am done with the top level styling stuff, I might then work on some of the listing views, but possibly want to carve that off separately.

I guess it might be a good idea to get some sort of mockups going with Figma or similar - I should mention that tailwindcss and figma seem to be good friends so I hope that we can make that transfer pretty smoothly.

threefins commented 5 months ago

OK we've now got a few things in that will help with the layout. Not entirely there on the tab order/ accessibility stuff but that'll be covered elsewhere.

I've left hopefully some room for a more talented visual-designer to come in and change the colours and other things where needed. There is some space on the page for a logo and a header which should suffice for getting the LBMF stuff in place.

We are only using two breakpoints right now which makes things a heck of a lot easier to test - tempted to maybe even stick with one. But for now we have default styling for everything less than the tailwind large breakpoint. At the tailwind large breakpoint we add some affordances for big wide monitors (well 1024px wide anyway!) - mainly uncollapsing the hamburger menu.