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!

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 ]