I’ve been doing photography and graphic design for a few years now, and I’ve loved learning the cool new tricks and ways to design that have allowed me to make my work look professional. What I’ve learned is that it’s the little details that often separate the pros from the new guys. It’s making sure that your document is saved in the proper format. It’s checking to see if that shade of red is overbearing or hard to look at on a screen. It’s ensuring that when that beer label gets printed it’ll look the same as it did in your clients file.
In my short time in web design, I’ve noticed much of the same thing. The small details are often what make the difference between a site that looks childish, and one that might actually get business. I’ve chosen five small design changes that can make any new web designer look like they know what they’re doing.
Okay so this one is simple. Favicons are the small emblems you see in the tabs of websites. They’ll show up right next to the website title, so when you go to google.com I’m talking about the little white “g” in the blue box.
Every professional site has one, and they take less than five minutes to make and have on the Internet. You do this simply by finding or creating an icon that you’d like to use, and saving the image. If your coding a website, you know that there is a necessary file structure to allow the site to run properly, and somewhere in that structure is most likely an image folder. Save the image in that folder as either a .png, .gif, or .ico file. Then simply add the link code to your header section in your .html file.
The only special note is that the image has to be either 16px X 16px, or 32px X 32px. Using Adobe Photoshop or Illustrator, you should be able to at least resize an image to test if your code works, and then properly design one for the format later.
Every site should display a logo. Whether it’s the company you’ve been hired to design for, your logo on a portfolio site, or your favorite NFL teams logo for your fan site, logos are displayed on every professional site. From YouTube to General Electric, all businesses proudly display their logo on the first page of their site, and often some derivative of the logo stands as the favicon.
Designing a logo is no simple task, and an entirely separate project from designing a website for someone. But placing a logo on a client’s site is something every web designer will do. When deciding where the logo will be placed in a site layout, consider the importance of the logo to branding. It is the primary visual connector between customers and brands. Being that logos are the most recognizable image, they should ideally be one of the first things we see on a site.
Most websites do this by placing the logo in one of the upper corners of the body, and sometimes strategically throughout a page so that it appears multiple times. Before designing your own logo I advise you to do some very serious research about a variety of perceptual theories.
- Navigation Bar
Adding a navigation bar to a site is only needed if there are multiple pages, but seeing as almost every site does knowing how to design one is a good idea. In the HTML document, it’s as simple as creating a list, with each item linked to a different page. But the CSS code can get a little tricky, particularly with dropdown menus. Honestly this is probably the thing I do worst in code, so I’m still trying to improve my understanding of it.
Most of the initial code can be easily found on the Internet through a simple search or code support website. Styling the navigation bar to appear and adjust how you like can be somewhat more difficult. Take the time to get one that is functional and effective on your site, it doesn’t have to be the most attractive part. Allowing viewers to easily navigate between pages is absolutely vital to keeping people having a good experience and getting the full benefits offered by your website.
- Font Changes
I know that I said favicons were easy but this might actually take the cake on effective changes for lazy people. Changing the font on a site draws interest to specific areas, or allows for a more professional appearance that the default typeface in HTML5.
To change the font there basically three steps. Find “Google Fonts” and find a typeface you’d like to use in your website. When you do, hit the add to collection button in the text display box. Once you’ve selected a font, select the “use” tab on the bottom bar, and the code for both your HTML & CSS documents are generated. In HTML add the link to the head section, and in CSS add the code to whichever text you’d like to alter.
If this seems confusing, go to the site and I can almost guarantee you’ll have some swanky new fonts on your site within ten minutes. Google makes this process incredibly smooth.