Website Design
What is web design?
Before we dive knee-deep into the process, let’s start with the basics: web design is the process of creating the visual look and feel of a website.
Mostly.
These days “design” also incorporates the idea of “user experience” – which is a whole subject in and of itself, but for our purposes today it means web design isn’t just about how good your website looks, but how easy it is to do things like find information, important links and buttons, etc.
Hence “look” (what people see on your site) and “feel” (how easy it is to use your site).
Websites are built using the coding languages HTML and CSS, which tell a web browser how to arrange all the text on the site, what colors to make things, where to put images, etc.
In the old days, web designers had to hand-code websites from scratch – literally writing every line of HTML and CSS code for each website they made.
These days, you can be a designer without knowing any of that stuff thanks to “What You See is What You Get” website builders (our favorite is Wix) and Content Management Systems like WordPress (which you can get with cheap hosting and one click install from Hostgator).
These website creation tools do the hard work of creating code for you, so you can use your basic computer skills (dragging things around with your mouse, clicking buttons, copy/paste) to make websites. Fast and easy.
What “look” means
There are a few web design elements that determine how good (or bad) your website looks.
Colors
What color is your text? How about the background behind that text? Your header menu? Buttons?
Color is a huge part of making a sweet looking site and a strong part of whether your site looks like it’s supposed to sell expensive watches to business executives or is just a place for your brother to share photos of your nephew’s birthday party.
Fonts
Fonts determine how the text on your site looks. The same words can feel super primo (like the always classy Helvetica) or casual and friendly (#comic sans) based only on the font!
Graphics/Images/Videos
These are things like photos, videos, icons, illustrations (where the whole “image” is drawn in a program like Adobe Illustrator – the cute kitty above being an example!), or composite images (like the “how to design a website” image at the top of this post).
The photos would be taken by a photographer, obviously.
The videos would be made by a videographer if they’re videos of the real world, or an animator if they’re made from other images/illustrations.
And it’s technically a “graphic designer” who would create icons, illustrations, and composite images
But, because there’s so much overlap, many web designers have graphic design/photography/videography skills because there’s so much overlap.
Once you have those photos/graphics/images/videos, the “web designer” is the one who adds them to the site in a way that looks fantastic.
Written Content
Creating content/written text isn’t the web designer’s job but just like with graphic design, some web designers have content creation skills.
On the web design front, “content” is about arranging the words on the website so that they’re easy to read and attract people’s attention when they should (for instance, we wanted you to see the “Written Content” above before reading these last couple of sentences, so we made it higher on the page AND bigger so it’d catch your eye and let you know what this part of the post was about).
But again, because there’s a lot of overlap – and especially if you’re creating your own websites – the person who creates the website design might also write some or all of the content.
What “feel” means
Besides the stuff above, those visual elements that come together with a bit of web design magic to make a site look spectacular, there are a few elements that make a website “feel” easy and dare we say fun to use.
Layout
Layout is the way graphics, text, and buttons are arranged on your page.
Layout not only makes your site look good, but a solid layout also makes it easy to use because information is displayed in a way that makes sense, buttons are in places that people expect them to be, images are placed so that they help people understand what you’re trying to communicate without making text hard to read, etc.
Navigation
This is how people get from one page to the next, and for your more complicated pages, how they get around the page.
Using this very site and page as an example (you’re here, why not), this includes things like
The header menu (that part with Home, YouTube Tutorials, Written Guides, etc at the top of the page on desktop, or the three stacked lines on mobile).
The floating table of contents on the top left (if you’re on desktop; if you’re on your phone like most people these days you saw it towards the top of this page, that part smartly called “Table of Contents”).
The “jump to top” button (the white arrow on the blue circle background at the bottom right of the page).
The “recently written articles” section at the bottom of the page.
The goal with navigation elements like these is to make it super simple for people to find the pages and information they want, when they want it.
Compatibility
Compatibility is how well your site/pages load and look on different browsers, operating systems, and devices.
Your site will have to look and function a bit differently for a 6” phone screen where people have to tap things with their fingers than it does on a 15” laptop screen where people use their mouse/trackpad (pro tip: if you’re gonna get into the website building game, get yourself a mouse; even Apple’s trackpads are just so much harder to use).
Our Portfolio Website
