Bringing your Website to Life with Images and Graphics

Hi,

Here we go…

Photos, Graphics, Illustrations, Color Splashes,…Illustration

These are vital components to websites and are so exciting to work with. I can’t wait to share this with you…you’ll see why. Read on.

When building a website, in addition to employing the ‘techie’ side of our skill set, designers access our artistic and graphic design roots in order to create authentic and positive experiences for site visitors. How do we do this? By enriching web pages with colorful, visually compelling images, graphics, photos and typography. This is built around the core content of the site so that it (the content) takes center stage and does its job. We want to build a site that reaches out, draws people in and delivers to visitors what they came to get; be it information, products, etc.

The main goals of a web design project, at least as far as I see it, are that the website is:

  • Authentic- a true representation of the business, individual or event that I am designing and building the site for
  • Functional- i.e. easy to navigate, quick to load, mobile friendly
  • Visually Compelling- graphics and typography that are relevant to the reason the website is being built. Graphics serve to support the central message of the site, they should never be superfluous and disconnected.

In this post I will be going over how artwork (colors, typography, graphics, photos, logos, etc) works as a part of this whole user experience (we’ll touch on typography here- a key element- and I’ll go in-depth about it in another post), as a part of the overall web design and how it supports the goals of the website.

Images have the ability to conjure many things with their presence; nostalgia, excitement, peace. Take a look at the image below. What stirs in you when you see it?

Photo of a Children's Bicycle

Photo Credit: Morgan Willemsen

It’s addicting, the whole web design process, at least for me and I am certain for many other designers. I love this so much that I am often up into the night, working on a wireframe or layout, not taking any notice to how late it might be. I know that I am truly in my element because, even though I may be tired the next day, I feel a calmness and a contentment instead of a grouchy disgruntlement. Trust me, my husband and kids are thankful for this! It took awhile for me to get here but it feels amazing. That’s one of the reasons why I wanted to start this blog, so that I can share how this all works as well as how doing what you love makes your work and your whole life fulfilling.

Anyway, this process is what I do directly after my clients approve wireframes and I develop a mood board. Read all about this in my previous posts about the web design process, found HERE and HERE and HERE.

Also, don’t forget to check out other related posts, with links to helpful articles  and other very informative and inspiring blogs, found in the Categories drop-down of this blog page. In my posts, both past, present and future, I talk about all aspects of the web design process, everything from color selection and theory to constructing fluid layouts for mobile devices. My approach is from that of a designer who started in the business management, marketing and public relations field and then transitioned into art, design and technology. My goal, as you may already know, is to blend these areas in order to build websites and marketing collateral that are beautiful, functional  as well as business goal oriented.

So, back to website imagery… I start by referencing my mood board(s) for the project along with the client’s feedback and input on them. I also review all of the documentation I have so far. This being:

  • My research- the competitive analysis as well as the interviews that I have had with the client
  • Site Map- what is the framework that will need visual support? How can I use imagery to enhance the flow of the site map?
  • Wireframes and Prototypes- how have the client and I decided to lay out the site? Where will graphics go?

Next I categorize these visual elements. These are:

  • Color Scheme: color will be present by embedding it throughout the site (links, text) as well as through graphics and photos.
  • Typography: not always in the front of my clients’ minds but a vital element to the design.
  • Global Graphics: which graphics can be used everywhere? These can also carry over to print collateral and online ads.
  • Page-Specific Graphics: such s product photos. These typically do not get placed anywhere else.

Color: Determining the final color scheme is first for me. My goal is to establish a concise, authentic scheme. Maybe two core colors with neutrals to support, – keeping in mind any symbolic and psychological associations. I always consider any existing branding that the client may have brought to the project and work to create a scheme that is pleasing to the eye and that supports maximum legibility of text. We don’t need to go overboard here. Two core colors with supporting neutrals often work out beautifully.

Typography: Establish which fonts will be used. Logo, titles, subtitles and body text. Again, I’ll go more in-depth on typography in another post. I have a method for researching typography and presenting possibilities to clients. As I always do, I do the research and legwork and present a quick and easily digestible presentation of possibilities to the client for review.

Graphics: It’s important to distinguish between global graphics (graphics that are universal and used throughout the site) and page-specific graphics (specific to particular pages). I’ll categorize these and begin to optimize them for the website. By this I mean that I will be sure that they are properly sized and are the correct resolution. Optimizing graphics is essential in ensuring that the imagery on your website displays QUICKLY and PROPERLY. If images are not optimized, it may take a long time for your web pages to load, meaning that you will probably lose most visitors before they even get a chance to see anything. Incidentally, this can have a huge impact on your business’ credibility. That may sound drastic but if you think about a time when you had difficulty getting a website to display and what feelings you had as a result, it’ eye-opening.

So besides all of this technical functionality business, graphics also need to be relevant and visually compelling. This is just as vital as optimization and is another reason that I value mood boards so much. For me, I cannot conjure amazing designs out of thin air. There is a process of research, collection, elimination, experimentation and feedback that I must have in order to develop a well-rounded design (remember in my post about The Method and the Madness?). Most of this happens in my own office, on my own time and out of the way of my clients but I need to do it. I truly thrive on his process and love it. I tell you this so that you can understand that I take all aspects of all of my projects seriously. It’s a meticulous design process that I go through that makes my designs the best they can be.

Incorporating visual elements into web designs is crucial, as are many other elements in the process. It’s fun but must also be given careful and thoughtful consideration. It can make all the difference in the world to your business identity and goals.

See you next time!

~Jennifer

About Pure Designs

Pure Designs is a creative company I launched that offers graphic design and web design services. With over ten years of experience in Marketing and Design, I have a wealth of information and inspiration to share. I love what I do and look forward to each and every day that I can design. View my portfolio here to get an idea of what I do. Post a comment or use the contact form on my website to reach me with any questions or to book a consultation. Talk soon!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s