It’s been a week since I started my #100DaysOfDesign Challenge. This challenge helped me to grow up my productivity. I was able to complete the 6 designs (including for mobile devices) in 6 days, which I have never done before. I would not call myself as a UI designer, because I am not focused on design as much as other designers. I started designing website because I wanted to make a portfolio with good websites (with good code features as well as which looks good to the eyes). I feel proud that I have grown so much in the design area.
Today’s idea was to create a Product Image Gallery component which functions similarly to the Amazon’s product page. It shows all the available product images in small thumbnails. User can click those thumbnails to see the bigger image. User can also hover on active image to see detailed view of that picture. These were the features I wanted to add to my design.
When I was researching for the ideas, I found that it will be better if I add dummy product details to the page to make it look more realistic and real-word. But when I was sketching the wireframe for it, a new idea popped in my head. Why not take the website as your product? I decided to go with that idea and used “Product Image Gallery” as a product’s name in the design. The idea is very silly where product’s image is not related to the title, but that’s what will tell the users about the website. It will not confuse them with a e-commerce website clone and will give an overview of website’s idea when they land to the page.
Once I had a basic wireframe, It was time to move to the Figma. I started designing the website, and I faced a new issue. I was not able to find images for one product which can fit in the website’s theme. I tried looking on pixabay.com, pexels.com and unsplash.com for high quality results. I also tried to googling about this, but I was not able to find some good pictures. That’s why I moved to Ikea’s website and chose one product and grabbed images from there. I usually do not prefer to use images like this. I know that if I mention their site in the page, it will not be an issue, but I always try to ignore that. I had no other option to follow these steps today 😞!
I personally feel that I ended up with good colours for the website. Colours have nice contrast and it makes website to feel like modern e-commerce website. I also added slight border radius to the elements to remove the boxy filing from the page. I added the website’s description in the index page so I had plan to design only two pages (as you can see in wireframe). But then I thought it will not be a good design if nothings happen when user clicks “Buy Now!” button. This button is the primary button and it will catch the user’s eyes. To fill up this issue, I designed another page which just gives a Thank you feedback. This way user will not feel that website is not complete.
When I was designing the mobile version of the index page, I decided to remove the zoom animation on small screens. I will show an alert instructing user to visit the site in desktop to experience the zoom animation. You might be thinking that why I took this step to remove website’s one important features on most used device size. And the answer is that it is not a good user experience. I used third party library to add similar image gallery with zoom animation in my past project: The Timeliners. When I tested my website on mobile design, I felt terrible User experience on mobile screen because sometimes when I was scrolling the screen, sometimes it detected that scrolling as image hover and tried to show zoomed image. Because of my terrible past experience, I decided to drop a feature rather than trying to mimic the desktop experience to mobile screen. (I have fixed this issue on my old website now!)
I had few extra minutes today, so I gave a try to prototyping in Figma. I did not go crazy with it. I just added click prototypes to the design so that I can feel try out the basic click flow of website. I am planning to add animation to the elements when I will be developing this website to make it more awesome!
What are your thoughts about today’s design and website’s theme? What do you think about my decision to remove the zoom animation on small screens? Please drop your feedback in Figma file or at the end of this blog. I appreciate your feedback as it helps me to improve myself.
Today’s Figma File: #007 — Product Image Gallery
Yesterday’s website: #006 — CSS Filter
Tomorrow’s Idea: Mind Reader JS Game
Top comments (0)