Blog Feed

Design Strategies for Websites

In my last post, I covered the methods for finding the perfect target audience for your website. But now that you’ve found them, you must move on to step two. This is reeling in the audience to attract regular visitors and promote whatever your website is about. Of course, when one thinks of strategies for designing attractive websites, it’s mainly about the aesthetics. And while it’s very true, it’s also important to make sure the website is consistent and user-friendly. There’s many other strategies for designing a website, but for now we’ll just cover the basic tactics of web design.

Designing Eye Candy

Photo by Hal Gatewood on Unsplash

Making your website visually pleasing for your audience initially stems from any ‘needs’ they may have. From the same example before, if the website’s target audience is elderly people, you should consider larger and easy-to-read fonts. Once all the ‘needs’ are figured out, you can move on the the ‘wants’. And what you should want is a balance of color and typography that accurately represents the topic of your website. Choose color palettes that aren’t too contrasted, but hues from the same color family to bring harmony. Use the principles of typography to pick a few fonts that match the feelings you want to convey (e.g. For sophistication you’d use script, cursive fonts).Finally, when adding info graphics or photos, use the rule of thirds to properly balance the placement of graphics throughout your website.

Use Familiar Conventions

A great part of designing everything is that you have the liberty to do whatever you want. This truth isn’t limited to the layout of a website, but it should be. It’s well and justified to want to design a website that’s unique and full of innovative graphics. However, it’s more ideal to create a website with conventions that the general audience can recognize. This would include placing the web logo at the top above the navigation menu. Or having the contact info at the bottom of the site shown with identifiable icons. This is allows visitors to browse a new website and automatically understand where to go. And that’s much better than them leaving the website in a flash because everything was too “abstract” to navigate through. Sometimes, comfort-zones are the way to go.


Putting aside the hard, dedicated work it takes to develop a website, it takes a lot of brainstorming for designing a website. And that’s because you have to make creativity compromises for yourself and your audience. Something that looks amazing to you, may not be so appealing to your target audience. So, I hope these strategies help give you a create a standard plan for designing your website. There’s much more designing tips out there which can be found in this website about effective website design. Enjoy!

Target Audiences for Web Pages

Has there even been a time where you were searching for specific information, and you get to a website that’s simply…unappealing? It has the information you’re looking for, even extra sources to use for reference. But maybe the level of vocabulary used is too advanced or vague to comprehend. Maybe the layout of information is hard to read or the graphics and colors displayed are unattractive to look at. At times like this where we have abundant access to information, it makes sense to dismiss the website in search for something “better”. But who can say that your definition of better matches the concept that the web designer had in mind. It could be, that instead of bad web design, the website was put together with a certain type of audience in mind. And that is how we will go into properly determining target audiences for web pages.

Start With the Web Page’s Purpose

Photo by Christina Morillo from Pexels

Before searching for the best target audience, you must ask yourself what the web page would be for, and who would need it? Who would be interesting in the topic of your website? Was are you offering that they might need? You can’t expect professional business workers at a site that gives instructions for 5-ingredient meals. And even if they find interest in it, it’s not wise to format such a web page for professionals only. If you feel that your web page will mainly attract amateur chefs or college students, then narrow down your target audience from there. Once you know what your web page will be about and you get a basic idea of who’d be interested, then it’ll be easier to build up a definite target audience.

Look Up the Demographics

Photo by Jopwell from Pexels

Now that you have a general idea of the audience you’ll likely receive, it’s time to research the demographics of the audience. Finding data on the demographics will better help you determine how to set up and design your web page. If your target audience is retired people, ages will range from their late 50s to early 60s. This data alone can already make you settle on a text in big and easy-to-read fonts, with colors that are easy on the eyes. But of course, don’t just stop at age ranges. Web designing professionals look into gender, location, hobbies, lifestyles, and current trends they may share. Of course, some of that information is closer to psychographics, but the more info the easier!


As simple as it sounds, it takes a lot of research and web page testing to ensure that the web page is ready for the public. It may take weeks, months, years, (an eternity), before you feel like you’ve matched your web page with your target audience. But even if it’s easier said than done, it can still be done. I hope this information (and unnecessary words of encouragement) can assist on finding and locking on your target audience. For more information, feel free to check out this website on identifying your target audience. Enjoy!

Regulations on the Copyright Proprietary Fonts

As we all know, copyrights are meant to protect the property of one’s original content. It mainly deals with how the copyright owner’s determines if their material can be used and how it should be used. In this sense, we’ll discuss copyright claims over fonts with a certain type of fonts called proprietary fonts. It is mentioned that typefaces aren’t usually protected by copyright law. It’s generally due to the vast commercial and professional use of typefaces. And with this reason, all typefaces and their fonts are automatically protected. But we will discuss how and why that’s different from the protection of proprietary fonts.

Proprietary Typefaces and Fonts

Photo by KML from Pexels

Before we discuss the regulations on the these fonts, we must know what proprietary fonts are. So, proprietary fonts derive from typefaces that are owned by professionals or businesses in which the font used in their branding was made specially for them. This gives them all rights over their own work; whether to request permission or payment for usage, or to restrict it for usage overall. This is different from non-proprietary fonts, where their typefaces can be used by anyone. They too have copyright claims with regulations on how to use the owner’s fonts. But other from that, they’re accessible to all and is usually what you’d find on websites holding free-to-download typefaces.

Copyright Regulations

Photo by Jon Tyson on Unsplash

To elaborate more on proprietary fonts, they are managed by their copyright owners on if and how their specialized fonts are used. This goes especially for businesses that use their type fonts for personal use, as well as typographers that make typefaces for a living. Because of this, copyright regulations vary on the owners so it’s always suggested to read their regulations before usage (if given the permission to of course.) To illustrate, here are some types of regulations that could be given if using a copyrighted typeface.

  • Restrictions on the number of computers it can be installed on
  • For personal uses only (then a list of examples are given)
  • Restrictions on whether it can be broadcasted or placed online for advertising
  • Requirements to use certain fonts if taken for commercial users

In all, the world of typeface and fonts are enormous, enough for their to be copyrights, trademarks, and patents on them. And in this era of technology, typefaces have quickly become a consistent aspect in our daily lives. As all this usually are, it’s no wonder that the usages of fonts must be governed by law. Hopefully, this has given you a sense of awareness to be more cautious when finding and download in fonts. For more information, check out this website I found about the legal factors on typefaces. Enjoy!

Spot Colors

Previously, I brought up CMYK and RGB coloring and their differences. CMYK uses subtractive color mixing to add color to printed graphics and images. RGB, on the other hand, uses additive color mixing to overlap colors on digital screens. But this topics dwells on printing in color and there’s one more method that we’re missing: spot colors. Although it’s not as commonly used compared to CMYK, it’s amazing technique should be acknowledged.

What are Spot Colors?

Photo by Copper and Wild on Unsplash

As stated before, CMYK is a color combining method which overlaps each layer of the four base colors (Cyan, Magenta, Yellow, and Black) over each other to create the desired colors. With this, an image deceives the eye with four colors. However, spot colors are different because the desired colors are pre-mixed into a solid color. For instance, to get purple, instead of overlapping hues of cyan and magenta, you can use a specific recipe that mixes cyan and magenta to achieve the color wanted. This gives spot colors an advancement in color quality. But just like CMYK printing, it comes with conditions and limitations.

What You Can and Can’t Do

Photo by Keila Hötzel on Unsplash

It’s true that spot colors has conditions, one being money-the main issue that can get very expensive quickly- which is why spot color is used for certain graphics. Unlike for CMYK, where you can print out fully color images, spot colors are mainly used for printing logos. It’s best to print graphics that use four colors or less for smooth, simple coloring. And since spot color matches the perfect hue of your decision, it’s also better for more vibrant or metallic colors. This makes spot color perfect for basic logos consisting of one or two colors. Spot colors are also perfect for small font and fine lines that can’t be easily copied with the halftone dots of CMYK.


Does such high color quality and expensive terms make spot color better than CMYK printing? The answer of course is no. (which I’m sure you knew…right?) Both CMYK and spot color have their strengths and weaknesses but they both amazing ways to put your digital art to print. So if you ever think about using spot color, give it a try! For more information on spot color and its differences from CMYK, check out this amazing website I used. Enjoy!

Web-Safe Colors

Technology has really expanded and evolved in the past decade. Each time I research and write about it, I’m constantly reminded. And that’s something that can’t be ignored as it has grown so much that technology has woven itself into our daily lives. Because such an innovation has rapidly improved in many ways, the problems and limits that followed such tech are now long gone. For example, not being able to see every color on the monitor. Not because it was in monochrome (of course) but because the computer monitor couldn’t display every color. In this moment, we’ll dive into the technical problems of the late 18th century.


The Rise of Web Safe Colors

Photo by Domenico Loia on Unsplash

In 1977, home computers were created and became a common home appliance around the 1980s. As amazing as the new technology was, it was very confined in what it could’ve done, especially compared to today’s computers. In terms of colors, computer monitors could only project 256 colors. So, when there was an image or graphic was couldn’t be displayed on the monitor, the closest color to the original that the monitor could use would replace it. To make thing simpler, a color palette of 216 colors were chosen as ‘web-safe’. So, what were these colors and how did they work?

The Complex Color Palette

Photo by Markus Spiske on Unsplash

For starters, these web-safe colors didn’t come with names, but were identified by certain RGB values: 0, 51, 102, 153, 204, and 255. Since these numbers are multiples of 51, they are used via percentages to determine the reduction of red, green, and blue. Basically, starting with 255 each color loses its hue by each 51 reduced, leaving you with 36 colors in one palette and 6 groups of colors. If that sounds too complicated, it’s because it is complicated. But this carefully calculated formula allowed a variety of colors to be displayed through all monitors of different brands.

Do We Still Need It?

Photo by Daniel Korpai on Unsplash

With all this information, a question arises: should we still stick to web-safe colors when placing images and graphics into the Internet? As stated before, this was the solution to a problem involving monitors that could only show at most 256 colors. But today, that’s no longer a consideration with how much our technology has advanced. Most digital/ graphic designers wouldn’t ask themselves this question anymore. However, it’s still a valid question to wonder. And the answer varies on the uploader. Web-safe colors are still a color mode that can be used but isn’t necessary unless you want to allow more antique monitors see the graphics clearly. But overall, web-safe colors are still important, even if it’s not such a concern anymore.


With such a complicated topic and basic analyzation, it’s not wrong to still have questions. If you would like to further explore the history behind web-safe colors, here’s the website I used for its history and functionality. Enjoy!

CMYK & RGB: What’s the Difference?

Here we are again with another round of ‘What’s the Difference?’ in the world of digital design! In this blog we’ll cover the two types of color modes and their comparisons. To many digital designers, these terms are well-known but not as much spoken about. For all we know at the moment, CMYK and RGB deal with colors and how these colors are seen in certain situations. But what about them? Why are they so important in designing graphics? And what are they specialized for? With these questions set in stone, we’ll begin with the research on these two important color modes.


CMYK

Photo by Dario Seretin on Unsplash

For starters, the color mode CMYK is an a abbreviation for Cyan, Magenta, Yellow, and BlacK. These are the colors used to print graphics and images. The ink is used via subtractive mixing to turn a blank white page into a page with various particular colors. As stated before, the CMYK color mode is used for graphics and images that will be physically printed, so this color mode is best used with business cards, flyers, t-shirts, restaurant menus, etc. When preparing a digital graphic for printing, most file formats are compatible for CMYK, but some files are most suited for printing than others. The most compatible file formats for CMYK are PDFs, AI (Adobe Illustrator, if you have access to it), and EPS (a good file format for vector programs besides Illustrator).

RGB

Photo by Florian Olivo on Unsplash

Next up is RGB, an abbreviation for the colors Red, Green, and Blue. These three colors are used via additive mixing to turn a black screen into a screen full of colors varying in intensity. Such freedom with the colors can allow the designer to adjust how shaded, vibrant, and saturated the colors are projected. When I say ‘screen’ I’m referring to digital screens such as: computers, smartphones, televisions, etc. The RGB color modes allows graphics to be seen on such screens like icons, online ads, images, videos, and more. Just like CMYK, RGB has file formats that they can work best with. These formats are JPEGs, GIFs, PNGs, and PSD (for Adobe Photoshop).


With this new found information, I believe he have a lot to thank these color modes for (or at least the engineers who created them). These modes are not only responsible for the many physical things we see around, but for the seemingly endless digital graphics we encounter each day. Hopefully this post clears up the confusion for these commonly used terms, and helps you determine when and how to use CMYK and RGB. If you were unsatisfied with the brief explanation, feel free to use the website I used as research for the color modes. Enjoy!

What’s the Difference: Raster vs. Vector

As we continue to expand our knowledge on graphics and design, more questions arrive (to my mind at least). An example of such asked by beginners and amateurs is, “what is a vector and raster and what’s the difference?”, which is fine to question. That’s because for the most part, they basically do the same thing, right? Well not entirely. There’s small differences in composition and uses that a designer should know. These types of edits and images are very important to learn, and it’s a pretty complicated concept to understand. Nevertheless, we’re going down the rabbit hole to get a better understanding of vectors and rasters!


Vector

Photo by Rober González on Unsplash

Vectors are mathematical formulas which explains how paths of a graphic are shaped, colored, and outlined. Vectors allow images to keep their appearance identical to the original image no matter what the image size. This allows them to scale images and graphics to any chosen song. It’s best to use vectors for simple designs with simple colors like logos, illustrations, engravings, signage, etc. This feature can be used in Adobe programs like Photoshop and Illustrator. With these restrictions, most graphics depend on rasters. Despite its limitations on what it can be used for, vectoring is a great tool to learn and take advantage of.

Raster

Photo by Will Porada on Unsplash

On the other hand there’s raster, working with every single pixel of color in a graphic to generate an image, showing precise detailing. Raster can be used for complex graphics like images, digital painting, GIFs, etc. This feature can also be used in Adobe programs along with other design programs. However, scaling a graphic depends on the quality of the image. A rastered image can’t be easily scaled up as they can be scaled down. This messed with the size of the pixels, making the image blurry. Don’t let this stop you from using rasters for graphic editing, because it’s also an amazing asset.


Although it’s not common to find in conversations (in any topic for that matter), vectors and rasters are pretty important in creating amazing, quality graphics and images. Most if not all images or graphics had some sort of involvement with these tools. Hopefully this basic information allows you use these amazing tools when dealing with graphics and images. For more information on vectors and rasters, click the link for this amazing website I found. Enjoy!

Charging for Graphic Design Jobs

When have occupations around media/ communications and design, there’s more ways to work in those fields. The blog will focus on freelance graphic design, to which graphic designer has complete control over what and who they work with. So with such freedom, one must ask: “How much should I charge for graphic design jobs?” There’s many factors to consider for a clear answer, and those will be discussed today.

Employment vs. Freelance

Photo by Green Chameleon on Unsplash

The more common form of working is being employed into a company, where it’s your “permanent” occupation and you’re being supervised by manager and bosses. As an employee, you can receive benefits like free health insurance and retirement plans while not having to pay employee taxes. As a freelancer, you’re more liberated and flexible. Typical freelancers search for jobs and make temporary negotiations and contracts with multiple employers. Because they are their own manager, they must be on top of themselves to keep the flow of income coming. Freelancing doesn’t include any benefits or paid vacation, but you control your work days. The most important difference is the flow of income because an employee gets paid on a salary or hourly basic. A freelancer, however, gets paid by task,which varies by the person that hires you. This is why as a freelancer you must question how much you’ll charge for your work.

Working with your Client

Pay Knowing your Worth

Photo by Mimi Thian on Unsplash

As a freelancer, you’re able to make negotiations with your client on how you’d like to be paid: by project/quote or hourly. Hourly pays (which is more preferred by most), tends to be around $25-$150 per hour. Being payed by quote simply means giving an estimated price based on what you’re asked to do. If the client asks to pay by quote, you can make an estimate how long it would take to complete the project and give them a full payment. As a freelancer, since you’re working directly with the client, having a set hourly pay rate can be altered based off the client’s will too. Admittedly, some clients may not be able to afford your preferred pay rate, so you can fluctuate it until you reach an agreement. Because a freelancing income changes constantly, It’s important to know your skill to you don’t over or under-price your work! Have pride and know your worth (unless you’re not that skilled then just take it easy)!

Equally, working as an employee and working as a freelancer comes with advantages and disadvantages. There’s many things that a freelancer can do while being spontaneously limited. As you go on with freelancing, you’ll get better at negotiating and pricing your work. I hope this further clarifies is, but if not then here’s the sources I used for info on freelancing and charging for your work. Good luck!

Destructive & Non-destructive Photoshop Operations

Photo editing comes in two ways: destructive and non-destructive. That’s pretty much it. The term ‘destructive’ doesn’t mean that the photo is torn up and ruined though (as alarming as it sounds). It’s the way the pixels of the original photo are permanently altered forever. After editing a photo on Photoshop, you can’t open it back up on Photoshop and revert it back to the original. It’s altered forever. Many editors don’t like this idea, so here’s the different types of destructive and non-destructive operations on Photoshop.

Destructive

Photo by Szabo Viktor on Unsplash

As stated before, destructive editing manipulates the pixels on the original photo. Photoshop itself and many other Adobe programs are dubbed “destructive editing applications” because of its many adjustments that destroy the original photo pixels. This makes it hard to give exact examples of destructive editing since the entire software is a destructive editor (how dangerous!). Once you tint, crop, add filters, erase, or use the healing brush, the pixels are no longer the same. Of course, this is a disadvantage as you can’t take back what you changed-and undo and redo doesn’t count in my point. To combat it because Photoshop has a lot of potential, editors find non-destructive ways to edit their photos. These tricks are harder to find if you’re a beginner at using Photoshop, but even Adobe gives info about non-destructive edit methods!

Non-destructive

Photo by Kevin Bhagat on Unsplash

The standard non-destructive method in Photoshop would be to duplicate the original photo and edit it on a separate layer. This is very effective in editing and saving the altered copy while keeping the original untouched. But there’s much more to this safe way of editing on Photoshop. To share a few methods on non-destructive editing, you can crop photos and revert it to its original whenever you please by turning off the “Delete Cropped Pixels” check box. You can also use vector masks and filter masks which hide the pixels you edited instead of deleting them. And then there’s adjustment layers that can edit a photo’s tone and color and change it back to the original whenever you need to.

Overall, Photoshop is a great yet destructive program. Many editors turn to other programs like Aperture and Adobe Lightroom that aren’t destructive. And while that’s well and fair, you don’t have to lose hope on the capability of Photoshop’s operations. There are many ways to edit photos on Photoshop without destroying the original if you look hard enough. If you would like more information on the differences of destructive and non-destructive editing, along with tips on non-destructive editing on Photoshop, click on the links given respectively. I hope you’ve been enlightened!

Photoshop Files: 72 DPI vs. 300 DPI

Infamous for its versatile usages, Photoshop is compatible with many projects and occupations. And because it is a powerful and precise software, it has precise measurements and adjustments. This is where photo resolution comes in; which is how clear and sharp a photo appears. A photo’s resolution can be measured in DPI, or dots per inch. This measurement is used by printers to know how many dots they must rationally place when printed. Based on this post’s title, it’s safe to assume that 72 DPI probably isn’t as good as 300 DPI, because the more dots present, the better detailed the picture will be. But if it’s true, then why use 72 DPI? I wondered myself until I found out that 72 DPI is the standard measurement for computer screens. Or at least it was. It was a confusing fact because many computers are pretty big in size, making an image of 72 DPI seem small or at least blurry. And that’s when I researched some more and found that because technology has improved so much, that DPI differences aren’t noticed on device screens and therefore really don’t matter.

72 DPI

Photo by João Silas on Unsplash

Back in the 1980s when computers were a newer concept and smaller, Apple’s Macintosh had a 9 inch display and 72 DPI. And despite the evolution of computers, many people still hold onto the stigma that a computer’s resolution should be 72 DPI. So ignore what I said in the introduction: DPI is not a measurement for computer screens (anymore), but for printing out an image. Now that it’s clear, lets focus on image resolutions when printing. Image size and resolution go hand-in-hand, and the chosen DPI affects the overall size of the photo when printed. Additionally, an original image’s PPI-pixels per inch-can affect the image size when changed by the DPI. For example, if you have image with 500 x 500 pixels and change the resolution to 72 DPI, the image may grow or shrink in size to match the amount of dots you want an image to have. Overall, 72 DPI isn’t that bad, but what if you compare it to 300 DPI?

300 DPI

Photo by Bank Phrom on Unsplash

Just for clarifications (because I’m we’re both a bit confused), an image with the resolution of 72 DPI looks fine on a computer screen so don’t bother changing it for a better photo unless it’s going to be printed. In this case, most photographers print their photos with the resolution of 300 DPI. This is the standard industry quality because the higher amount of dots will make the image more detailed and sharper. If the image resolution as 72 DPI, then the photo would be a good size, but pretty blurry. Now you’re probably wondering why Photoshop is in the title when it was only mentioned once. When printing an image, you can edit an image’s resolution on Photoshop before printing it. How to change image resolution: Image > Image Size > Resolution. That being said, I can conclude this blog here. We covered the differences, the myths, and the methods of image resolution. Hopefully, you got the gist of it but if not here’s the websites I used for DPI and the differences of 72 and 300 DPI. Good Luck!