Gathering Assets

Getting access to FREE resources to help build your site

This week's lesson is all about gathering assets that will help you flesh out your sketch into a well-themed Website. Below are the various categories of assets that you should gather as well as some free sites from which to gather them.

An Intro to Assets

So, what is an "asset". When dealing with design or computer graphics in general, the assets are the various pieces of media and content that will comprise your project. For example, when you read a magazine like Time or Rolling Stone, you are looking at hundreds of individual photos, illustrations, and stories that have all been systematically and creatively arranged in an organized fashion. That organization is considered the "design" while the various pieces are the "assets".

What is the point of gathering these assets? Why not just grab images as you need them? More often than not, when I've been given a design task of creating a logo, layout, or website, it can be quite difficult to get the creative gears turning. I will often be sitting at my desk, wracking my brain for ideas. One of the easiest ways to kickstart the creative process is to gather as many images and materials as possible, so at least I know what I'm working with.

For example, let's say a painter has asked me to create a website for her. It's absolutely essential that I know what her paintings look like, what her influences are, what color palettes she uses, and how abstract or realistic her style is, before I can begin working on a layout that is in the same visual language. If her paintings are very modernist, minimal, and monochrome, it would probably not be a good idea to create a website with goofy, colorful, bubble letters. It would be better to look through her work, find out her history and interests, and create a layout with very similar characteristics.

Video Tutorials

This lesson's tutorial section is broken up into two parts - the first is on how to gather the assets, and the second is on implementing them into your layout. Following these videos, you will find the various links and resources described therein.

Download this lesson's source files here.

Fonts

Fonts and typography are an essential part of setting the tone and personality of the site. There are all sorts of aspects to typography that strike its tone such as line thickness, texture, curvature, color, height, spacing, and how hand-made vs. mechanical or digital it looks.

Here are the FREE font resources:

  • dafont.com - Tons of FREE fonts to download and use.
  • fontsquirrel.com - Even more FREE fonts, as well as ways to implement them into your coded site.
  • google.com/webfonts - FREE fonts from Google, as well as ways to implement them into your coded site.

To study more about typography and to see some great examples of type, check out some of these links:

Images

You know the saying "A picture is worth a thousand words"? In the field of design, this idea couldn't be truer. Images arguably make the biggest impact, since they are what our eyes are drawn to first. The images should creatively tell the story of your site. Choose an image that will conjure up the types of feelings and memories that you want associated with your site. For example, if you are doing a site for a beach-side hotel, get pictures of the beach, people playing in the water, palm trees, and so on. This would make much more of an impact than if you used a picture of the front desk or the hallway. 

  • reddit.com/r/designassets - If you are unaware of Reddit at this point, it is an amazing resource to get expert feedback, discussions, and resources. This particular "subreddit" - designassets has tons of links to amazing, free resources.
  • pexels.com - Here is a great place for high-quality, indie-looking photos. Oh, and they're FREE! The only downside is the selection isn't great.
  • pixabay.com - More FREE stock images.
  • sxc.hu - FREE stock images. You will need to create an account with this site to gain access to their high-res images.
  • flickr.com - It's generally OK to use these as long as you give credit to the user who provided them image.
  • google.com/images - Google does contain a mixture of both copyrighted and free images, so if you are in a professional setting, you may not be able to go this route.
  • photodune.net - Super cheap stock images. You can get web-sized photos for only a buck here. This is the first place I go for stock images for my client projects.
  • beaqn.in/webdesign - Here is the master list. This is a collection of links to great FREE resources.

Photoshop Template Items

As we create our Photoshop layout, there are certain pre-made Photoshop elements that can certainly help speed up our process. These elements include things like forms, drop-downs, widgets, icons, etc. Below is a link that contains tons of FREE, downloadable Photoshop files to help us build our layouts.

Colors

It's important to have color combinations that will not clash. Color is one of the more subtle, subconscious elements that will make a huge impact on our layout. Colors can determine whether the site looks bright and cheerful, or dark and moody. There are some professionals that specialize entirely in color theory. Since most of us most likely won't have a great deal of time to devote to color theory, there is a great resource provided by Adobe that can quickly help us come up with appropriate, attractive color schemes to use in our site.

For a more detailed explanation on color theory, visit this article: Color Tools, Resources, and Tutorials for Photoshoppers or you can review our previous lesson on Color Theory for the Web.

  • kuler.adobe.com - FREE color schemes as well as a sophisticated color scheme editor.

Copy (another word for text)

Since our visitors need something to read, it would be a good idea to gather important information, such as "About Us", "History", "Contact", "Products" etc. Generally, visitors don't tend to spend a great deal of time reading, so keep your text very minimal. In fact, try avoiding having more than 2 or 3 paragraphs max in a single area. Having too much text can cause your site to look too wordy and dull.

However, sometimes your client may not have text to provide you immediately. So, in this case, there are sites we can go to for filler, fake Latin text. This text is called "Lorem Ipsum". Since Latin is a dead language, you can use this text instead of having to make up some fake info that may be critiqued unintentionally by your client.

It didn't take me very long to learn that writing tons of copy for a layout, when I'm not being hired to do so, can be a huge distraction for the client for the actual design itself and a huge time waster for me. The client didn't even notice the hours of work I put into making the layout beautiful and affective, but rather began critiquing what I had written. Big mistake! It wasn't long after that experience that I discovered "Lorem Ipsum", which has made my life as a designer so much easier.

  • lipsum.com - Generates random Lorem Ipsum text and gives an explanation of the history behind Lorem Ipsum.
  • generator.lorem-ipsum.info - Generates Lorem Ipsum in other characters sets such as Japanese, Korean, Russian, Hindi, Greek, etc.

Creating a Zip File

Once you've gathered all these various assets, a good way to send them to someone is to create a Zip file. A Zip file compresses several files into a single file and reduces the overall file size.

If you don't know how to create a ZIP file, click on one of these links: 
Mac | Windows XP | Windows 7 Windows 8

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu