Updating the UI (General & Setting the Tone)

[JulianDietzel]

The current UI is just the default Bootstrap look and has some alignment issues here and there. I think it would be nice to give the page its own unique character / look. If #252 ever sees the light of day, this would be a perfect opportunity to make those changes. But it would make sense to have an idea of how we actually want the website to look before we make major changes

To me, the best plan of action for this would be to go through the following steps, creating basic simple image / pdf mockups along the way:

1. Set the tone / Find out what kind of website it should be. (Should it be dark / bright, more or less colorful, blocky or playfully rounded, etc.)
2. Find a color palette and the fonts we want to use
3. Update the website page by page. First making a mock up and the implementing it

(Of course the process is going to be much less linear, but I guess this could give some structure to the process)

I don't exactly know how to structure all of this into different issues. So I'd propose we just start using this for a general discussion on updating the UI and then open up new issues if necessary.

[JulianDietzel]

I am very open to how the app could look but here are some ideas that I had:

• I personally quite like the website of Slackhouse: I think high contrasts and strong popping colors like those could really fit the content of the highline-freestyle app well. I am not sure about making the the entire websites background black though. I guess it helps with the strong colors but it might be a little much?
• I'm not much of a font nerd :D but looking through examples I found that all caps bold fonts like the following could work really well for the navbar and the subheadings ("Level 1", "Level 1", ...) in the list view

I'll be back with more ideas and maybe some mock ups when I find the time :)

[hell3nacht]

hi! played a bit with colors (not sure if the purple is a bit too much - but i liked it) and fonts - so here some small ideas :)

font: rowdies colors: beige #B29E8F; purple: #AF7CE5

• thoughts on fonts: all caps is nice but i also want to throw all lowercase in the discussion
• colors: looked at my mockup for a moment and probably a darker theme would be (as you mentioned) cool, not sure about the bold bold colors. probably a thing to try out and see if it works :)
• added the helpButton neyt to the trick list heading - would be a nice place to display some short words on how to navigate the list and website in general (?)
• the alignment of boxes and everything in my mockup, is not at 100%, sorry for that - i was a bit lazy there

[DavidKaep]

Another thing i would like to add is that the use case for the app is pretty much exclusively mobile, (who brings their pc to a higline?) so i suggest making the mobile version the primary design concern. Elements like the top nav bar translate a lot better from mobile to desktop than others. (The left nav bar is exclusively desktop whereas the bottom nav bar is exclusively mobile right now) The slackhouse website @JulianDietzel mentioned does this really well with the mobile and desktop experience being very consistent although i think its style has some other issues when applied to this project:

• The site looks high contrast but has some weird colors that affect readability. The WebAIM project has a contrast checker as well as other resources that can be used to gauge whether a particular color choice is high contrast enough for general accessibility. The second picture Julian posted has some black on purple text that my laptop display really struggles with for example. A quick check with this tool reveals the contrast being too low. I think this is a very good guideline to use because it makes sure things are readable across the most common types of devices and ui scalings.
• I also agree with the pure black being too much. It works here because of the picures of products being the main focus but i dont think it will work as well with multicolored text boxes like we are using.

Wrt the post @hell3nacht made i like the little mini serifs in the logo but im not sure about using it in the headings. Maybe lean in to it more in the logo with the logo with the rest being a consistent font? I dont really understand the use of the help button. If an app of this size needs a tutorial we did something very wrong and the general information is handled in the about page. Anyway good stuff :)

I will also try to mock up some designs in the coming days/weeks.

[JulianDietzel]

All those points are really good. I think both designing for mobile first is a good idea and considering the accessibility of the design is, as you said, important. I will take them into consideration from here on out.

For now I have some designs to share which @hell3nacht and I came up with together. This was before reading your comment so they are mostly focused on the desktop and we did not check for proper contrasts yet.

The fonts are

• Permanent Marker (for the Logo)
• Rowdies (for the navigation items and the headings in the trick list)
• Rubik (for everything else)

For the designs we mainly played with the colors of the skill frequencies as they are very dominant in the design already. One problem we see with this might be the lack of proper primary and secondary colors for buttons and such.

A general issue to point out is the challenge of balancing the look of the website for both users entering the website for the first time and users which have already marked their stick frequencies. For the first time user the website can get to bland but if that is fixed, the website might get to cluttered / messy for a user who has input his / her stick frequencies.

If anyone wants to utilize components of our designs or edit them, hit me up, all the designs are on Figma and I can grant editing rights to other people.

(If there are any slim white borders around the designs, they are from taking the screenshots and are not part of the design)

Navbar on the side

The search bar could be sticking on the top for this design as the space for it was saved / created by removing the original grey header. The A, B, C, D Navbars are alternative versions we tried.

Navbar on the top

Note that the navbar would we wide when opening the page and collapse down into a narrower version when scrolling. The Search Menu can be opened an closed via the search button. The A and B Navbars are the collapsed versions in two different "colors".

Prior version

This was a concept at some point of the brainstorming. Neither @hell3nacht nor I prefer this version but it might still be something to play with. The little raccoon is just a placeholder for any kind of related white lineart (preferably less fine and dense).

[JulianDietzel]

Skipping ahead a little I was experimenting with how to display the additional filtering options for the search bar and wanted to share my result. The style of this could be adapted to any style we decide on.

The interactive prototype can be found here.

Screenshots:

[bastislack]

Thanks everyone for your work!

Here some thoughts:

As @DavidKaep mentioned we should definitely focus on mobile first, I don't think the desktop version will really be used for now.

For the dark/light theme I don't have a preference and would leave that up to you. If you prefer a dark theme we could start with that. In the future we could maybe provide both :)

Regarding the navigation I think it would be really nice to combine the navigation bar with a navigation drawer. In Material Design there are examples for this: Navigation Bar and Navigation Drawer (in our case I think the modal Navigation Drawer would look nicer). The reason why I think we should combine them, is not for the use case with only having tricks, combos, and the generator (for this the navigation bar is sufficient) but to be able to have more categories, such as a Wiki (to explain the different positions and other terminology for example), Freestyle theater (overview of all the motivating Youtube videos about Freestyle), and more... Following is a screenshot of Google Drive that use exactly this concept with the button in the top left corner to toggle the navigation drawer and the navigation bar for further navigation within one category of the navigation drawer:

The color choice is also definitely a challenge. I agree that it would be nice to have nice primary and secondary colors as is usually used in apps. But, as already mentioned, this kind of clashes with the colors of the stick frequencies. One option I see is to use something else instead of colors as the main visual cue to mark the stickfrequency, such as icons or decorations. Other solutions would be to use color shades or gradients between only a couple of colors but I already played around with that and I really couldn't make it look good, that's why I chose the colors that are currently implemented. Do you have some good ideas on this?