VISUALS: IMAGES
Yes, text is always number one in the hierarchy of any graphic design project. However, for the project to be displayed as effectively as it can be you also need good visuals. Not just a visual that shows your content in any which way, but a visual that shows the content in an aesthetic way. Meaning:
-
a clearly identifiable point of attention, a focus: An area or an object that stands out, that focuses your eye.
-
good lighting - by this we do not mean that the images should have a lot of light. What we mean is that they should have good volume that comes from light and shadow.
-
good composition - by this we mean that the image should have
-
interesting visual groupings,
-
good balance - either symmetry or pronounced asymmetry,
-
good usage of full and empty space,
-
good relationships between foreground and background,
-
good field of depth,
-
-
good color scheme
-
good textures
-
clear, and crisp definition
-
or a good usage of soft focuses and blurs.
-
-
have high resolution in pixel size.
-
be of high quality, with no "visual artifacts" that occur from inadequately low resolutions or badly used image processing effects.
IMAGE FORMATS AND IMAGE SIZE
There are 2 basic image formats that are used in Web Design:
-
JPEG (acronym for Joint Photographic Experts Group) is a high quality compressed bitmap file that has no transparency.
-
PNG (acronym for Portable Network Graphics) is a very high quality compressed bitmap that can also have transparency and semi transparencies.
Image quality has to do with the actual width and height of the image - in pixels! This importance of size has to do with the fact that:
-
Bitmap files (JPEG, PNG, GIF etc) cannot be sized up.
-
You can make a bitmap file much smaller by scaling it down - no problems at all when you do that.
-
However if you scale it up by even a tiny amount you will start to get visual artifacts such as pixilation, blurring and hardenings around straight or hard edges.
Always start out with large sized images that you can scale down if you need to, rather than small or even medium sized images that you try to scale up, which is something that will never work. Here are the minimum sizes needed for different usages:
-
2000 pixels or above for full width images that you place inside things like strips.
-
1024 pixels or above for text images like I am showing you on this page >>>.
-
Wix automatically resizes larger than 3000 pixel wide files down to 3000 pixels.
CURATING
The 4 thumbnails above show you collections that I made on the 4 recommended resource portals for images. These are Pexels >>> (top left), Pixabay >>> (top right), Freepik >>> (bottom left) and Unsplash >>> (bottom right).
When we look for the definition of the term "curating" on dictionary.com we find it to be "to pull together, sift through, and select for presentation, as music or website content." And that is precisely what we do when we select the visual material that we put on out site. So, instead of taking every photograph ourselves, or painting every picture or drawing every vector ourselves we select from the vast creative commons licensed resources that are available online.
Here are some of the things to pay attention to when you do this:
-
Use resource portals rather than opting for the regular search engine or what you will get from social media sites since:
-
The material that you find on resource portals will have no copyright infringement issues attached to them, you will be using the stuff with the creator's permission.
-
The material that the resource portal shows you will be pre-selected by them, which means that both the technical as well as the visual quality will be superior to what you will find from a google search or a social media site where anyone can upload whatever they like. Resource portals screen the submitted material before they put it at your disposal - and that is a major difference.​
-
The image resolutions on a resource portal will be very big (usually 4000+ pixels) and this will make it very easy to obtain high quality crops out of such big images.
-
​​
-
-
Be aware that there should be a stylistic consistency between your visual material, especially if most of the images that you are picking have commonalities.
-
Example: If you have a lot of soft focus images and then suddenly we get some ultra sharp, high definition ones that will look out of sync. Or, if you are using black and white images and suddenly there is on with color, that too will not fit in. Or, if you have used a lot of photographs in a particular color or tone (say earth colors) and then suddenly there are bright blue ones strewn in, that too will look strange.
-
-
-
Create an account before you start browsing.
-
Get organized by creating collections because:
-
There will be lots of photos that you will want to compare and decide among and unless you bookmark them inside a collection you will not be able to find them again. These portals are enormous; giving you tens of thousands and very often hundreds of thousands of results, and there is no way to keep up with that amount unless you get organized.
-
When you curate things it is as important to have a visual relationship between items as it is to have a contextual one. Placing images inside a collection and looking at them together will help you get a visual continuity, as I am showing you in the 4 images above. While I was looking for images under one concept, I didn't just try to find images that showed what I was looking for but also paid a lot of attention to how they showed what they were showing such as color schemes, lighting, composition, and focus.
vectors
Another good medium for visuals are vector drawings and paintings. There is an excellent portal that is full of vector illustrations called all-free-download >>> and another one is, of course, freepik >>> where you can also find them.
The three pictures here are the result of three different searches on all-free-download for "food", "home" and "landscape". So, just as is the case with photographs your search terms will affect your outcome.
Another thing to pay attention to is that if you decide to go with vector art on your website you need to be aware of stylistic consistency just like you need to do with photographs - but even more so. In other words, the vector art that you use should resemble each other visually. Vector illustrations do have very distinct styles, more so than photographs even, since they are of course the result of somebody's handiwork.
Freepik has actually made looking for style consistency easier by adding a "style" panel as well as a color panel to their search engine. All-free-download doesn't have this (it is a much smaller site than freepik, although the results for vector art are better) but you can add terms such as "flat" or "watercolor" to your search there as well by typing these into the search bar.
The vectors that you download will be either Adobe Illustrator files or EPS files, or even both in many cases. All of these can very easily be opened in Photopea and resized, edited, etc. and then be exported as PNG images to be used on your site. Watch this video here on how to do it >>>.
Note: In both of the links I have placed here I am not directing you to the homepages of these portals but to a search result for "landscapes" as an example of a keyword that one might search under to get to vector art. I have done this deliberately since the opening pages will mislead you by showing things that are mostly graphic design related, such as layout templates and so on.