Forem: Harsh Patel

Why I stopped #100DaysOfDesign Challenge 😔

Harsh Patel — Mon, 11 May 2020 02:39:28 +0000

During last month (April 2020), I started #100DaysOfDesign challenge where I was planning to work on at least some design and complete more projects in small amount of time. But from last two weeks, I have stopped this challenge. Someone might say that I am giving excuses because I was not able to maintain the challenge and yeah at some point it is true. I accept that at some point I failed to maintain this challenge but there are other reasons as well.

My Co-Op does not have proper times for each day. I mean there is specific schedule but it varies for me to start or end the job each day. After sitting on desk for 8 hours straight, I do not like to sit there more and spend another 1 or 2 hours for design and/or write a blog on this. although I have maintained around 22 to 25 days from which I have wrote blogs until the 16th day of the challenge. After that day, I stated working on Budget Tracker App (2nd version of my old Expense Tracker App project).

When I was working on Budget Tracker, I was looking on some videos in YouTube and realized that I really need my own portfolio website live as soon as possible. Because of that reason, I dropped the Budget Tracker app on index page and I started planning my website. As it was my first portfolio and I wanted it perfect, I spend more time before I started designing the website!

At this time, I also realized that I also have other things in my life that I want to do and I want to start working on them as soon as possible. I currently have Service Administrator Co-Op and it requires constant attention which makes me tired after 8 hours. Few days ago, I was having back pain also. I am not saying that I will not be designing but I do not think that I will be able to spend 1 hour on designing after such long hours of work. I wish I might be able to complete such challenge in future 😞.

Please checkout my profile to see my past blog posts on this challenge. Feel free to drop comment that what are your opinions on such challenges? And did you have to drop it because of such reasons?

Day 015, 016 of #100DaysOfDesign — Giphy Search (Part 2)

Harsh Patel — Thu, 16 Apr 2020 23:47:26 +0000

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

Day 014 of #100DaysOfDesign — Giphy Search (Part 1 — Wireframes)

Harsh Patel — Wed, 15 Apr 2020 04:11:10 +0000

Another day with another API project for this challenge. I personally like working with APIs, yeah sometimes it get frustrating if API does not have proper documentation but at the end you can create something cool with that data! And what is more interesting than GIFs? That’s why I chose that API for today’s project.

Whenever you plan to work with APIs, you need to research about that API before you start working on it. You need to know what that API provides and how can you use it in your project. This process can give you rough idea of what pages and elements you can add to your website. I personally like this approach. At first when I started using APIs, I used to watch full project video based on that API in YouTube. It helped me a lot to understand it. But after quite a bit experience with different APIs, now I can take a glance on their docs and can go on creating wireframes and design for the website.

Once I looked at their docs (which is really great ❤️), I found that they provides an endpoint for trending, which is pretty cool. When I saw that endpoint, I had an idea in the mind to feature that as hashtag and as a major feature in the website. Currently, wireframe has one frame for three pages but when I will start designing it, I will try to make them bit different than each other. I am planning to inspire the design of this website from Figma’s website. I will add some circles with fun and bright colours in the background to make it interesting. I will also give focus on designing the GIF cards as well. These are the cards that user will be seeing on the page most of the time.

Although I created almost all the pages that website requires, but I am not sure why I am feeling like I missed something in this. If you find something missing from the wireframes, please drop a comment in Figma file or on this blog. I appreciate your feedback as it helps me to grow myself as better designer.

Yesterday’s work: #013 — Secret Message

Tomorrow’s Idea: Final design for Gliphy Search

Day 013 of #100DaysOfDesign — Secret Message

Harsh Patel — Tue, 14 Apr 2020 00:17:36 +0000

Did you ever wanted to share some important data to someone but you do not want to leave traces in social media platforms so that this information does not get leaked? I faced this issue many time and that is why I got and idea to create this website. It is also inspired from my work place, where we face this issue as well. We use similar tool as today’s website.

I wanted to keep it very simple for users. Because of that reason I chose to go with desktop only design in the website. But, today I have designed desktop website as a stretched out version on mobile website. This way I did not have to design for small devices separately.

As you can see, it is very simple and straight forward design. As I started designing it, I realized that I need more than 2 pages for this website. I wanted to design screens for viewing the message as well modal to get the sharable link. I also realized that it will be better to create expired page for the links, so that if I try to view the message twice or someone else has already opened the message, website informs that the link is expired. I might remove the links as expired after 3–4 months.

It was a quick design so there might be some issues or some areas where I could have done better. Please drop your feedback in the blog comments or in the Figma file. It helps me to improve myself as designer. And do not forget to give a like to this blog!

Today’s Figma File: #013 — Secret Message

Yesterday’s Blog: #012 — GitHub Timeliner (Part 3)

Tomorrow’s idea: Something with Gliphy API

Day 012 of #100DaysOfDesign — GitHub Timeliner (Part 3)

Harsh Patel — Sun, 12 Apr 2020 20:08:56 +0000

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

Day 011 of #100DaysOfChallenge — GitHub Timeliner (Part 2)

Harsh Patel — Sun, 12 Apr 2020 04:08:15 +0000

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

Day 010 of #100DaysOfDesign — GitHub Timeliner (Part 1)

Harsh Patel — Sat, 11 Apr 2020 05:55:03 +0000

From today, I am starting to design bit more complex websites which will take more than one day to be completed (because of my Co-Op schedule). I am working with a cool idea I found from App-Ideas repo on GitHub. I will be making a website that can show a timeline of particular user or user’s public repository.

I spent my most of today’s time in the discovery phase. I have not used GitHub API yet so I was not sure what and how we get data from server. I needed to do some research on this before I start designing it. I will suggest everyone to follow this step if you are designing for a client which talks to API. This helps you to understand how can we show that data to user with nice UI and UX. I have a bit busy schedule nowadays and I do not want to move my focus from design to code for now. So there might be some small design changes during the development of this website. I will be modifying the template as I know more about the API’s response.

Once I had the basic knowledge of API, I knew what details I have to display for search results. I started creating wireframes for this website. As this website can generate timeline for User as well as user's repository, I wanted to let user know that they have multiple options to search. To solve this UX issue, I added dropdown before the text box which will have three options: All, Users and Repos. Website will have autoload so that user can see the related results. I will be disabling the submit event in this repo as I did not want to design and develop search page for this website. I wanted to keep user's search experience short and simple.

I just followed the designs from index page and created wireframes for other pages. I ended up with three 404 pages. You might think that, Harsh why do we have three different 404 pages in one website? The reason was the context. I has a generic 404 page, 404 page for user's page and one for repo's page. I had to design these pages to handle the scenario when user visits the timeline page with wrong URL which will make an invalid user/repo name. During the development of 404 page, I got an idea to improve the UX. If user has entered the wrong repo name for the user, there will be a button which will open the modal containing list of all the public repos of that user. This way user can continue browsing around in the website.

I have not started designing in Figma yet. Some people might think that, if I have not designed anything today, that means I broke the challenge. But I do not think that is the case. I always take research and wire-framing process as essential parts of the website. I might not have started drawing layers in Figma, but I have completed most of the ground work for tomorrow. These steps will rapidly increase my design speed and I will be able to focus more on design itself rather than thinking about UX or layout that much.

Sorry for bad hand-writing in the wireframe image 😅!

Yesterday's design: #009 - Mind Reader Game

Tomorrow's Plan: Creating Final design for GitHub Timeliner in Figma

Day 009 of #100DaysOfDesign — Mind Reader Game

Harsh Patel — Fri, 10 Apr 2020 03:43:23 +0000

Today’s idea was an interesting one for me. The idea was to design website for Mind Reader game. I have not done JS Games yet and I have not designed any, so it was bit out of the character for me. And here I am, writing blog about my today’s design.

I started by discovering about other JS games for an inspiration. It was bit hard to find but I did notice one important thing in all of them that they usually has dark colour theme. It is an important choice when we are designing for games as many times games access the website in night or in dark room and I would not want to kill their eyes! I chose to go with a dark theme based on dark navy colour. Design’s layout and wireframe did not had anything extra ordinary in it. It was a very basic website except I had to design a special case where we give a feedback to the user about his answer (in this case it was modal).

I did not had much time today for a design and I was having a bit pain in my back. Yet, I wanted to complete the design with all the pages and mobile. designs. Index page, the only part which was quite complex was the cards. It was not the complicated for desktop because I went with the similar layout as paper cards but I was not sure what changes should I make for mobile devices. I tried resizing the card but it did not turn out as well as expected. So I decided to change the layout of the card from horizontal to vertical. This way I was able to remove unnecessary scrolling on mobile device yet using the full width of mobile.

All together, it was a very good experience. I tried out to design with dark colour themes. Learned to do a complete website when I was not in good mood to be consistent on the challenge.

Drop your comments/feedback on Figma file and on this blog. Let me know if you have any reference material that I can use to develop this website.

Today’s Figma File: #009 — Mind Reader Game

Yesterday’s work: #008 — Product Image Gallery

Tomorrow’s Idea: GitHub Timeline Generator (Probably I will take 2 days to complete this one)

Day 008 of #100DaysOfDesign — Product Image Gallery

Harsh Patel — Thu, 09 Apr 2020 01:21:34 +0000

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

Day 007 of #100DaysOfDesign — CSS Filter property

Harsh Patel — Wed, 08 Apr 2020 03:45:40 +0000

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

Day 006 of #100DaysOfDesign - Designs for Mobile devices

Harsh Patel — Tue, 07 Apr 2020 03:59:37 +0000

Till today, I had created 5 different websites which are focused on particular topic of web development but they were designed only for desktop. Couple days ago, while reading blog, I decided that I will go with mobile first development process to code all of my future websites. That's why I decided to dedicate the 6th day of the challenge to create Mobile design for my past designs.

Day 001: Page Loader

Page Loader is a very simple website and it does not include complex layout (Most of designs does not have complex grid from these five websites). Because of that, I was able to complete design quickly. Most of the time, I just resized different elements in the page.

Day 002: Drag & Drop File Upload

Drag and Drop File Upload website turned out a very good design during Day 002. I like the look and feel of this website. This website has few web development topics that I will be learning while coding this it. So I did not want to add complexity in CSS part so that I can put more focus on the development process of the website.

The desktop design is centre aligned, means all the element's in the page is centre aligned. I found that converting these types of websites into mobile device is much easier than others. These designs are simple and without grid (most of the time), which is already same as any typical mobile device. Yeah, you can make it more complicated, but you can keep it simple and complete design quickly!

Day 003: CSS Borders

The desktop design for CSS Borders is very simple. For mobile design, I just needed to adjust the size of the elements. The only change I had to make was breaking two column layouts of options. I just break them and created single column as that makes website neat.

I did not had much to redesign for this website, but I realized that my design file was mess. None of the group elements were grouped in layer panel and art-boards did not have proper names. That's were I decided to refactor the layer panel of my designs. I grouped the layers as they were supposed to and named the layers as well as art-boards.

Day 004: Screen Saver

This design was bit complex than any other websites. The main reason was the grid layout of emoji cards. I needed to find a way so that mobile users does not see long list of those emojis cards, yet they can access it easily. That's where I went with Carousal idea. User can easily scroll and find the emoji he wants. It decreases the height of the website and improves the UX as one does not has to scroll too much.

I used the same idea as index page inside about page. On the other hand, I did not want to design both page with same idea. That's why I just added three cards and scaled up the middle card. This way it is different than the index page, yet makes page identical to the website's theme.

Day 005: Rank JS Frameworks:

To my opinion, this website was the simplest website of all these 5. It does not have any complex elements in the page. Which made very easy to create mobile design. I just resized the element, and design was ready! The only change I made was in the About page. I broke the Icon's grid from 4 columns to 2 columns. It kept the website's simplicity yet preserving good UX with ideal page size.

For all these designs, I used Art-Boards with the size of iPhone 8 plus. You might think that why did I choose iPhone 8 in 2020? The simple reason is that we can take this size as an ideal mobile screen size of 2020. I know I might be wrong here, but my point is, I do not need to design for latest device. I should design with the general specification. iPhone 11 may be the most popular right now, but still not everyone owns that device. In that case, it will be better if you design in an ideal size art-board and then handle responsiveness of website while writing CSS for it.

If you find that I should follow some other ideal specification, or I am thinking in wrong direction for any part of my designs, please drop a comment with your feedback. It helps me to improve myself!

Here are the links for all the Figma design files:

Day 001: Page Loader
Day 002: Drag and Drop File Upload
Day 003: CSS Borders
Day 004: Screen Saver
Day 005: Rank JS Frameworks

Here are the links for blogs related to those days:

Day 001: Page Loader - Medium, Dev.to
Day 002: Drag and Drop File Upload - Medium, Dev.to
Day 003: CSS Borders - Medium, Dev.to
Day 004: Screen Saver - Medium, Dev.to
Day 005: Rank JS Frameworks - Medium, Dev.to

Day 005 of #100DaysOfDesign

Harsh Patel — Sun, 05 Apr 2020 17:36:26 +0000

On the 5th day of my challenge, I am focusing to learn HTML5's Drag and Drop API. I had an idea to create website where one can order different JS frameworks as they wish. This is a very simple website which focuses on one learning objective.

I started designing the website by adding some fun element in background to make it more interesting. After few google search, I ended up using JavaScript Logo.

After that, I started working on the frameworks list. I put VueJS at the top because I love its simplicity! I am not making any statement that VueJS is best, It's just my own preference. I added light background color from each framework's logo. This helped to bring color and charater to the website.

When I was working on about page, I found that it was not looking very interesting as it did not had any interesting elements in the page. That's why I decided to go with a list of framework's logo. I am planning to convert these logos into links during development process and link them to their official website.

Feel free to drop a comment if you have any feedback regarding design in Figma or below this post.

Design on Figma: https://www.figma.com/file/vec0lCMGthvdozzTPiFk8Y/005-Rank-JS-Frameworks?node-id=0%3A1

Plan for Day 006: Design mobile version of websites (from Day 001 to 006)