In the morning, I was going through my list of project ideas and found “CSS Filter”. I personally prefer to create such websites which helps to learn something. That’s why I chose this idea for today’s design.
Before I started designing it, I knew that it will be very similar to CSS borders website I designed during the 3rd day of the challenge. In my project ideas list, I usually tag the technology I want to use in that website. Today’s topic was focusing on using Materialize CSS framework. Luckily I already had “Google Material Design Kit” in my Figma account, so I did not need to research about it.
During the starting phase of my web development, I used Bootstrap CSS framework a lot, but I always overridden the default style to make it look like different website. For an example, house-md-tv-show.now.sh. I had the same idea today. I did not want to use the same design as CSS framework, but still keeping website very simple. Because of that, at the end of the day, I only used one of the element from the framework (range sliders). Materialize CSS has very nice form elements in compare to Bootstrap (It is my personal opinion).
Index page has very simple layout. It has Image and code block in the header area, following up with the list of all the possible options with individual range elements. When I was researching about CSS filter property, I found 4 values/options that is either complicated or very simple which can not be implemented by range slider. I did not want any text boxes in the list of all these range elements. Because of that, I took information from w3schools.com and added it to the page. This way one can fully understand the filter property from this website.
I love the about page that I designed and the reason is that I learned how to convert generic element into brand for such website. The main/complex element on index page was range slider in dragging state. That’s why I just grabbed the copy of that element and increased it’s size. And I ended up with very interesting element for my about page. I used the same element for the 404 page but with eye catching red colour.
When I started creating mobile design for index page, the only tricky part I faced was the table. I could have change it so that table columns become separate row, but it would have taken away that table feeling on mobile device and it might not be a good UX as it would increase the scrolling size of website. Because of that, I kept the table as it was and I planned to add horizontal scrolling.
Now, there was a new UX problem to solve. Whenever we add horizontal scrolling to an element, we need to ensure that we are giving some kind of visual feedback to the user that tell user that there is content hidden in horizontal direction and he needs to scroll to reveal this content. The same issue was raised when I was creating mobile design for Screen Saver website (which I designed on 4th day of challenge) and I solved it by showing some content of third emoji card. To solve today’s issue, I added an element with linear white gradient to give that feeling.
I was bit tiered because of work and I was not feeling good to work on today’s work at first. I might have skipped design today, but this challenge is all about consistency and dedication. I overcame my mood and started working on this and I am feeling very proud on myself that I ended up with a very good web design.
If you have any feedback regarding the design, please drop it in Figma or at the end of this blog. It helps me to improve myself as a designer and a developer.
Figma Design File: https://www.figma.com/file/ovlnxqo02iUExMLmH98Cy7/006-CSS-Filter?node-id=0%3A1
Yesterday’s work: Day 006 of #100DaysOfDesign — Designs for Mobile devices
Tomorrow’s Plan: Product’s Image Gallery Section
Top comments (0)