A Designer Encountering Coding
The Architect and the Contractor
During our Critical Making course, we discussed why designers need to understand a bit about coding. Our instructor, RJ Duran, provided a metaphor that resonated with me from my days working construction.
Architects design houses with an understanding of physics, building supplies, and constraints. They hand their visual plans over to building contractors who take the visual concepts and build the physical structure. Architects and contractors need to understand each other or else an architect might inadvertently design something that isn’t physically possible like a beam hanging in space. In the world of app and website creation, a designer (architect) needs to be able to understand coding so that they can create the visual plans that developers (contractors) can actually build into real objects.
This is my first ventur into coding a website and I’ll try to give a description of what I’ve done based on what I understand. If I get things wrong or my jargon is incorrect just know that I am a beginner.
My developer environment was VS Code (left-hand side) and I had a Chrome browser (right-hand side) open linked to my HTML file. Saving and refreshing the window allowed me to see what I was building in Chrome. This is basic HTML and is the web language that defines the document structure.
For this project, I decided to create a website about my Grandpa Tom using content from a book I created about him several years ago. I worked with a talented writer, Ryeon Corsi, who wrote the book based on interviews we took with him and I created the illustrations and design of the book. I’ve been thinking about Grandpa Tom lately and as much as I learned during this website project it really hit me emotionally. He passed away nearly one year ago.
The HTML language (left-hand side) provides a way for me to structure my web output in an organized way. Elements are put in these brackets <>. For example, <h1,2,3,4> = different header sizes, <p> = paragraph content, <a> = hyperlink. <img> = image file. Comparing the right to the left, you can see how it is evolving. The blue text creates actionable items that make the text/content do things like be a different text size. The green text is non-actionable comments for my own reference. Like a little sticky note that only I can see.
Let’s look at the upper-most hyperlink <a>. I wanted to insert a video my brother created during the creative book project so I used the <a> element and told it to link the video by referencing (href=) the web link (https://vimeo.com/45663700). Together it looks like this (<a href = “https://vimeo.com/45663700”>. I also wanted an image to be the clickable hyperlink (src= “OdetoSmallThings_Site_1.png”).
I’ve defined the basic structure of my webpage using HTML and added content, but it looks very basic. I can start making it more aesthetically interesting by altering the color, font, and layout. To do this, I use my next web language, CSS. CSS is activated by inserting <style> and everything in here is where I start defining colors, fonts, layouts, and other aesthetics that can then be applied to different parts of my page. All of these elements go in the <head> section.
I start by indicating what element I want to change, for example, the <h1> which is my Title Header (Tom Brackin: One of the Finest Men). To change the font to a gray color, I use the h1 {color:“”;} function. I also wanted to make it a bit bigger, so I added font-size:60.
For my next CSS edit, I want to put a border around a few images. Still in CSS, I use a period and add a name (.Tom) and start defining border formatting (solid, width, color). Then, I find an image and use class=“Tom” to give it the border formatting.
This type of work is for “front-end developers”. Front-end developers are translating visual layouts and elements provided by designers into the visible parts of a website or app. Back-end developers are working on the “under the hood” work of databases and infrastructure. Full-stack developers are able to do both.
Tools like Figma, Sketch, and Adobe XD are useful for designers who can create the look of a website or app and then have code that is automatically rendered. The designer can export the code, send it to the developer, and with a bit of finessing, can have a website or app that looks like what has been designed with these tools.
With the very basics of HTML and CSS started, I am going to stop with my edits for this post. On my Github profile, I created a document for this project, cm1-assignment-3, and uploaded it. I learned this workflow through another tutorial posted by instructor RJ Duran. Honestly, this was the most challenging part of this assignment and took a lot longer to go back through and follow click by click. The tutorial was outstanding and although it took me a while to understand, it led me across the finish line.
Here are a few screenshots of my project with a video below.
