Page Size Optimization & Digital Graphics

A website is more than just links, graphics, and words. There’s another side of web development that makes the page more user-friendly. A website can’t only look functional, it has to work functional as well. And that includes what is added to the web page. When a web page is slow, it doesn’t matter how amazing it looked (or could’ve looked) because humanity no longer has the time to wait a few seconds for a digital location rich in information. This is what makes Page Size Optimization so important, as it directly effects the size of your web page along with the time it takes to load for a user. I’ll also cover the type of digital graphics that can be inserted in to a web page and how it’s efficiently used.

Managing the Page Weight

Photo by Christina Morillo from Pexels

To start off, we need to know what Page Size Optimization it. It’s the practice of managing the weight or size of a web page by its amount of content in order for it to keep its functionality. Think of it as a wheelbarrow being pushed up a hill. It does its job well at holding objects, but the heavier the items inside the wheelbarrow, the harder it will take to reach the top of the hill. This of course results in a slower time to push the wheelbarrow. A web page can only load so much content at a time, which is something that a user is quick to notice. To reduce the page weight and speed up loading time, try to remove excessive custom fonts. Of course, custom fonts add uniqueness and originality to a web page, but it carries a lot of weight which adds up to your overall page size. Therefore, it’s best to also limit the number of custom fonts you use to at least two. If you can’t bear to let them go, many web developers recommend making WOFF2 files. It converts your custom font to the most efficient format for browsers, which helps reduce the weight of your web page. Another thing that can reduce the page weight would be to limit the sizes of your images. The dimensions of an image should never be bigger than its container. You can make the size to fill up the entire container if you wish, but never make it bigger. To help with the image’s file size, you can also compress the image, which shrinks the image even more.

Digital Graphics for Web Pages

Photo by Tranmautritam from Pexels

To add on to images in a web page, it’s important to know when it’s best to use JPG, GIF, PNG, should be used in a web page. To start off, JPG have always been the first file type to depend on for web images. They allow raster editing and compression, which helps them download easier. Next, there’s GIF, or Graphics Interchange Format. It’s a raster format that is used for animated graphics and comes with customization settings which could help reduce the file size. It’s best to use it when you need a web animation that’s a small file and allows transparency. Lastly, there’s PNG, or Portable Network Graphic. It’s also a raster format that comes with transparency and a higher color depth. PNGs have currently taken the crown for the best file to use when needing high-quality web graphics that are still small in file size. 


Overall, web development can be very methodical, so I hope this collection of information helped clear things up. If you couldn’t tell, I am not a professional web developer, so I too had to research information on it. If you would like to learn more about Page Size Optimization and when to use Digital Graphics, check out the links respectively. Good Luck!

Designing Web Banners

When browsing the Internet, there’s many things that a user would come across: articles, videos, video games, broadcasting sites, social media, and much more. For companies that depend on advertising for the expansion of their brand (which is virtually all businesses), the Internet is a gold mine of opportunities to promote themselves to the world. But to do that, they need advertisements. And that’s where web banners come in! Across the Internet, thousands of digital ads are found on countless websites. So in this blog, we’ll be discussing the theory and process of these common-and sometimes annoying-elements.

Who Designs Them

Photo by Dylan Gillis on Unsplash

Web banners are digital advertisements that are embedded into web pages of their choice. Though it sounds simple, there’s intricate work involved in making and presenting such banner ads. So, whose responsible for creating them? That is none other than marketing designers, of course! Marketing designers work with companies to brainstorm and design resources that can advertised via print or digital. Additionally, Marketing Designers ear an annual salary of $69,42, which can increase over time as they continue to build on their experience and skill.

The Process

Photo by Startup Stock Photos from Pexels

There are many things to consider when creating a web banner for a company. The first step is considering what would be the best size for the banner ads. There’s statistical evidence on the most effective banner sizes. The most effective banner sizes are listed below:

  • Medium Rectangle 300 x 250
  • Leaderboard 728 x 90
  • Wide Skyscraper 160 x 600
  • Banner 468 x 60
  • Skyscraper 120 x 600
  • Rectangle 300 x 100
  • Half-Page 300 x 600
  • Large Rectangle 336 x 280
  • Mobile Leaderboard 320 x 50
  • Billboard 970 x 250
Photo by Pixabay from Pexels

And when you chose the best size for your banner ad, you need to decide the best placement for it on a website. Of course, options would be limited when you’re paying for a place on someone else’s web page. But it’s best to look for places that closest to the web page’s main content. Something else to consider would be the design of the banner ad. Can it fit in with the web page and still stand out? Many marketing designers focus on design elements that can grab a user’s attention while making the advertisement simple and easy to read. Since people don’t click on websites expecting to look at ads, banner ads must be able to attract the user and get straight to the point for what their brand is. This is where seamless animations, contrasting colors, and compelling headlines with CTAs really come into handy. With all these elements carefully constructed, the banner ads can successfully bring web users to their landing pages.


Overall, Marketing designers have a lot of work cut out for them, especially in times where technology continues to evolve each year. Personally, I believe could do this job and enjoy the work I’d do. I don’t mind tedious work and the creative challenges that comes with each project would keep me engaged in my work. This job could also help build professional social skill from working alongside companies. But enough of this tangent, hopefully this blog helped understand the process of creating banner ads. It took a lot of research to put this together, so for more information on design tips for banner ads check out 99designs and Match2One. Enjoy!

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!

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!

Adobe Softwares & Its Unique Capabilities

Photo by Matthew Kwong on Unsplash

The Adobe franchise is very popular because of their powerful and efficient softwares for design. Their softwares like Photoshop, InDesign, or Premiere Pro are very expensive (which sucks for most people), but it’s for a good reason. Adobe has created around 16 programs for designing and developing, however, there’s at least 8 that are more useful in the art/digital design spectrum. So let’s go down the list based on what each softwares are used for!


Printing Designs

Photo by João Silas on Unsplash

A good start for the various Adobe softwares would be programs used for printed products. Such printed products would include posters, flyers, book covers, or even logos. In these area, it’s important to incorporate visual attraction with informative skills. From this idea, three Adobe softwares came to mind: Adobe Photoshop, Adobe Illustrator, and Adobe InDesign. Overall, these programs are perfect for creating your own unique logos, format typography, and make certain prints to hand out. To better understand, I’ll give a very brief explanation of what they’re typically used for separately. Photoshop is one of the most popular design softwares used to edit photos, develop graphics, and create digital designs that can be printed or shared online. Illustrator is focused on creating graphics like Photoshop, but in a different way. Illustrators can make was is called vector art. Vector art is mainly for less detailed elements with curvatures and geometric designs. This is useful for making logos and original cliparts. Then there’s InDesign which brings all the amazing design elements and editing photos together in a printed product. It’s like the advanced version of a Microsoft Page layout. With these three software, one is already an equipped graphic designer!

Web Designs

Photo by Web Hosting on Unsplash

More on the digital side of design, web design is fairly easy now-a-days because of the websites and programs that allow a user to have their own website. (kind of like this!) After looking at all of the Adobe softwares, a few programs seemed perfect for the part. This would be Dreamweaver, Fireworks, and Photoshop (again). I won’t go into Photoshop because I already gave it props, but it is very versatile so I added it. On the other hand, Dreamweaver is more based on programming and using codes. Because of the software’s functionality, most users rely on it for creating websites in a simpler way. Fireworks is like the other side of Dreamweaver because deals with vector designs for interactive websites, regular websites, and more. This software is the Illustrator for websites and mobile applications, to state it bluntly. And with the former two, websites and mobile apps wouldn’t be a bad idea to execute.

Animations & Videos

Photo by Jakob Owens on Unsplash

Moving on to something that’s less still and more lively, Adobe also have softwares for videos and animations. In this era, films and animations have become more popular as technology made them more engaging and thrilling. So of course Adobe will create more amazing softwares to create this type of content. This is where Adobe Animate, Adobe Premiere Pro, and After Effects comes in. Animate, once known as Flash, is used for creating cartoons, interactive comics, and much more. It was very popular years back, whereas now technology has further advanced to something faster and better in quality. Despite that, many websites and media players still put it into use. Premiere Pro is more video-oriented with the ability to edit video tracks to create movies. It’s very basic on it’s capabilities because it focuses on the actual video tracks and clips than special effects. But that’s where After Effects takes the lead by adding special effects to both videos and animations. It makes seemingly hard effects like adding text to frames or using a green screen very easy to manipulate. It truly makes something come to life (as cheesy as it sounds).

Photo Editing & Design

Photo by Jakob Owens on Unsplash

Last but definitely not least we have photo editing and design. This is definitely the classic form of art so of course there’s many software that can edit and add effects to photos. From Adobe, there’s Adobe Photoshop and Adobe Lightroom which can edit photos and add graphics. Again Photoshop is a very flexible software that can do a lot if you know how to use everything and take advantage of it. That’s why it’s great for editing photos. Then there’s Lightroom, which arranges and organizes photos. This is great for making collages or panoramas after editing it on Photoshop. It sounds simple in theory but is very powerful and efficient in its work.


That being said, there’s nothing more to say about Adobe softwares. Actions speak louder than words and their capabilities speak for themselves. Each software is very flexible and user-friendly so it can be used in a work environment or in the comfort of your home. There’s much more Adobe softwares that haven’t been mentioned, although the softwares already mentioned are more than enough. For more insight on Adobe’s other great software, check out this website that I used fro research!