4 Ways to Make a Better Website

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.

  • Favicons

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.

Screen Shot 2015-05-10 at 4.11.29 PM

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.

  • Logo’s

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

nav1

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.

Screen Shot 2015-05-10 at 4.18.26 PM

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.

Advertisements

Latest Trends in CSS Design

I recently read a white paper written by a fellow designer and friend Mitchell McRee. In the paper, McRee explains how new trends are evolving in design for websites and mobile platforms. After reading the paper I wanted to share my takeaways, and the new capabilities we have for web design.

As we progress further into The Digital Age companies are relying more and more on the Internet as a means of connecting with customers. With increased focus on and demand for well-designed and smoothly functioning sites, it’s important to keep up to date with the evolution of our design technology and capabilities. CSS3 now offers CSS shapes to aid in text display on Internet sites and mobile platforms, giving designers more ways to actively engage with their audience.

Traditionally, when designing an HTML page with CSS, the layout is a series of boxes arranged in a specific way. Being limited to designing within boxes has largely limited the capabilities of designers in the way their displays could be altered. Any curved lines for the site had to be uploaded as an image.

css2

CSS shapes allow designers to create any curved element, and have the capability of manipulating the shape, color, size, position and any other variable. Instead of having to display all text in a box, text can now be aligned with images or created shapes to give it movement and form.

css1

The ability to align text with curved lines and images can be used to create more interest in a body of text, or to form a stronger relationship with the corresponding image. Most businesses want content driven sites to sell, inform, or entertain their customers in the most pleasing and efficient way. CSS shapes allow designers to both draw interest with unique curves and shapes, and also create orderly and space efficient shapes to communicate information clearly.

The Value of Design

We can learn an incredible amount about our own work by examining that of our betters. Animagraffs is a site run by entrepreneurial graphic designer Jacob O’ Neal. I came across the site and found myself being captured by skillful use of his minimalist and colorful design style. After looking at the rest of his portfolio and learning about him as a designer, I thought his lessons would be worth sharing, in addition to his very inspirational content.

The first thing I came across about O’ Neal was a series of motion graphics explaining how car engines work. I’ve been proudly called a car nerd in the past and loved the content of the page, so I explored further into the site. O’ Neal had done a series of projects, including the mechanics of a car engine, the firing mechanism of a handgun, the movement of a tarantula, and how to pull off the perfect moon walk.

ecoboost-turbo

O’ Neal’s style is simple and bold, which makes is fantastic for understanding complex ideas. I began thinking of how useful motion graphics are, for a wide variety of industries. Furthermore, it got me thinking about graphic design as a form of education. Through this lens I think can learn quite a bit from designers like O’ Neal about both style and our industry.

As designers our purpose is to take complex, multi-faceted ideas and simplify them into simple relatable designs. We will be hired throughout our careers to communicate the ideas of your clients to the public. Our designs can and do actually educate people about the ideas were representing.

moonwalk

O’ Neal mentions in his portfolio that he’s a self-made success, and chose the entrepreneurial path to being his own boss. I’ve found that many designers share common feelings towards starting their own business, but often fear failure or the risks involved. Regardless of your choice of career path, I think O’ Neal shares some wisdom for everyone.

O’ Neal seems to have found his niche for design. His ability to use design to simplify complex mechanics and structures is incredibly useful, and valuable, and he highlights it.   If you’re planning on starting a design company, then to get business you will have to communicate the value of your work, and the same goes if your looking to get hired for a company or freelance.  For a young professional designer I found two major takeaways.

  • Educate clients on the value of design, and it’s purpose for educating the public.
  • Find a niche that works with your strengths and style, and highlight that work to increase it’s value.