Starting from scratch — the endless possibilities of web design

When it comes to designing a website from scratch, using HTML, CSS, and other languages, the possibilities are endless. Experimenting with the different languages is the best way to learn the ins and outs of web design. Although utilizing WYSIWYG (What-You-See-Is-What-You-Get) programs may be the easiest and quickest way to develop a site without messing with code, learning the technical aspects of the web is still highly critical to understand what WYSIWYG tools are doing behind the scenes.

Knowing how the web operates is important for web designers to master so that in case any problems arise in the code, they will be able to solve them and work towards their desired vision and solution. Sometimes, as web designers, technical coding skills are often overlooked by their creative sides. However, a good rule of thumb for code to keep in mind is that the more complex the code is, the more flexible the design and functionality of your site will be. Well, what does that mean?

The best way to understand the basics of programming is to learn how to think like a coder. That starts with familiarizing yourself with the cornerstone technologies of the World Wide Web like HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). By studying these two main languages, you can build onto it and apply the skills that you learned towards learning a new one so that you can expand the possibilities of your website and enhance user experience. Start simple and then move up in complexity as you grow as a coder.

What exactly is HTML and CSS?

This is an example of what a webpage that is built with just HTML would look like.

HTML is a markup language that provides the structure of a page; it outlines the various elements (like the text, images, videos, etc) the page will contain. The end result of HTML, is like text that you write in a word processor. For this reason, it is often referred to as the skeleton of a site.

This is an example of a website that is built with both HTML and CSS.

CSS, on the other hand, places emphasis on design rather than the structure and enhances the overall layout to make the site more visually appealing, interactive, and user friendly. With CSS, you are able to add styles to fonts, colors, and more.

Why you should learn to code

Tweaking lines of code is an extremely tedious task that takes a lot of patience. Although it is tedious and at times a very frustrating task, being able to understand how a computer takes instructions that you wrote allows you to be more free within your workspace. With code, you can create virtual experiences with little to no limitations. Run into a problem in your project?Take a look at your code and solve it. If it weren’t for code, we wouldn’t have computer software, apps, and websites. Computational thinking has been on the rise and it’s critical to have the basics down even as a UX designer.

Don’t worry, you don’t have to be a highly trained programmer to start coding — everybody has to start somewhere. I did. I’m still not the best coder out there and I still need to brush up on my skills, but here’s a past project that I did.

The Colors of Health Project

Like with any other project, I started conceptualizing my website — Colors of Health, a website to help people get in the habit of leading a healthy lifestyle by meal-prepping. Listed below are the steps that I went through:

1. Planning: What was the purpose or goal of this site? Who was the audience? What was the navigation going to look like? What was my final design going to look like? What colors was I going to use? These were just some of the questions that I asked myself when I started working on this project. By identifying the goal and audience, and then assembling a sitemap, building a simple wireframe, and selecting a color scheme, I was able to give myself more direction.
2. Sketching: Instead of sketching out my ideas first, I immediately went straight to wire-framing. Bad idea. At the time, I was not familiar with sketching out my ideas so I skipped the most important step. Sketching is all a part of the planning and designing stage, don’t skip it. Don’t start working on the final result until you’ve been through this stage. Remember to sketch it out on paper first and let yourself free-form ideas!
3. Wireframing: This is the stage where I started creating the blueprint or visual guide of my website. The purpose of wireframing is to not design, but to rather create a simple layout of how you want content to be placed on a page.
4. Creating Surface Comps: In order to get a better visual guide and feel for the project, create surface comps! Instead of having placeholders like in the wireframes, make some touches to it and add actual assets that you’ll be using in your final design layout. This includes color, fonts,
5. Hand coding: This is where I began building the actual site. As I learned more about HTML and CSS week-by-week, I implemented what I had learned into my project.
6. Revising: After taking the time to revise my work, the layout of my design changes all the time. That’s okay though! Revision is all a part of the process of improving and it’s important to not get married to your work; be open to change.

A mockup of the landing page of the Colors of Health website.

Conclusion

Learning the basics of coding can still benefit professionals whose focus is primarily on design. By pushing yourself to learn more technical skills rather than just specializing in design principles, you can become a more valuable asset to the team since you’ll be able to tweak code and find solutions to errors that you may run into when creating a website. Even if you think that you don’t think like a coder, do it! Even though this project isn’t my best work and it gives me the creative cringe now, I still benefitted from this project a lot. It gave me the opportunity to explore HTML and CSS more so that I could see what was possible. My advice to you? Keep learning and keep building.

Learn more about why you should broaden your skillset as a UX designer here.

Ellie Hoyt is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design with an emphasis in Interaction & Design. This article explains the importance of coding and the process that was implemented for the Colors of Health website built in the DGM 2120 Web Essentials course.