Let's Build: A Consultancy Website - Part 24

Coding the About page

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.

How I Design Today versus 5 years ago

Back when Photoshop was the primary web design tool in our industry I distinctly remember being contracted to design very high fidelity designs for agencies and developers alike. This time-consuming process was fulfilling but also a drag when it came time to make revisions.

Fast forward to now and my mindset has changed dramatically. No longer do I design full high fidelity designs but rather a handful of pages to capture the initial look and feel as well as layout.

Today my process is as follows:

1. Discovery phase - Meet with a client, team, or friend to understand the needs, wants, and nice to haves of a given website or app they would like to build.
2. Capture inspiration and brainstorm original ways to captivate their needs, wants, and nice to have.
3. Create a series of style tiles/atomic designs to provide an inspiration board of sorts to the client. This both helps define a creative direction and also does so in a quick fashion rather than spending a lot of time on high fidelity mockups.
4. Move to wireframes to figure out site architecture and layout
5. Create a few high-fidelity designs to capture the final look and feel using real content.
6. Start coding with milestones to show progress and discuss the next steps.

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 se 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?

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 roles. 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.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23