Today, it was time to complete the design for GitHub Timeliner website. I already completed the user page yesterday, so I did not need to think too much about the layouts for other pages. Although I did make a change to yesterday’s design and it was to change the button text from “All Repos” to “View Repos”.This way it sounds more like a button rather than a normal text.
I started the today’s design with the repository page. I just copied the user page and started making the required changes. Again, I was not sure which details I get from the API so I needed to make sure to show useful details from the API response without making extra API calls. Once I had that information, I just used the almost same layout as user page and filled the information.
Next step was to design the modal containing the list of all the public repos for one user. When I was looking into the API endpoint for the list of all repos for one user, I found that I also get a property which says that the current repo is archived or not. To show this state in the list, I created simple tag so that user can easily identify archive repos.
Until Now I had already designed all the important pages for the website. I just needed to create about and 404 pages now. I used the same layout as other pages for about page. I removed the navigation from the page and showed “GitHub Timeliner” as heading. I also added GitHub’s logo as I planned in the wireframe. On the other hand, I used the primary colour for whole page’s background for 404 pages. This way these pages stands out differently and with their own layout and design. I only updated the titles and links to differentiate 404 pages for website, user and repos.
As I mentioned yesterday, I was planning to create mobile design for this website, but website already took too much time for this challenge. I started with the index page’s mobile design and realized the creating the mobile design for whole website will take more time to complete. Because of that reason, I dropped the idea for now. I might be designing it in free time or I might just work around with this during the development of this website.
Figma File: #011, #012 — GitHub Timeliner
Yesterday’s Work: #Day 011 — GitHub Timeliner (Part 2)
Tomorrow’s idea: Secret Message Website
Top comments (0)