The latest articles on DEV Community by Ahmad Shadeed (@shadeed). https://dev.to/shadeed https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F162782%2Fb2a28184-1234-4059-9c90-23523bc86710.jpeg https://dev.to/shadeed en Ahmad Shadeed Wed, 01 May 2019 15:59:03 +0000 https://dev.to/shadeed/the-process-of-implementing-a-ui-design-from-scratch-4cea https://dev.to/shadeed/the-process-of-implementing-a-ui-design-from-scratch-4cea <p><em>This post has been originally shared on my blog and it's a bit long, so I will share the introduction and you can continue reading it on the blog.</em></p> <p>There are many ways to build a layout in HTML &amp; CSS, and every developer has his own way of doing it. Getting to know the thinking process inside a Front End Developer mind is extremely useful, as it gives us different perspectives on how to solve certain problems.</p> <p>In this article, I will dive into the journey of building some of the components in a project I called “Nadros”, and write down my thought process, from the perspective of a designer and a developer.</p> <p>Nadros is an imaginative idea for an online video courses platform. In this article, I’ll focus on building the header component.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8q6JX6ZZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3rfvyhm4emxffkmrpv0v.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8q6JX6ZZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3rfvyhm4emxffkmrpv0v.png" alt=""></a></p> <h2> Design Components </h2> <p>I extracted all components into one page so I could look at them together. This would make it easy to find inconsistencies between UI elements. Also, having all of them at once can lead to ways for unifying some UI components, or to create a variety of specific components.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AXSoYool--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/x3biy5v5ubslepkjhsdz.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AXSoYool--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/x3biy5v5ubslepkjhsdz.png" alt=""></a></p> <p>Continue reading my <a href="https://ishadeed.com/article/building-ui-design-scratch/">blog</a></p> <p>Let me know your thoughts please!</p> design css frontend