the simple methods of good web design?
The cliche that "Beauty is in the eyes of the beholder" is so tired. Still, we cannot think of a saying that gets any quicker to the argument concerning skillful design.
The theory of simplicity embraces the use of a few distinct elements, limited colors, and features like animations. It begins the range of approaches in page design.
Sometimes termed as minimalism, it strips away elements that would draw focus away from anything that is not necessary to the page's message.
Each component must have a definite objective to the exclusion of anything that does not promote the intended purpose.
But do not confuse simplicity or minimalism with simple. Simplicity in web design can be challenging to achieve. It is a conundrum, that is, simplicity is complicated.
The other end of the spectrum is to load up the page with impactful images, many bold font styles and font sizes, multiple and concentrated high-impact colors. There is so much complexity at this end of the range that a sense of confusion is possible. Some call this theory maximalism.
so what should your design scheme be?
We highly suggest that your webpage design reflects in character the message you are trying to convey, and is consistent with your brand.
If conceptually, the content and ease of use are more important than visual impact, then simplicity in design is the way to go. It will be the brand's identity, i.e., clean, direct, and decisive.
The opposing attitude on the subject goes something like this.
Maximalism is the alternative way to form unique brand identities. It says that your brand is bold, aggressive, and confrontational.
These are two distinct philosophies on structuring a website with two diverse ways to go about accomplishing an end.
understanding the complexity of simplicity
Designing using the concept of simplicity or minimalism is not trouble-free if done correctly.
The initial step of this method begins with realizing how to reduce the path from the visitor's awareness to decisive action. In uncomplicated terms, remove unnecessary elements.
The beneficial side effect is that the page will load more quickly.
However, the immediate advantage is that the viewer can concentrate on the content, concept, service, or product presented.
Here are some of the fundamentals to achieve that end:
- Minimizing the number of font sizes and typefaces makes it simple to emphasize the essential concepts. To underscore the importance of specific content, change to larger font sizes, or a bold font style for headings.
- Just use a single color scheme to propel the design. That can include multiple shades of the single-color approach, but you have still maintained the simplicity of color. This mono-color tactic still allows the use of black and white.
- The actual use of the webpage must also maintain simplicity by keeping the user interface (UI) easy to understand. That involves having simple controls for scrolling, buttons, navigation bars, and the like that do not require any thinking to implement.
- Delete any nonessential graphic design. In other words, if the element is for decorative impact, it probably is not in tune with a simplistic design.
- Boldly use whitespace. Each design element should have plenty of space to present the concept. Consequently, every single item will convey a discernable and clear-cut meaning.
- Minimalism design usually foregoes images. We feel that is a mistake. However, to maintain this design theme, images need to be easy-going and simple in composition.
Some may find simplicity too stark or cold. The determination to use this design method, in its strictest application, depends upon the target audience.
If the intention is to create something emblematic of cutting-edge innovation, high fashion, or sophistication, then contemplate this design scheme.
The final word on simplicity is that the correct application of this concept requires considerable planning.
why use a table of contents?
That is a great question.
The primary reason or need for a table of contents (ToC) correlates to the size or complexity of the website.
When a site has extraordinarily large pages or a complex structure, the viewer needs a clearly defined means to reach that section that is of the most interest. That goes for webpages filled with a sizeable number of posts, have a vast list of products, contain a directory of news articles, or are a catalog of official records.
A table of contents provides an overview of the pages' content and subject matter. It also allows the reader to understand the page and the website's structure.
Besides making things easier for the viewer, the table of contents is one of the components that Google uses in its ranking algorithm.
Like the primary navigation menu of the site, the ToC can act as a menu for the individual page. It links the viewer to the desired material on the selected page, or it can even connect the viewer to related content anywhere on the site.
Each item or line of the table of contents creates a dynamic link to the appropriate section of the page.
To build a ToC, create individual hyperlinks from the line items of the table to the desired content. Or, use templates, plugins, or application widgets, which just about every website builder program or content management system includes as one of its tools.
Routinely, the positioning of the table of contents is before the first significant section heading. There should be some introductory text before the ToC so that the introduction of it is not too abrupt.
Never forget the two rationales for the table of contents: to provide an overview of the webpage's contents and organization, and to direct the viewer to a specific area of interest.
what is the proper use of images and illustrations?
Everyone that has ever read anything about building a website has heard that images make a site stand out.
Appropriately organized, the use of images and illustrations can be thought-provoking. Inappropriately inserted, visual appeal is lost.
According to some self-proclaimed experts, placing an image on a page just to fill up space or adding it just to be decorative accomplishes nothing. They claim that these images draw no attention whatsoever, i.e., the viewer ignores them.
Yes, that is correct. Your images need to be informative, whether photos or graphics designs. They should aid in telling the story and not distract your viewers' attention.
Remember, you only have a few seconds to gain their interest. Do not waste it on a picture that has nothing to do with or is unrelated to the content.
But, at the same time, if it is an illustration that is thematic and creates interest, in our opinion, the image does not have to be precisely content in graphic form.
This premise does not mean that you should include a picture just to have one. Graphic elements should help to tie everything together.
An example of this premise is this pinwheel graphic shown here. It is an illustration that does not replicate the very written word of this subject. However, it did gain your attention and thematically did emulate the topic graphically.
As was mentioned early, proper use of text and whitespace is essential. If the page only consists of these two elements, one probably has a very lifeless-looking page.
Here are some of the considerations when using an image:
- What will be the impression or response to the image?
- Will the graphic help the viewer understand your message?
- Does the image correlate to your brand and focus audience?
- Will the image create a positive personal visualization for the viewer?
- Is the image aiding in explaining the point that you are trying to make?
- Does the image present the concept to elicit a favorable opinion and decisive action by the viewer?
That is a great deal to think about just to apply when choosing images and illustrations.
When using illustrations, the consensus is that if they include people, there tends to be a more positive reaction, particularly if the subjects are smiling or appear to be happy.
Another thought concerning photos deals with demonstrative images that illustrate the concept of a product or service. This type of application indicates the usability of the product or service.
Simplistically stated, if the photo delivers the who, what, when, where, and the why, then it has succeeded.
Finally, make sure that they are in RGB format. RGB stands for the red, green, and blue color system used on a device screen, which is the best format for screen graphics.
understanding image dimension versus file size
Adobe™ states that nearly 40% of site visitors click away if the images take too long to load or do not load at all.
Given that most content consists heavily of images, photos, and illustrations (at the level of 65% of all page content), it is understandable why this is the assumption.
We covered, to quite some extent, the type of file types to use in the section titled "beware of photo and video problems."
As cited in that section, save your images in .jpeg (or .jpg), .png, or .gif format only for best results. If you have a source file that is different from the three above, use a file converter to modify the file to one of these three.
When dealing with images, we want to balance between the proper size and the resolution.
Naturally, file size is significant for images. The larger the image file is, the longer it will take to load the image and the page. We have discussed this quite extensively in other sections; so, we will move on to the subject of resolution.
defining properties of image resolution
Image resolution on the Internet uses the reference known as ppi, which stands for pixels per inch, or pixel density. This graphic is a sample of what extremely low resolution or ppi would represent.
Consequently, higher resolutions have a higher number of pixels per inch. A higher resolution count also represents that the image file has more pixel information, yielding a crisper, better-quality image.
The reasoning follows that if a pixel image file is 500 ppi (or 500 pixels per inch), the pixels are smaller and have more in pure numbers than for a 72 ppi pixel image file. The 72 ppi image has considerably larger individual pixels in the same amount of area per inch, resulting in an image that is substantially less sharp or defined as the 500 ppi image.
By the way, from the dawn of personal computers, 72 ppi was thought to be "the" resolution for monitors. Wrong! Most computer monitors, or smartphones, in existence today have screen resolutions higher than 72 ppi.
In early 2020, over 52% of all computer screen resolutions are 1366 px × 768 px or higher. That means the average laptop with an actual screen width of 16” set at 1366 px × 768 px has a resolution of 85.38 ppi (1366 ÷ 16 = 85.38).
Surprisingly, the everyday iPhone 7 has a resolution of 1334 × 750 px, which is 326 ppi and well beyond the old myth of 72 ppi.
- Contrary to this myth, do not concern yourself about importing your images at 72 ppi. It has nothing to do with the size of the image size as it appears on the screen. But it can be manipulated to adjust the image file size, as we will show later.
- Also counterintuitive as it may seem, the ppi of an image file does not drastically affect its on-screen appearance.
At this point, there may be some confusion as to what is the difference between image dimensions and file size.
image dimension versus file size
The term image dimension refers to the width and height in pixels on a screen, while file size refers to the space that an image file consumes on a computer or server.
To simplify the distinction, liken the term image dimension as if applied to a photo, say an 8" × 10" glossy. The image dimension is the size of the image as it appears on the screen of a digital device; for example, the two images shown here. They are both 383 px × 476 px. Note that the first dimension is the width and the other the height.
But that does not tell how large of a file it is, it just indicates how many pixels the image takes up on the screen.
The 72 ppi image has a file size of 9.8 kilobytes, and the 500 ppi is 60.8 kilobytes. They look identical and have the same screen dimensions; however, the file sizes are drastically different, just as the resolution.
The term, file size, corresponds to or parallels the weight of a physical object; for example, the actual material weight of an 8" × 10" glossy is about 6 grams.
Grams, ounces, or pounds are the measuring units for Items like the actual photo or maybe a ham sandwich.
However, a digital file uses a different type of measure.
There are quite a few units of measurement used to "weigh" the size of a digital file or to define how much space a digital file takes up on a computer drive.
Here are the most commonly used measures and their abbreviations: kilobytes (KB), megabytes (MB), and gigabytes (GB). There are others, but their application is minimal.
Repeatedly, we reviewed the importance of file size and the need to control it for quicker loading, which commands the next question.
How to handle images that are pleasing to the eye yet compatible with fast page loading?
ideas on configuring image sizes
In this part, we will cover how to configure an image before uploading it to your site, generally known as "image optimization."
Image optimization is the process of taking an image file and decreasing its file size while minimizing any loss in its quality.
Counterintuitively, it is best to start with a file size larger than needed. Whether it is an image or illustration downloaded from the web or one that is an original photo, save it to your computer in as large a file as reasonable.
Make sure to add a notation in the file name that it is the original.
(Suggestion: When saving and naming an image file, only use lowercase letters and numbers with either hyphens or underscores. Avoid using just numbers as file names. The rationale is that identifying an image in the future by a filename containing only numbers could be difficult.)
The reasoning behind having a larger original image file is that it is full of digital information, which provides an enormous amount of detail:
- If you start with a small file size with limited digital data, the resulting image will be one that is lacking in clarity and definition.
- The editing software has less information to manipulate as it compresses the size of the image, and casts off portions of the image's digital information.
- The larger file size will afford more detail for adjusting the image to the proper settings. It is still the preferable way to go, even though a lot of this information will become extraneous and lost during editing.
Another factoid is that you can always make a larger file size image smaller with decent quality. However, the opposite is not the best way to handle digital images, that is, take a smaller illustration and try to enlarge it.
Taking a small file and enlarging the image dimensions will almost certainly result in a blurry, low-quality image, referred to as being pixelated.
With original files that have large file sizes, you have two distinct possibilities. Either the file image is enormous, or the resolution is quite high.
The first step is to determine the image dimension required in the page layout.
Consequently, we have to balance that relationship when preparing images.
What should be the source file size for web use?
- For large images used in banners, hero images, or full-screen slideshows, we suggest downloading or have the original image size no more than 1 megabyte (1 MB).
- Before optimization, images work best at 300 kilobytes to 500 kilobytes (300 KB~500 KB).
For optimizing, almost all image editing software has integrated settings to adjust the original file for web use or digital screen viewing. There are loads of free online apps and downloadable software that are very efficient for varying skill levels. A list of these programs is available in the following segment.
To illustrate the effect of adjusting an image file for web use, look at the two cartoon images shown.
Both have an image dimension of 500 px × 402 px and are .jpg file formatted. One has a resolution of 144 ppi, with a file size of 42 KB, and the other's resolution is 90 ppi but has a file size of 18 KB. Can you tell the difference?
Both look identical, but one has a file size the is 234% larger than the other.
If the image editor does not have this function for automatically adjusting the file for web use, you can do that same thing with just a few keystrokes.
how to manually configure an image file size?
The procedure will vary depending upon the image editor used, but here are some of the steps that should cover the general approach:
- Open the utility to modify the image size, and make sure the control for maintaining the proportions is selected. This utility will preserve the ratio of the width to height, known as the aspect ratio.
- Next, change the resolution of the image. As we did above, we modified the resolution from 144 ppi to 90 ppi. The result will be that the figure will shrink from its image dimension of 500 px × 402 px. With the application that we used, the illustration changed to 312 px × 251 px. You will notice that the screen size also adjusted quite a bit on your monitor.
- Change the width and height manually back to their original size, or the image dimension that you need.
- After that, just save your file, but remember to make a notation in the new filename, so you know what you have done to the image. Something like "blue_suit_man_90ppi.jpg" would work.
The result is a file size that is substantially smaller with the ability to load faster and not contribute to the bloating of your webpage.
free image editing software
As we stated before, our preference always is to have software loaded on our local computer. Here are some of the better free downloads available in keeping with that predilection:
- GIMP: Advanced level for cross-platform use; features that approach expensive software
- Fotor: Simple click utility for Windows and Mac systems; has batch feeding function, but lacks the ability for complex editing
- Photo Pos Pro: Basic and advanced levels but strictly for Windows; has a smart user interface
- Darktable: Beginner to Intermediate level for Windows, Mac, and Linux downloadable; a large variety of formats including raw data
- Microsoft Windows 10 Photo: Beginner level for PC Windows 10 users; basic features
- Apple Photos: Beginner level for Mac and IOS; basic features
Be aware that not all of these utilities have the same features, ease of use, and functionality. If you cannot find one that handles all of your needs, employ a couple of editors and use them in tandem on the same image to get the desired result.
how to use whitespace?
Whitespace, which is also referred to as negative space, is the open area surrounding typography, images, and illustrations.
The proper use of whitespace can not only make the page layout look attractive, but it can also help the viewer navigate through the content more efficiently.
There are two distinct feelings on the subject. Web designers want to create more of it on the page to help mitigate a cluttered look. But owners tend to want to fill it up with stuff.
Earlier, we dealt with line-height and letter and word spacing, which contributes to whitespace. Now we will move onto other elements that are influential to the effective use of negative space.
organizing page content to create whitespace
The principle of proximity relates to the perception of how visual components are associated with one another. That is, how near they are to each other. More precisely, elements that are closer to each other seem related. In contrast, those that are at a distance appear unrelated.
Accordingly, the application of the principle of proximity affects the viewer's eye movements across the page's content.
If the page elements appear tightly grouped, the viewer can become overwhelmed and become unconsciously muddled with the optical pandemonium.
The amount of whitespace surrounding groupings generates visual cues to the eye. It establishes relationships among the various parts of the pages, for both text and images.
Also, by separating or grouping elements efficiently, the visitor's eyes tend to move toward the essential items, and at the same time, generate whitespace. That effectively makes whitespace a separator.
effects of whitespace
If you want a page to have harmony, balance, and fortify your brand, make an attempt at whitespace.
This concept has a strong tendency to foster a sense of luxury and elegance while eliminating unnecessary distractions. And eliminating distractions means better understanding.
As validation, if you have ever paged through a high fashion magazine, you will see a prime example of it.
Our first example is extreme, but it gives a sense of what may not be a good idea of harmony and balance. It is tough to focus on what to look at first. With just a few seconds to connect with the viewers, the last thing to want is to confuse them.
When using whitespace correctly, viewers find it easier to move from blocks of text and images, which creates better user involvement. Also, images that have significant padding around them have a more substantial impact.
Whitespace does not have to be white, despite what the term implies, it can be any color to accomplish the desired look. Factually, a lack of color, texture, pattern, or background image can affect whitespace.
However, what may resemble simplicity is tough to accomplish. It may look effortless, but proper use of whitespace is difficult, and improper use can be frightful.
