Vector vs. Raster Images

One of the most important things to keep in mind when designing a website is image optimization; you need to use the right type of image for the right application. Digital images come in two different file types: vector and raster (also commonly known as bitmap). Vector images are made up of mathematically defined geometric shapes containing points (or “nodes”) that are connected by lines/curves by the computer, filling in the missing information. Raster images, on the other hand, are made up of thousands and thousands of tiny squares or dots that are assigned a specific color value. If you’re able to utilize these two types successfully, you could potentially save yourself a lot of time and money in the future. 

So how do you know which graphic type to use? Below I’ve compiled a quick list of pros and cons of each type, followed by a succinct conclusion.

Vector Graphic Images

Pros:

  • Scalability: Because vector images are created mathematically the equation can be recalculated with no loss in data, allowing you to scale the image up or down without reduction in resolution.
  • Conversion: You can very easily convert a vector image to a raster image, but not the other way around.
  • File Sizes: Vector image sizes tend to be much smaller than raster images.
  • Colors: It’s very easy to change colors with vectors without any damage to the image, making it very simple to edit.

Cons:

  • Limited Details/Effects: Vector images will never be as detail-rich as raster images, which means neat textures and effects that you can apply to raster images would be very hard to recreate in a vector image.
  • Compatibility: Most vector file types are not universal, tending to be restricted to the program the file was created in (for example: image.ai; “.ai” is a file type only available in Adobe Illustrator).

Common vector files: SVG, AI, EPS, PDF

Raster (Bitmap) Graphic Images

Pros:

  • Rich Details: Since raster images are made up of pixels you can create lots of rich details in the image, much more than you could ever achieve with vector images, which makes raster images ideal for photographs.
  • Effects/Textures: As a part of being capable of handling rich details, it’s much easier to add filters, effects, and textures to a raster images.
  • Precise Editing: You can do very precise editing one dot at a time when you want to.

Cons:

  • File Sizes: Depending on resolution and file dimensions, raster images tend to output at a larger file size than vector images.
  • Lack of Scalability: Unlike vector images, raster images do not scale up (and in some cases, down) very well. Raster images are resolution dependent, and when enlarged the image becomes blurry and loses a lot of details (as known as “pixellated”).

Common vector files: JPG/JPEG, GIF, PNG

Conclusion: Vector images are best for images that will regularly be scaled up and down, such as text and logos, while raster images are best for detail-rich images such as photographs or for digital publishing. A good way to look at this is to think of vector images as “source” files, and raster images as “output” files; for example, you could create a logo originally as a vector image and then output it as an appropriately-scaled raster image that can function for your website, merchandise, etc.

Sources: [ Vector vs. Raster ], [ How to Explain Raster vs. Vector to Your Clients ], [ Vector, Raster, JPG, EPS, PNG – What’s the Difference? ]

Effectively Using Icons

Icons can make or break a website’s design; used correctly they can enhance aesthetic and provide better user experience, but used incorrectly they can confuse the user and have them hitting the back button without even exploring your website first.

One of the biggest benefits from utilizing icons is that they can make your website visually appealing; in particular, icons can be a great way to promote branding. A unique, consistent style can give your website personality and communicate a certain experience to the user. Depending on how you’ve designed your icons, your website can be viewed as sleek and professional, educational, artistic and creative, and so on. In order to convey such a message to the user, it is probably best to create your own set of icons rather than using a stock set from the Internet.

Icons can also be a great way to enhance navigation, and for mobile design where space is limited, they can be an especially feasible option to communicate information. Coupled with text they can help to visually break up content for easier readability, accenting information and offsetting headings and sections. Walls of text that may seem daunting to a reader can easily be organized and complemented by pictorial icons, making information easier to absorb when broken into smaller, clearly defined chunks.

However, there are some things to keep in mind when designing and using icons; the most important goal of your website should be to communicate a specific message, and your icons are no exception. For that reason, make sure to use icons for more than just visual appeal. Using too many icons (particularly for no discernible purpose) can turn an effective tool into mere decoration that the user will ignore. Many articles cite Facebook as being a particular offender in this regard in its navigation menus, for example. Therefore, use icons sparingly to increase effectiveness.

Additionally, make sure the meaning of your icons is easily understood, especially if you’re using icons without any accompanying text. Creating icons that are universally understood across all cultures and peoples can be quite a challenge, but it is important to try anyways. The best solution to this problem is to use only icons that already have a long history of standardization. Do not ignore conventions, and do not try to create icons to represent abstract ideas or complex processes. You may further improve usability by labeling your icons using the HTML “title” attribute to create a tooltip, add an “alt” tag, or simply have a text label present right next to the pictorial icon.

In short, make sure icons are uniquely appealing, readable, universally understood, consistent in design, and functional.

Sources: [ Icons in Web Design ], [ Use and Abuse of Icons in the Modern Age ], [ 10 Golden Rules for Digital Icons ]

Web Design Trend Predictions for 2015

As we enter the year 2015 and technology continues to grow exponentially, we expect web design to evolve over the coming year. There have been several articles written all over the web about what trends different web designers are expecting in 2015, and Web Design Trends 2015 by unmatchedstyle details the general consensus made by these writers.

Some of the predictions include:

  • Holistic navigation design, moving away from hamburger icons and overlaid menus
  • More interactive animations (not Flash)
  • Improved performance
  • Vector graphics over pixel-based graphics
  • Improved GIFs
  • Modular design over full-layout designs
  • Focus on simple/minimal design

I do think that some of these predictions for 2015 are accurate; with the evolution of mobile devices, things like improved performance will continue to be important (I cannot imagine this not ever being important), as well as design that focuses on responsiveness. Modular design will continue to be sought out over full-layout designs, since modular design can more easily respond to changing content and device sizes. Vector graphics will also become increasingly important for this same reason, as vector graphics look great at any screen size whereas pixel-based graphics may look pixellated. CSS3 Animations, though still somewhat in its baby stages, will continue to grow and be preferred over Flash animation since it doesn’t require plug-ins that the user needs to download and install (something that is quite difficult on mobile devices anyways).

However, some of these predictions seem less-than-accurate to me. While I also prefer more straightforward menu designs, I don’t think the hamburger icon and overlay menus are going anywhere anytime soon. They are decent ways to help a designer make use of limited space, and until there are better ways to do the same thing I cannot see this dying out (especially since I’ve seen loads of web apps that use the hamburger icon over and over). Lastly, I cannot see GIFs really growing in the way the writer expects them to; I’ve seen GIFs primarily used for trendy meme-type applications, not for serious design. CSS3 Animations could probably do the same animations as GIFs, but it will be easier to control, is not limited in colors, and is more interactive.

Source: [ Web Design Trends 2015 ]

Welcome!

Hello everyone, and welcome to my blog! I’m Rachel Sheffield, and I’ll be using this website to post my portfolio work, blog about exciting things in the field of web design, graphics, and illustrations, and discuss techniques for successful coding or design.

A little bit about myself: I am a graduate from North Carolina State University with a BA in Arts Application, and I’m currently getting a degree in Web Technologies at Wake Tech Community College. I’ve been a citizen of Raleigh, North Carolina since birth, and I can’t imagine living anywhere else!

Ever since I was a kid I’ve had a passion for art, and I’m always looking for new ways to expand my repertoire of skills. My inspiration comes from things that bring me happiness, such as cute animals, whimsical fashion, mythology, watercolors, melding vivid colors, and calligraphy. I love learning how to do new and interesting things in Adobe Photoshop or with HTML5/CSS3, and I hope to use this website to further hone my skills. I can’t wait to share with you!