What's the difference between a graphic designer and a developer?

What's the difference between a graphic designer and a developer?   |  Hue & Tone Creative

Although graphic design and web development are two totally different jobs, there’s an increasing level of confusion between the two. 

As online tools make it easier for people to learn new skills there’s been more and more overlap between the two roles. Graphic designers want to dabble in the coding side of things, and developers are paying more attention to the visual elements.

Although they are experiencing more and more of each other’s worlds, there are still several clearcut differences between the skillsets of graphic designers and developers — and you should know what they are before hiring someone to take on your next web project. 


Graphic designers


Graphic designers do what they do because they are creative (well, the good ones are, anyway!). They can see your vision from the get go, come up with concepts, and then mock-up your dream website. 

They’re able to illustrate or design anything you might need and are explicitly tuned in to the aesthetic side of things.


Attuned to detail

Unlike developers, graphic designers have a fine eye for things like fonts, sizes, colors and spacing. Because they don't have to focus on making your site work, they're free to hone in on the small details. They’ll perfect and refine every element of your site to meet brand guidelines and will ensure consistency with the rest of your brand.


Marketing awareness

In addition to a fine eye for design, a good graphic designer has a better understanding of marketing as a whole. They not only stay up-to-date on design trends, but they also have a solid understanding of what's going on in the industry so they can keep your brand collateral on trend. Whether it’s an online UX experience or offline advert, they’re responsible for ensuring their designs not only look good, but are built to convert.


Breadth of input

Last but not least, the role of a graphic designer spans far beyond a business’ website -- they can handle everything from creating a print campaign to simple things like re-sizing images. No matter what you need they'll be able to help you put together the entire package, not just your website. 



Make your website work

Where designer's jobs are creative, developer's jobs are technical. Developers can be split into two categories: front end and back end. In their simplest form, front end developers deal with the part of the website you can see. They typically write in languages like HTML, Javascript or CSS. Back end developers deal with servers, applications, and databases.  They work out the details of how and where your data gets stored. 


Technically driven

Developers are very analytically driven, they have a technical mindset and work behind the scenes to make graphic designers’ work live on a website. Each coding language has it's own set of rules and regulations, making their job more about memorization and problem solving than aesthetics. 


Carry the weight of your website

While developers don’t necessarily need to be creative, it falls on them to make sure the website actually works. Does it load quickly? Can you easily log-in and put things in your shopping cart? Is your billing information stored correctly? 

If pages, apps, or websites falter, it’s on developers to get them back up and running as fast as possible to ensure revenue isn’t lost.


So, who should you hire?

In the end, you need both to form a partnership.

Graphic designers and developers come as a package. Although their skills and role vary, they work in harmony to make sure end results are up to scratch.

Think of it like a production line. The graphic designer works on the visual stage, then passes their work onto the developer to encode, and then both work together to quality check the finished product.

Graphic Design for Greensboro, NC and beyond

Let us take the headaches out of creating your new website. Check out our design portfolio to see clients we've helped in the past, and then give us a call -- we can't wait to get the conversation started. 

Intro to HTML: Must Know Tags for Beginners

Into to HTML  |  Hue & Tone Creative

If you’re not familiar with HTML, making even small tweaks to your website or custom MailChimp template can be a struggle. HTML is a complicated language and you won’t become an expert overnight – however, you can master a few basics that will make it easier to tweak templates, build web pages, and control your online presence.

This is by no means meant to be a comprehensive guide to HTML, but rather an introduction with some of the most basic tags you’ll need to customize your in-house marketing campaigns. 


What is HTML?

Let’s start with the most basic question – “what is HTML?”

Hypertext markup language (HTML) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects. You use specific tags to customize each element of a web page.

Check it out for yourself: Open up a well-designed site in Chrome, right click, and select "Inspect Element." You’ll be able to get a look behind-the-scenes at how the site was coded. 


HTML Elements

HTML elements are individual components of your webpage that are made up of a start tag <example> and an end tag </example >.

Here’s an example of what a simple HTML page might look like:

<!DOCTYPE html>
<title>Page Title</title>

<h1>Sample heading</h1>
<p>A sample paragraph would go here.</p>



Note the <html> tag at the very top.

This element specifies the language the webpage or document is written in. Without this tag your computer won’t know how to process all the code that follows it. It’s important to realize that browsers do not display the HTML tags, but they use them to render the content of the page.


The Basics

The visible part of the HTML document is between <body> and </body>.

Your body tag is the first element content tag that you can open after you’ve opened your initial html tag.


This tag is one of the content elements that can be opened within your body tag. You can vary the size of your headings and subheadings by specifying whether you want <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.

<h1> defines the most important heading. <h6> defines the least important heading.


Used for formatting paragraphs of text. Just to be clear, the paragraph tag defaults to which ever style you already have assigned to your style sheet.


HTML links are defined with the <a> tag.

For example:
<a href="">You would put the text you want to be hyperlinked here. </a>


To incorporate an image into your page you’ll want to use an <img> tag -- the source file (src), alternative text (alt), width, and height can all be defined.

Example here:
<img src="hueandtonelogo.jpg" alt="" width="210" height="210">

Always remember to close your tags. Anytime you open a tag <example> you should close it after you’ve defined all your content </example>. 

Style Elements

Your style tags help you specify which colors and fonts are used for your headings, paragraphs, etc.


Here’s a few examples:

You could format size like this:

<h1 style="font-size:300%;">This is a heading</h1>

Color like this:

<h1 style="color:blue">This is where the text you want stylized goes. </h1>

Or both like this:

<h1 style="color:blue;"font-size:300%">This is where the text you want stylized goes.</h1>


Formatting Elements

Formatting assist with the aesthetics of your webpage, kind of like the style elements we mentioned earlier. The main difference between the two is that your formatting elements deal with text effects.

Used to make specific text bold.

Used for italicizing text.

Highlights text.

Makes specific text smaller. 

Helpful Resources

Learning HTML isn’t the easiest task, so here are a few tools to help you become a pro in no time!

  • Treehouse is an online coding school specializing in front end web development, JavaScript, IOS, and Python. Learn from over 1,000 video tutorials, quizzes, and coding challenges. There’s a free trial for first time users.
  • Lynda is a digital learning library where you can learn skills for business, design, marketing, and web development.
  • HTML Dog offers free online tutorials in HTML, CSS, and JavaScript. There are specific tutorials for every level of learning: beginner, intermediate, and advanced.


One last note…

Becoming proficient in HTML takes time and consistent practice, so don’t get discouraged if it doesn’t come easy to you! Be patient and try to set obtainable goals for yourself.

Web and Graphic Design in Greensboro and beyond.

Clueless on how to build a website or create a logo? We’ve got you covered! Eye catching landing pages that help reel in leads to business cards that leave a lasting impression, Hue & Tone Creative is here for all of your marketing needs.