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:
Top comments (0)