PFK Rewards
Round 5
@le-designer#2845
5000
New mobile design link: https://www.figma.com/file/VieH92sQDXUKOj4ocYRg7u/Mobile-Web-Keep-Dashboard?node-id=6%3A136
Introduce yourself
My name is Fadi, and I’m a freelance designer. I came across Keep when my brother was explaining to me DeFi, and an article about it came up in my research.
Nodes
0xa70058376D3e3D87327Cd2B3B7088621FFf98e83
Contribution
29.10.2020
I'm super excited to share with you my second PFK contribution
My testnet address: 0xa70058376D3e3D87327Cd2B3B7088621FFf98e83.
Contributing mobile components to the Community Design Kit
As of now the community design kit
largely features desktop components, and the example stickersheet section doesn't feature any mobile screens.
I went about creating all of the missing mobile components in order to later create a mobile-first KEEP Dashboard.
Throughout this process I collaborated with, one of the co-authors of the community design kit, to make sure the components and the new designs reflected the direction of the design kit. Link:
2. Improving the mobile web design of the keep dashboard
While creating the components for the community design kit, I found many places where the mobile breakpoint had a regressed UX because a custom mobile-first design hadn't been implemented. So I redesigned all the screens of the dashboard to be mobile-first and rethought some of the components to come up with a unique mobile style.
The new designs are built on top of the KEEP Community Design System,
so this allowed me to reuse and extend many of the subcomponents and styles that the Keep design community came up with. Link: These mobile screen designs are now being used by other members of the Keep community as their starting point for their own mobile designs. For example @blackchain made a dark theme for the mobile web dashboard:
Link: https://figma.fun/cwVsaZ
3. Github Issues I then broke the new designs into smaller UX issues and filed them on Github so the Keep developer team can address the design changes progressively. I used @kather Github Issue template to explain the suggested changes along with my Figma file as a pesudo-PR for the missing CSS.
26.09.2020
Testnet address: 0xa70058376D3e3D87327Cd2B3B7088621FFf98e83
My PFK September challenge is: Redesigning Keep’s mobile web interface.
- Designed 4 mobile web screens from the token dashboard using the Community Design Kit
- Introduced mobile components to the design kit and also mobile specific CSS improvements
- Worked with the design kit team to ensure my components were consistent with the design system so that they could be added to the kit
- Contributed feedback to the Design Kit on minor style fixes and updates
New mobile design link:
https://www.figma.com/file/VieH92sQDXUKOj4ocYRg7u/Mobile-Web-Keep-Dashboard?node-id=6%3A136
I'm super excited to share with you my second PFK contribution
My testnet address: 0xa70058376D3e3D87327Cd2B3B7088621FFf98e83.
Contributing mobile components to the Community Design Kit
As of now the community design kit
largely features desktop components, and the example stickersheet section doesn't feature any mobile screens.
I went about creating all of the missing mobile components in order to later create a mobile-first KEEP Dashboard.
Throughout this process I collaborated with, one of the co-authors of the community design kit, to make sure the components and the new designs reflected the direction of the design kit. Link:
2. Improving the mobile web design of the keep dashboard
While creating the components for the community design kit, I found many places where the mobile breakpoint had a regressed UX because a custom mobile-first design hadn't been implemented. So I redesigned all the screens of the dashboard to be mobile-first and rethought some of the components to come up with a unique mobile style.
The new designs are built on top of the KEEP Community Design System,
so this allowed me to reuse and extend many of the subcomponents and styles that the Keep design community came up with. Link: These mobile screen designs are now being used by other members of the Keep community as their starting point for their own mobile designs. For example @blackchain made a dark theme for the mobile web dashboard:
Link: https://figma.fun/cwVsaZ
3. Github Issues I then broke the new designs into smaller UX issues and filed them on Github so the Keep developer team can address the design changes progressively. I used @kather Github Issue template to explain the suggested changes along with my Figma file as a pesudo-PR for the missing CSS.
- https://github.com/keep-network/keep-core/issues/2143
- https://github.com/keep-network/keep-core/issues/2144
- https://github.com/keep-network/keep-core/issues/2145
26.09.2020
Testnet address: 0xa70058376D3e3D87327Cd2B3B7088621FFf98e83
My PFK September challenge is: Redesigning Keep’s mobile web interface.
- Designed 4 mobile web screens from the token dashboard using the Community Design Kit
- Introduced mobile components to the design kit and also mobile specific CSS improvements
- Worked with the design kit team to ensure my components were consistent with the design system so that they could be added to the kit
- Contributed feedback to the Design Kit on minor style fixes and updates
New mobile design link:
https://www.figma.com/file/VieH92sQDXUKOj4ocYRg7u/Mobile-Web-Keep-Dashboard?node-id=6%3A136