design - Sascha-davidson/back-to-static GitHub Wiki

Designs

work by Rosa & Ralph

Ralph and Rosa have taken on the task of working on the design of UltiTV - Commentary Tool. As a team, we began by sketching a wireflow, which we then digitally translated into Figma. Ralph and Rosa continued the design process in Figma, closely adhering to the client's requirements.

Our initial focus was on creating a tournament, and we soon realized the need to create players and teams as well. We extensively designed these functionalities. After this phase, we held a stand-up meeting with the team to explain the design flow. The team was enthusiastic about the design and approved our approach.

Check out the flow of our design below:

Following this, Ralph and Rosa turned their attention to developing the dashboard for a match. Here, we considered the number of players, scoring, the teams playing against each other, and a scoreboard.

Check out the dashboard design below:

Next, we contemplated a user-friendly way to add points. Our clients did this all on one screen, but we decided to create a separate view. This makes it simpler and faster to assign points to teams.

Check out the design for adding a point below:

prototype animations

work by Sascha

I went over the design and made the design interactive. This was done so that we were given the opportunity to send a prototype to the customer. The hoevers that were made were made with variable, prototype animations & smart animation, some are new techniques in figma that is still in beta. This may cause some pages or hover elements to jump slightly (we cannot do anything about this).

all variable's

work by Sascha

Because I wanted to apply this new technology, I thought it would be useful to put the existing design in a car layout so that it all has the same spacing and width. By doing this, I came across things on some pages that were different from other pages and I was able to adjust them properly.

I have also come up with different names and club names, now we can adjust the design to fit the names or handle the names in a different way. the name varies per club and player so now we can take into account that everything fits in this design.

Here you can see the life prototype: Bekijk figma prototype

Design bespreken

work by Sascha

I discussed the design with Ralph and Rosa. I explained that I used: "auto layout", "component" and "variables" to create a technically better and interactive design, I received positive feedback. I then discussed with them how the design will change and helped think about how we can best solve something. I kept asking questions so that I had a good idea of what they still wanted to make/have.

I have a good overview of the main points that still need to be changed and made, I have partly given feedback on how it might be useful to change/make. I have summarized things we discussed and sent them back to them as a question so that I can verify it to avoid mistakes.

Grid + layout.svelte

work by Sascha & Luuk

all pages have almost the same design and therefore always a two-column grid. I noticed this and shared it with the squad. All pages have 1 main and we put the grid in this main, now we can edit the grid per page to how we need it.

Luuk had an addition to this. He has the idea that we let +layoute.svlete load a taplate from the library component. These libraries are created with the grid layout we need and we can then import them per page. Hieronder kan je zien welke Tamplates we zouden moeten maken:

Some of these layouts are single use so we have to look at how important it is that they become a component. For example, like the landing page.