Web Design: A Developer’s Perspective - Part 1: The Break Down

Posted on October 07, 2016 by Lisa Spell

As a web developer, I spend most of my time staring at code on a screen.  Formulas and functions, elements and variables, and all of the other things that most of you think of when someone mentions code.  Yet, in the end, all of this code will become the websites that you all know, love, and use on a daily basis.  I know what you might be thinking though, I don’t see any code, all I see are my Facebook posts of cute animals or my latest summary of how well my stocks are trading.  That’s where web design and web architecture come in to play.
 
According to techopedia.com a web designer is “someone who prepares content for the Web. This role is mainly related to the styling and layout of pages with content, including text and images.“ Meaning, all of the logos, branding, color schemes, and even that dancing baby that you’ve seen online were all created by a web designer.  Yet, designers don’t create a picture of a website and drop it on the internet.  They work with developers and information architects to get the created concept built out into a functional website.
 
After all of the creative processes have been concluded and a design has been agreed upon by all involved parties, that’s when I come along and begin the developer’s process with the design.  Please note, all developers are not the same and processes will vary depending on the person and the design.  I am going to take you through my development process of how I work from a completed design to a working website.
 
I will be using the following design created by Tyler Corbett for this article:


Designs can come in all shapes and sizes, and delivered in many forms of media.  There are many tools these days that can help with this delivery including Zeplin or Invision.

Once I have a design in hand, I begin by roughing out on paper the break down of the design. Studying the layout and making notes on what HTML elements to use where, and how to leverage CSS or JavaScript to replicate the given design on screen.  Here’s a look at my initial pass with the design.

2016-10-05 19.32.32.jpg

Above, I have noted the way the page breaks down, from the header to the main content, the aside, and the footer.  I’ve taken notes on what I think are the best and most semantic HTML elements or containers to use in each section.  Using the semantic elements in HTML5, such as header, footer, nav, and aside, will help to keep the markup cleaner, easily readable, and more accessible.  Within the main sections, there’s further break down, for instance the header includes the main navigation for the page, and a secondary navigation that I have noted as user control links.  I noted these as user controls because they seem to be functions that the user can access to control how the page is viewed, such as Patient View, or used, such as displaying My Apps or to Logout.

Another major consideration during this initial discovery stage is to consider how the page will be displayed on different devices and screens.  A designer may or may not supply you with a mobile version of a design, but that doesn’t mean that you shouldn’t take mobile into consideration.  In my experience, it is far easier to go from a mobile version of a design up to a desktop version, rather than desktop down.

Being a developer, and considering mobile devices, I would anticipate that the right column would collapse beneath the main content and the design would stack vertically in the order of header, main content, aside, and footer.  However, I would take this to the designer for clarification and to make sure that we were both in agreement on how the page should react and be displayed on mobile devices. 

Another consideration during this initial period is what assets I will need from the designer and what I can create using CSS.  An asset, in this instance, is an image, logo, or icon that is used in the design and will need to be supplied by the designer.  In Tyler’s design, a few of the assets that I will need are the image for the hero section, the Quinlabs logo, and the icons for the neuroscience and botany sections on the right.

The awards section within the main content is an interesting part of this design.  In my notes I have noted that I may want to use Flexbox in my CSS to create the staggered pattern.  This is another point where I would also go back to the designer to discuss how these awards would be displayed on mobile devices.  When in doubt, refer back to the designer when possible.

That is how I take a design and break it down in preparation for development.  In part two, I will discuss further break down of each section and look at a few HTML and CSS code samples for those sections.