From last couple days, I am very busy in my Co-Op internship as I had quite odd timings or I had some important work to do in home. Because of these reasons, I was not able to give more time to designing. That’s why yesterday I was only able to complete the main page of the website. I have bit busy schedule with family, so even today, I did not get extra time to work on the design. Yet for both days, I contributed 45 ~ 50 minutes to the design or design related work.
Yesterday, I had not completed enough on which I could write a blog. That was the main reason why I skipped the blog yesterday and planned to include the experience in today’s blog. Yesterday, I spent major time to find out proper typography for the project. I decided to go with using two fonts, one sans serif (for regular body text) and one serif (for headings). Working with multiple fonts is bit difficult as you need to find proper balance between font style, weight, letter spacing and much more. That is why I spent around 15 minutes behind this and I ended up with DM Serif Text and Roboto.
As this website’s main feature is to able to search GIFs from Giphy, I focused more on the search box in main website. I hid the logo/website title in navigation and added bigger heading in the middle. This way, page did not have multiple elements with same styles (except font size) and same text. I decided to take a green colour shade as primary colour for the website. I added drop shadow to the search form in the header so that user feels like the box is towards him and this way it encourages the user. I also designed the case for search suggestions when user starts typing, to give me an idea of what to build when I develop the website.
Today, I started working on the search page. I do not know why but I tend to put more focus on the pages that lists the results/elements. I like to make this area simple but with better UI and UX. I personally feel that, pages like these needs more work than individual item pages. Most of the time, user goes to the item’s page from some kind of list page (search page or group list page). I added the GIF, GIF’s title and ratings to the card because I thought that will be something that user will want to see. During this process, I also added icon where user will be able to copy the code for embed url for that GIF. At the end of the list, I added “Load More” button so that user can load more GIFs as he scrolls through.
Yesterday I had two nav links (about and #trending) but when I was researching about GIF’s response on the API docs I found that Giphy also provides random endpoint. I thought it will be a good idea to include the page to see random GIFs. So I replaces “about” with “#random” in top navigation. Yet I kept the about link in footer so that anyone can learn more about the website.
I thought I will be completing this design in couple days but once I started designing it, I want to make it more enterprise level website. While writing this blog, I am planning to use Angular JS for this project to get that enterprise level feeling.
If you liked today’s blog, please give it a clap and do not forget to follow me. If you have any feedbacks regarding the design/blog, feel free to drop comment in Figma/blog. I appreciate your input, as it helps me to grow myself!
Figma File : https://www.figma.com/file/F8e5iAsiHU8WJOaglQ1fFQ/015-016-Giphy-Search
Last design work : #014 Giphy Search (Part 1 — Wireframes)
Tomorrow’s plan : Continue working on Giphy Search website
Top comments (0)