Today, I started working on converting wireframe into final design. I wanted to design this website better than my previous websites. I am planning to use proper colour themes and proper grid layout in the project.
I started the design phase from Adobe Colour website for colour inspiration. I tried different colour plattets from “Explore” tab, and at the end I decided to go this blue and orange colours for my project. Once I was done with that, I started designing website from the wireframe.
When I started designing the search element of the page, it got a bit complecated. At first, I was trying to use the same layout from yesterday’s wireframe where it had inline form (without labels and container). When I started to implement that, I realized new UX issue in that design and it was form labels. We can always remove the labels with better placeholders but what if user is not sure what is the textbox about once he already started typing? Now, he can not see the placeholder and it makes a bad UX in the page. Labels are also better in accessibility of website.
So When I was planning to add labels, I got an idea to create container for this form. This container helped to bring out the form towards the user with better drop shadow. This way, I was able to separate form from the title and other elements from the website. Once I completed index page, I started designing index page when website displays the suggestions for user input.
Yesterday I mentioned in the blog that I did not want to create search
page, but when I was designing the suggestion elements, I realized that there might be a case when user will not know the complete name of the user or repo, at that time, it will be better to move the user to search page with more search results. This way, user can search from our website and they do not need to go to the GitHub.
Now it was a time to create a page with timeline. When I was started this website, I was not sure what details I get from API for the user. I have to research more about API today again. I needed to make sure what details I get and needed to choose those details which we usually get for all the users. I added those details to the header of the page. Then, I started designing the timeline. I did not have to think much for that because I had this layout in my mind since the beginning.
Tomorrow, I will design repo, about and 404 pages. I will also be designing the mobile design for the website. _Feel free to drop your comments and feedback on the design. I appreciate your comments, It helps me to improve myself as a designer. _
Design file on Figma: #011, #012 — GitHub Timeliner
Yesterday’s blog: #010 — GitHub Timeliner (Part 1)
Tomorrow’s plan: left pages and mobile design for GitHub Timeliners
Top comments (0)