How to Mock-Up a Website in Photoshop

This week I thought I’d share a video that I had created not too long ago:

This video is a two-minute tutorial on how you can create a visual mock-up for a website using only Adobe Photoshop. When working with a client, it’s important to have visual mock-ups of your design ideas that you can share with them. I personally believe that creating designs in Photoshop is very beneficial: 1) you are able to create designs very quickly, as you can see in this tutorial; 2) your mock-up will look clean and professional; 3) it’s very easy to go back and alter elements and present the changes to your client again, assuming you use your Photoshop layers properly.

Note: This video assumes that you are already familiar with how to use Adobe Photoshop. If you do not know how to use Photoshop, I recommend that you look up some other tutorials before watching this one.

I hope you enjoy the video!

Advertisements

Simple Steps to Improve SEO

If you want more people to see your website, Search Engine Optimization (SEO) is the way to go. SEO is the process of improving a website to increase the amount of traffic the website receives from high rankings in search engine results. Basically, the higher up your website appears when someone searches for something in using Google, Bing, Yahoo!, etc., the more likely you are to get new visitors. Therefore, you want to have the highest ranking as possible in order to have more visitors coming to you instead of your competition. At the very least you want to get to a point where your website appears on the first results page, but ideally you want your website to rank in the top five positions.

Proper SEO is a time consuming process of constant researching, analyzing, updating and optimizing; it’s practically a full-time job. If you are a part of a large company,  you’re better off hiring someone that can do all of this for you. However, if you’re just starting out there are a few things you can do so you’re starting off on the right foot. Below is a quick list of some things you can do in your HTML code to improve SEO.

  1. Provide Meta Tags: Meta tags encompass a wide range of informational tags, such as author, description, keywords, and more, and they are all contained within the <head> section of your website’s code. While many sources indicate that the keyword meta tag is becoming less and less relevant, it’s still important to optimize your description meta tag. The description you write will be what is displayed under your website’s title on the search engine results page (SERP), so it’s vital to include appropriate keywords and information within this tag to be indexed.

    <meta name=”description” content=”Fresh Swirl Cafe breakfast restaurant provides a wide variety of omelets, fruit, biscuits and other pastries at an affordable cost.”>

  2. Write a Descriptive Title Tag: Just as the description meta tag will appear in the SERP, so does the text you put in the <title> tag; the text you put in this text will display the title of your website as a link that users can click on to visit your site, so you have to make sure enticing and informative. The coding for the title tag also appears within the <head> section of the code, but unlike the meta tags that remain hidden, this text appears at the very top of your browser window. It’s very important to include only relevant keywords that concisely describe your page’s content, as only the first 60 or so characters will appear in the SERP.

    <title>Fresh Swirl Cafe – Breakfast Restaurant</title>

  3. Keep Order with Heading Tags: Heading tags include <h1>, <h2>, <h3>… and so on. These tags define the hierarchy of your web page. The page’s main title should appear within the H1 tag, and you should only have one H1 tag on each page at a time. However, you can have as many H2, H3, etc. tags as you’d like, since these should act as subsections of your H1 tag that not only help break up your content in more readable chunks, but also help web crawlers (also known as spiders) categorize your information.

    <h1>Fresh Swirl Cafe</h1>
    <h2>About Us</h2>

  4. Create URL Links that Make Sense: You should always try to incorporate your web page’s title and other keywords into the URL of each page. When you link to this URL (within an anchor <a> tag, for example), these keywords will be indexed by web crawlers. In addition, it may help users remember your website easily since the URL will accurately describe the website’s contents.

    <a href=”http://freshswirlcafe.com/about-us.html”>Fresh Swirl Cafe</a>

All the information I’ve provided here barely scratches the surface of SEO; even though these tend to be the most important tags to try to optimize for, you should also aim to make sure your body text is also optimized. Keywords that you use in your title, description, and headings tags should also be reflected within the site’s content. However, try to avoid keyword stuffing, and only write what is relevant and what sounds natural.

Sources: [ SEO: The Free Beginner’s Guide ], [ What is SEO/Search Engine Optimization? ], [ Google SEO Starter Guide ]

Website Validation Part 2

Last week we talked about the importance of website validation, along with providing some tools you could use to validate your own website. Today I’ll be continuing this discussion by providing you with even more resources that you can use in your validation process, with a quick rundown of what each validation service offers.

W3C Link Checker: Another validation service by the lovely people at the World Wide Web Consortium (for those that do not remember from last week, the W3C is an international community that develops many of the web standards that developers adhere to today). This particular validator checks for any issues involved with the links, anchors, or referenced objects within your HTML markup or CSS style sheets. The last thing you want on your website is a broken link, as that translates to “bad upkeep” and will turn away potential customers.

Web Accessibility Checker: Do you remember the importance of web accessibility? Just as a refresher, web accessibility means having your website accessible to everyone, particularly focusing on people with disabilities. After you provide your website–either by entering your URL or uploading your code files–this validation tool will list out all the ways you can improve your website in its current state so that it is meets accessibility standards.

W3C mobileOK Checker: In today’s world, having your website accessible by mobile devices is becoming increasingly vital. This W3C checker performs a series of tests to specifically see if your website is mobile-friendly. I cannot stress enough the importance of having your website viewable on a tablet of smartphone (you will be missing out on a LOT of potential visitors if you do not design for these devices), so please do utilize this service to make sure your website is up to mobility standards.

Web Accessibility – AccessColor Tool: This tool complements the Web Accessibility Checker from before; this particular validation resource specifically checks for color contrast within your website. Its important that the text on your website contrasts sufficiently enough with your background color, otherwise no one can read your content! After providing your website for testing, this tool will actually rate the brightness and difference (contrast) of your text and background colors on a numeric scale, and point out exactly which bit of coding it’s referring to so you can easily remedy the issues.

Web Page Analyzer: Arguably one of the most important things to check for with your website is that people can actually access it. This website will go in and analyze the speed of your web pages; this refers to the download time of your text and images, or in other words, how quickly the web page loads on someone’s browser. After checking your website, it will warn you of any potential problems and offer recommendations on how you can improve the speed of your website.

These are all the validation tools I have to offer you for now. Hopefully you find these tools as useful as I do!

Website Validation Part 1

So you’ve just spent hours upon hours coding your website, and now it looks absolutely perfect. However, before you go publishing it on a server for the whole world to see, you should consider doing a quick validation check of your website. Validation just means checking your website to make sure the HTML, CSS, or XHTML are free from errors and up to web standards. You can do this by going through your code line-by-line and double-checking your work, OR the better option would be to use one of the Internet’s many validation tools!

There are tons of validation tools in existence, but here are just a few that I found to be helpful:

W3C Validation Service: You can’t go wrong with a validation service that is provided by W3C (for those that don’t know, W3C stands for World Wide Web Consortium, and they are an international community that develops many of the web standards that developers adhere to today). You can validate your code in three different ways: 1) provide a link to your website already on the web, 2) upload your files that contain the code, or 3) input the code directly into the text box on the validation site. This validator automatically detects the code you’re inputting, so all you have to do is hit the large “Check” button, and the validator will output a list of any warnings or errors that it finds.

W3C CSS Validation Service: While the first W3C validator website checks mostly for errors in HTML and XHTML coding, this validator is specifically designed to check CSS coding.

HTML Validator Pro: As you may suspect from the name, this website only validates HTML. However, this validator does provide some nifty tools that you can use. You can check specifically for spelling, broken links, or even page ranking.

Browser Shots: If you’re wanting to see how your website looks in different browsers, but you don’t want to go through the hassle of testing each and every browser individually, you’ll find Browser Shots to be a timesaver. Enter your website URL, and the validator will take screenshots of your website on any number of browsers of your choosing and then output them for you to see and compare.

As I stated earlier, it’s very important to validate your websites before you publish, as there are a lot of benefits to doing so. By validating your website, you ensure that it will be interpreted the same way by search engines, browsers and users, as your website will be conforming to web standards. This means that your website will become accessible to more people, which will boost your rankings in the search engines.

Compatibility across browsers is very important to check; sometimes there might be an error in your HTML/CSS code that Google Chrome might overlook, but it will mess up your code when viewed on Firefox. In regards to search engines, broken code (especially broken links) might be an indicator of a bad website, and so web crawlers may be wary about indexing your website. Things like this are vital if you’re trying to boost your web rankings, and so you should aim to validate your website not only when you first publish it, but every couple of months just to make sure everything is in working order.

Sources: [ Validating a Website ]

Color Theory and Web Design

There’s a LOT to be said about color theory; its a huge, broad topic that encompasses many ideas, such as color schemes, color systems, the color wheel, perception, cultural meaning, etc. Some of those topics I’ll be saving for another time, but today I’ll be discussing perception and cultural meaning (particularly in Western cultures).

Color can be defined by three attributes: hue (the base color, like red, yellow, green, etc.), saturation (range between pure color at 100% and gray at 0%), and brightness (range between fully illuminated at 100% and dark or black at 0%). In order to create an effective design, you should strive to find a good balance between colors that are complementary (don’t confuse this with complementary colors) and contrasting keeping these three attributes in mind.

Its important to have a suitable amount of contrast between the color your website’s background and text. This reduces eyestrain for the user, making it easy to read all of your website’s content. You can achieve the best levels of contrast between two colors that exist on opposite ends of the spectrum—colors that are opposite on the color wheel and have different saturation and value levels. If your colors lack contrast the user will have to strain to read the text because the colors will be too similar in hue, saturation, and brightness, causing the colors to blend together visually. The two most contrasting colors are black and white, and you’ll find that your best options are to have black or dark text color on a white or very light background.

 

 

contrast

There are some other guidelines that you should follow when creating your design. One general rule of thumb is to avoid extremely “bright” colors—colors that have high saturation and high brightness—for large sections of your website, particularly as a background color. Even against a duller, contrasting text, bright colors like a fluorescent yellow can be overwhelming and still cause eyestrain. Another tip is to reserve some colors for areas of your website that you want to emphasize. Contrasting colors can help draw attention to certain areas on your page; a red warning note on a white page with black text will certainly stand out. However, the most important tip is to keep your color schemes simple. The content is the most important part of your website, so its extremely important that you consider legibility in your design.

Keeping all of that in mind, now it’s time to create a color scheme appropriate for your website’s content. So what colors would that include?

internet-logo-colors

Source: StockLogos

When you’re picking a color scheme for your website, you’re aiming to pick colors that will encourage your target audience to do a desired action: reading your content, sharing your information, buying your product, hiring your services, etc. Many sources indicate that a poor color scheme can cause a user to hit the back button as soon as they reach your website, so having a design that is pleasing to the eye is key and is meaningful to your content.

Different colors evoke different feelings within us, and you’ll find that each major color often has quite a few meanings and feelings already attached to them. Blue-based color schemes tend to have a sense of professionalism or make the user feel calm. White-based schemes give websites the appearance of cleanliness. Warm colors like red and orange suggest fun and excitement. Green websites can make the company be seen as environmentally conscious. Black and white designs seem sleek and modern. Bright colors invoke an emotional response, while darker colors can cause the user to relax so they can focus their attention on important content.

Here’s a quick, comprehensive list of typical color meanings (list provided by Smashing Magazine):

  • Red: Passion, Love, Anger
  • Orange: Energy, Happiness, Vitality
  • Yellow: Happiness, Hope, Deceit
  • Green: New Beginnings, Abundance, Nature
  • Blue: Calm, Responsible, Sadness
  • Purple: Creativity, Royalty, Wealth
  • Black: Mystery, Elegance, Evil
  • Gray: Moody, Conservative, Formality
  • White: Purity, Cleanliness, Virtue
  • Brown: Nature, Wholesomeness, Dependability
  • Tan or Beige: Conservative, Piety, Dull
  • Cream or Ivory: Calm, Elegant, Purity

The biggest thing to keep in mind when picking colors for your website is your audience; for example, the same color can have very different meanings in different cultures. Blue in Western cultures can invoke feelings of trust and authority, but Latin America it is a color with religious connotations. In Western cultures, white often represents purity and peace, while in Eastern and Asian cultures white is most often associated with death and mourning. If you’re advertising medical services and your design uses a lot of red, you probably want to rethink your color scheme if you’re audience resides in the Middle East where red can evoke feelings of danger and caution, or may even be seen as evil.

Not only should you keep in mind different cultures, but you should consider the age and gender of your audience as well. Younger audiences tend to enjoy bright, solid, graphic colors while an older audience prefers a more subdued color scheme. Men tend to like cooler colors (greens and blues) while women tend to like warmer colors (reds and oranges). And don’t forget about accessibility issues, like color blindness! In the end what color scheme you pick must be appropriate not only for your content, but for your audience as well.

If you need some help getting started on choosing your color scheme, Creative Bloq has a great article on 28 Tools for Choosing a Color Scheme.

Sources: [ An Introduction to Color Theory for Web Designers ], [ Color Theory for Designers, Part 1: The Meaning of Color ], [ Color and Cultural Design Considerations ]

Web Accessibility is Essential

Something that is vital to the success of a website—but oftentimes people forget about—is web accessibility. Web Accessibility means having your website accessible to people with disabilities. These disabilities can be visual (blindness, color blindness), hearing-related (deafness), motor-related (inability to use a mouse), or cognitive (learning disabilities). It’s important to consider accessibility when building your website, otherwise you’re excluding quite a few people from your target audience! Here I will be listing some basic things that you should consider when designing your website to be accessible, but for further and fuller details on the matter you should check out the sources I’ve linked to at the bottom of the page.

  1. Provide “alt” content for images:
    Add alternative text for non-textual items; for instance, for a photo of roses you can go into the <img src=”roses.jpg” /> tag and add an ‘alt = “Red Roses”‘ attribute inside the tag (so in the end it would look like <img src=”roses.jpg” alt=”Red Roses” />). Doing this will provide text for screen readers, so those who are blind are still able to know what the content is.
  2. Provide clear document structure:
    Not only does having a good document structure important when coding, but it can also be beneficial to those utilizing screen readers. Providing structural elements (headings, lists, navigation, etc.) gives meaning to your content, which makes it easier for users to understand the purpose of each bit of content. For example, having <h1>Roses</h1> tells users that this is likely the main subject of the page.
  3. Make all elements accessible by keyboard:
    Some users do not always have a mouse, and some users may not have the fine motor skills necessary to control a mouse. Therefore, you should aim to have all your website elements accessible through a keyboard and not solely rely on a user having a mouse; having a good document structure can help with this as it allows for users to be able to tab through content.
  4. Provide transcripts for podcasts, video, etc.: 
    For users who have hearing disabilities, they will not be able to listen to your podcasts or videos. Provide a transcript for your audio-based content so that users are able to read the content. Not only will you make your content more accessible to users, but it will actually help boost your website’s ranking in search engines (spiders and bots cannot hear either!).
  5. Do not rely on color alone to convey meaning:
    Color blindness is not uncommon, and so you should try to refrain from making content dependent on color. A warning text (such as <span>Alert:</span>) that only stands out because it is colored red does not make it accessible; you should try adding other styles to help it stand out, such as making it bold, uppercase, AND red.
  6. Provide meaningful headers and captions to content:
    Having appropriate headers and captions can help give content some context in the grand scheme of the webpage. This is particularly important for table elements that rely on data organization (so make sure every column has the correct <th> table header tag).
  7. Make text links sensible: 
    When providing links on your webpage, don’t use link titles such as “Click Here”, “Link” or “More”. Some screen readers skip straight to links, and having titles such as these out-of-context can be very confusing to a user. Aim to have clear and meaningful titles that make sense no matter where you see them, such as “Types of Roses” or “How to Care for Roses” that give a good indication of what page you’re able to navigate to.

As stated before, these are just some very basic tips that you can keep in mind when designing your website to be accessible; there are LOTS more that you can (and should) consider, so I recommend researching more on the topic.

Don’t think of web accessibility as something that only affects disabled users—web accessibility can be beneficial to non-disabled users as well, such as those with slow internet connection, or those who might have a temporary disability, etc. If you’re able to do so, you should aim to provide equal opportunity to all of your users to access your content.

Sources: [ Introduction to Web Accessibility ], [ Accessibility ], [ WebAIM: Introduction to Web Accessibility ], [ What is Web Accessibility? ]

Text Editors for PC: Part 1

Last week I wrote an article comparing three common text editors for Mac computers; as you may have guessed, this week I’ll be doing another quick comparison of three editors, but this time we’ll be looking ones designed for PC computers. Hopefully you will find this information helpful in your decision-making process.

Notepad Notepad++ Sublime Text 2
Price Free Free $70*
Open Source No Yes No
Syntax Highlighting No Yes Yes
Find and Replace Yes Yes Yes
Bracket Matching No Yes Yes
Auto Indention No Yes Yes
Auto Completion No Yes Yes
Spell Checking No Yes Yes

* You must pay a fee for the license, but a free version is available

Notepad: Like TextEdit for Mac, Notepad is a Windows-only application that already exists on most PC computers. Again like TextEdit, its functionality is very basic, lacking a lot of the features that Notepad++ and Sublime both share (such as syntax highlighting, spell checking, etc.). However, it is a very light and fast text editor, making it extremely useful for quick editing. But you shouldn’t use it for large amounts of content creation or coding needed for large-scale projects.

Notepad++: This text editor is a big step up from Notepad; still pretty lightweight, but it adds on a bunch of features that Notepad lacks. Multiple files can be opened at once and navigable through tabs, and coding is made simpler through syntax highlighting, spell checking, line numbers, etc. For a free text editor that has so many more features over regular old Notepad, it’s very much worth the download.

Sublime Text 2: Sublime has all the features of Notepad++, but with so much more added onto it. Viewing tabbed files side-by-side within the same window is a breeze (useful if you’re trying to compare code between files), and you can even open entire projects in the editor and preview each file with the directory structure outlined beside the editor. There are even some nice-to-have features such as a customizable interface, and a “distraction-free” mode that allows you to enter a full-screen view of the editor, removing sidebars, tabs, and other possible distractions. Best of all, Sublime is a text editor that also works on Mac, so users can work seamlessly between Mac and PC.

Out of these three text editors, you could argue that Sublime Text 2 beats out Notepad and Notepad++ simply because it offers more features than the other two, and I probably wouldn’t disagree with you. Yet, again it is about the size of your project and what you need to accomplish your tasks; if you’re working with a small project and just need some basic functionality to get things going, stick with your already-installed Notepad, but if you’re working on a large-scale project that demands organization, consider Notepad++ or Sublime.

Sources: [ Notepad++ ], [ Comparison of Text Editors ]

Text Editors for Mac: Part 1

When writing code for a website, you need to use an editor that works best for you so that you’re able to produce your work the most efficiently. This week I’ll be doing a quick comparison of three common editors designed for Mac computers, and hopefully this will help you in your decision-making process.

TextEdit TextWrangler TextMate*
Price Free Free $50
Open Source Yes No No
Syntax Highlighting No Yes Yes
Find and Replace Yes Yes Yes
Bracket Matching No Yes Yes
Auto Indention No Yes Yes
Auto Completion No No Yes
Spell Checking Yes Yes Yes

* The version of TextMate being evaluated is version 1.5.11, not 2.0 beta
** Table provided by findthebest-sw.com

TextEdit: If you own a Mac computer, chances are you have TextEdit already in your applications folder! For a text editor it’s functionality is very basic, so if you’re looking for advanced features this one may disappoint you. However, if you’re looking to quickly review a file or just plan on doing very simple coding, this free application should work just fine (and it has worked for me for two years).

TextWrangler: When my projects became too big to manage in TextEdit, TextWrangler was the application I switched to. It’s much easier to manage multiple files (they’re all navigable in one window as opposed to TextEdit where files are opened in their own separate windows), each line is marked by a number, and it auto-indents to help with organization. My favorite features about this program, however, is how it color-codes the syntax and how it will let you know if brackets don’t match. This has stopped me numerous times from making simple errors, saving me hours of frustrating debugging. And it’s free!

TextMate: I don’t have personal experience using this one, so I had to do a bit of research on it. Out of the three text editors talked about here it has the most features, such as the auto-complete and code-folding functions the other two lack. Whereas TextWrangler only warns you of mismatched brackets, TextMate will actually insert it for you so you don’t even have to worry about it. Another step up that it has over TextWrangler is the project manager feature; whereas TextWrangler simply lets you have multiple files open at once in one window, TextMate actually lets you view whole directories so you can see how your files are organized. However, TextMate does come with a price tag, so it’s up to you to decide whether it’s worth the investment.

You can think of these applications as existing on a continuum: TextEdit is for simple projects, TextWrangler is for slightly more complex projects, and TextMate is for large-scale, complex projects. Which editor is right for you depends on the complexity of your project, and maybe you’ll find that you’ll use more than one!

Sources: [ FindTheBest ], [ TextMate: The Missing Editor ]

Serif vs. Sans-Serif Fonts

One very often debated topic in web design is which font face is best: serif or sans-serif? Is there really any difference?

Serif fonts have small decorative flourishes, small tails that extend from the edges of the letters. Sans-serif, as you would expect, do not have these little tails (in fact, “sans” pretty much means “without”). Some of the most prominent examples of both types is Times New Roman for serif and Arial for sans-serif (as shown in the image below).

sans versus sans-serif

 

Arguments have been made for why one font type is superior over the other in different applications. For serif, it has been said that the small tails help to guide the eye from one letter to the next, helping to increase contrast and spacing between letters to make them more distinctive. This makes serif typefaces ideal for body text where eye fatigue could be an issue. Sans-serif fonts, on the other hand, are said to be great for adding emphasis to words and are very scalable. Since it retains its general shape at any size its ideal for when a design calls for small font sizes, whereas serif fonts tend to become a little blurry at smaller sizes due to those little tails that does not scale as well. This makes sans-serif fonts good for small disclaimers, tables, captions, and headings.

However, there are still some arguments that these ideas have not been thoroughly tested, and after some further testing there is actually no difference between serif and sans-serif as far as legibility and readability is concerned. It’s up to you whether or not you believe these ideas or not, but there is something that you SHOULD consider: what kind of experience do you want your user to have when they are visiting your website?

Things you should keep in mind when picking a font type are things like color and contrast, size, and style. Carrie Cousins of Design Shack comments that serif font tends to feel more “classic, elegant, formal, confident and established”, while sans-serif is more associated with “modern, friendly, direct,  clean and minimal” feelings. What font you decide on should be based on what your options are and its application. Serif fonts can be simple or decorative, curved or blocky, while sans-serif fonts can be sharp or rounded, and more often than not, your website will benefit from incorporating both types. The best thing you can do is explore your options, and test them on real users.

 

Sources: [ Serif vs. Sans: The Final Battle ], [ Serif vs. Sans Serif: Is One Really Better than the Other? ]

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? ]