Let's Build: A Consultancy Website - Part 24 - Coding the About Page

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

======

In part 24 of my Let's Build series I walk you through the initial phases of coding the About page design. We leave the home page for now but will revisit again when it comes time to make the design more responsive.

The About Page Design

The designs you see in this series started from a style tile. The final style tile actually did not match the design but it did allow me to process the direction I wanted to head. In our own specific case, I am playing both the designer and developer role. If I were to hand off this design to a developer or team of developers I would be sure to revisit my style tile and update the designs and it to reflect. This, in the end, keeps both the code and the design consistent thus producing a richer experience throughout. This is especially true for both the performance side and the user experience side.

Style Tiles / Atomic Design

I firmly believe modern designers should be versed in how websites are built from the ground up. You don't have to know how to code per say but you do need to understand the benefits of writing DRY code that is both semantic and efficient in terms of performance. An example here would be to give elements certain namespaces to avoid conflicts as websites and applications scale over time.

Enter atomic design and you are already setting yourself up for better success. Even before designing higher fidelity concepts you should start by creating smaller components or modules. This helps capture the look and feel of the website/app as well as define elements developers can begin working from at scale.

Once you have a solid atomic approach will you be able to start piece those components into higher fidelity designs.

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-24/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

📌Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=iyW03LymzEk