Scalable

Building a Scalable Identity for Print & Web Design

No matter what field of design you choose to specialize, identity is always something to consider. Whether you’re an icon designer or a calligrapher your job is to work with ideas that match companies and concepts.

Identity design generally follows the same pattern for both web and print work. It does cover a wide variety of subjects but it’s easy to learn given the proper resources.

In this post I’d like to cover some tips for building a scalable identity. There should always be a relationship between company branding and other elements on the page. By following these strategies you’ll be well-equipped to start designing your own brands without much hesitation.

Sketching & Brainstorming

The most important aspect of an identity design is the initial phase. This is where you come up with ideas and eventually pick the right one. And much like all areas of life, the most important phase is often the most difficult.

How do you come up with something from nothing? Where should you get ideas from? How do you put them down into tangible resources?

sketch icons preview sketchbook

Almost every talented identity designer will advise starting on paper. You can start by writing down words or by doodling sketches.

You don’t know how to draw? Just start. Most digital designers can dramatically improve their workflow by learning to draw, and you don’t need to learn fine art either.

If you do more conceptual work like photo compositing, then learning to draw won’t help you much at all. But identity design is a visual medium where you need to create icons/logos/mascots/graphics from scratch. You can do this much quicker with pencil and paper.

sketching ideas sipp icon apps

A good place to get started is by doodling and following ideas you see online. Of course, if you want to be really good it’s worth learning fine art and drawing from life. But at first this may seem impossible. So get started with simple doodles and just get comfortable holding a pencil.

Basics of Theming

While brainstorming ideas you should be working with a theme. Randomly drawing stuff isn’t gonna cut it. Instead consider the purpose of a company and what they do.

Who do they serve? What would their audience be receptive towards?

The answers to these questions may help you find tone, context, and purpose for your ideas. You should think about how to best explain an idea using the clearest visuals possible.

ui ux lettering logo design sketching

At first this will be hard. Like really hard. It takes a lot of practice to reach professional level but that doesn’t mean you shouldn’t try. Identity goes into everything from websites to letterheads and stamps. You have to think about this ubiquity and design something that will become recognizable on any medium.

I recommend starting with some ideas about the company. Write down a list of words associated with the company’s goals and primary functions. Think about design from a marketing perspective and consider which ideas could be targeted at vital demographics.

Logos in the Bigger Picture

While a logo is only part of the identity, it’s still an important part. Most identity designers start off with a logo concept and branch out into other aspects of the identity with restyled icons, smaller/larger graphics, and simplified typographic effects.

While designing a logo stay focused on the bigger picture at hand. It’s easy to lose yourself in your creation and just start being artsy for the sake of art. Design is not for the sake of design. Good design has a purpose.

Good logos convey meaning and recognition. They visually represent a company and often provide a certain feeling in people. You really need to think of logos as symbolic representations of ideas. Work with allegory, metaphor, and exaggeration.

sketching lettering drawing logos example

Use symbols and geometry when appropriate. Symmetry and asymmetry are both useful to create balance. Color selection is also a big aspect, but it’s such an expansive topic that you shouldn’t worry much about it until the later stages.

Also remember that scalable identities need vector-based graphics. Illustrator and Inkscape are two programs fit for vector output. Choose one and do your best to learn the ins-and-outs of every tool.

The Value of Style Guides

Both print and web designers can pull value from branding guides. Brand/style guides are popular in every area of business from entertainment to technology and retail. These guides outline specific rules for brand typefaces, colors, logos, patterns, and even copywriting.

There is tremendous value in creating a style guide on your own just for practice. You’ll learn which components are necessary and why. You’ll also see why branding is so important to a company’s image.

Back 10 or 20 years ago every brand guide was in book form. Designers created PDFs and they’d be printed off for different employees or executives. Nowadays most guides are kept as PDFs or even created as websites.

brand exploration colors design

The digital age is not going anywhere and it offers so much in the way of flexibility. You can design a brand book without any knowledge of printing or binding.

Truthfully you should only be concerned with your skills as a creative designer. Paper to pencil is definitely a must for someone who seriously wants to improve their identity design skills. Beyond that you just need to learn the right software and stay hungry.

Closing

Identity design is a huge umbrella term with many underlying assets. Learning to design is about more than just software and it takes first-hand knowledge to recognize this fact.

Over time and with practice you will notice improvements in your work. Stick to your guns and keep churning out the best stuff you possibly can. Look around the web for ideas and gather feedback from others. You’d be surprised how much can be accomplished in 6-12 months.

If you need more brand design ideas check out these posts:

28 Examples of Captivating Brand Identity Design

5 Quick Tips on How to Promote Your Design Business

The post Building a Scalable Identity for Print & Web Design appeared first on SpyreStudios.


SpyreStudios

A Primer to Scalable Vector Graphics: Advantages, Benefits, Resources, and More!

Scalable vector graphics (SVG for short) let designers create high-quality images using  XML by describing two-dimensional graphics.

Users associated graphic files with JPEG and GIF. But the advantage that SVG has over these most popular graphic file extensions is that it retains its quality when zoomed in or out using your desktops or tablets. As a result, SVG prints in higher resolution and is easier to compress compared to other file types.

More importantly, unlike any other image file, SVG can be edited using Notepad since it is made using XML.

History

SVG has been around as early as 1999 with companies like Apple and Abode developing this new file format. But in 2001, SVG was retooled to include mobile profiles and other features.

SVG was first supported by web support in 2004 by Konqueror. All browsers supported SVG in 2011. There is mobile support for SVG but other smartphones accommodate SVG Tiny, which has other features that SVG doesn’t have like non-scaling strokes.

The Basics

Like any markup languages, the SVG element requires an opening and closing tag (or self-closing) so it shows properly on your browsers:

<svg></svg>

or

<svg/>

Specify the width and height of the element so that it will have a predefined size. Without indicating its width and height, the SVG will occupy as much space as it can.

<svg width="100" height="100"/>

By entering the number for each axis, the browser will interpret this as pixels or px. You can enter measuring units such as pt, mm, em, cm, and in.

You can create basic shapes using SVG with rect, circle, ellipse, line, and other tags.

<rect width="100" height="25"/>

Specify the coordinates of the SVG element in your page by indicating the x and y axis.

<rect x="50" y="50" width="100" height="25"/>

In this command, the rectangle will appear 50 pixels away from the default position, horizontally and vertically.

For the circle tag, use cx and cy to determine the coordination of the circle’s center in the page. Use r to specify its radius.

<circ cx="50" cy="50" r="50"/>

For other commands for basic shapes, style, and layering and drawing order, read this informative post by Scott Murray.

Benefits of using SVG

Aside from its high-resolution, small file size, and ability to be edited using a markup language, SVG is also easier to load on your browser. Instead of requesting the server for JPEG or GIF files to be loaded onto the browser, SVG can be embedded in the HTML of the page. This reduces HTTP request by the browser to the server, which means faster and more efficient loading of your site.

Best examples

SVG also works best on JavaScript and CSS to create dynamic website content for presentations.

svg wow.org camera camera.xhtml

In this demo video by Vincent Hardy, SVG is used to create the graphics in this Flash presentation that plays on your browser. It also contains audio synchronization and JavaScript to create an exceptional visual experience. You can create something similar to showcase your design skills or use as a resume.

www.paulirish.com work videooo.xhtml

Using SVG filters, as seen in this post by Paul Irish, you can achieve the desired effect in your HTML5.

The ability to create user interfaces based on vector is a reason why Flash was popular with designers and developers. But due to the changing screen resolutions of mobile devices and tablets, developers are looking for more efficient ways to provide UI components without compromising the content’s quality.

To learn more about the other benefits of using SVG on your web properties, read this post at CreativeBloq.

Tutorials and inspiration

SVG – Introduction
Jakob Jenkov

This Youtube video is a visual tutorial of what has been mentioned above and more. Aside from this video, Jacob Jenkov has created a 13-video series about other aspect of SVG that you can view here. Topics include browsers display SVG, the SVG coordinate system, and more. A must-see tutorial for beginners.

SVG Files: From Illustrator to the Web
tuts+

For image source, click here.

For image source, click here.

SVG can be edited using Notepad or graphics editing software. In this tutorial, you will learn how to create a SVG file using Adobe Illustration and how to embed the file in your web page. It deals with the step-by-step process of modifying the options from Illustration and taking the XML code of the file onto your HTML page.

Using SVG with HTML5 tutorial
EduTech Wiki

Using SVG with HTML5 tutorial   EduTech Wiki

 

This comprehensive Wiki entry covers the basic aconcepts between using SVG on HTML5.  Includes how to embed SVG with different tags (img, ojbect, and iframe), using SVG image tag to adapat SVG graphic, and more.

SVG Scripting
Jacob Jenkov

SVG Scripting   tutorials.jenkov.com

This tutorial focuses on how to script SVG using JavaScript. It won’t explicitly explain JavaScript, so you will need a good understanding on how it works in the first place. Here’s a list of JavaScript tutorials for those who need the basics.

The SVG tutorial includes changing attribute values and CSS properties, animating SVG shapes, and more.

Once on the page, you can refer to the left sidebar for more SVG tutorials.

HTML5 Tutorials #19 – SVG Inline and CSS Styling
LevelUpTuts

This tutorial proves why SVG is an easy tweak in your HTML and CSS styling that makes a big difference in your web page’s performance.

jQuery SVG Tutorial Plugin & Tutorials with Example
jQuery Rain

80  Best SVG Tutorial with Examples

The site features different tutorials for scalable vector graphics using jQuery plugins and JavaScript. Covers the basic and advanced techniques to achieve interactive and animated. Incudes posts about dialog effect, spinner loader animation, and more.

THE ULTIMATE GUIDE TO SVG
Webdesigner Depot

The ultimate guide to SVG   Webdesigner Depot

The latest and arguably the best guide for SVG, author Ezequiel Bruni covers the basics and advanced techniques on how to use SVG the best way. Includes best practices, additional tutorials and how-tos, and tools, among countless others.

Final thoughts: SVG is a very useful image file extension to create more dynamic and interactive content without compromising its quality. Strange thing is that not a lot of designers are familiar with using SVG. With this post, we hope that you have a better understanding on how to use and why you should implement SVG in your website and content.

More on scalable vector graphics:

Vector Design Workflow Between Photoshop and Illustrator

Adding Vectors and SVG Images into Website Layouts

The post A Primer to Scalable Vector Graphics: Advantages, Benefits, Resources, and More! appeared first on SpyreStudios.


SpyreStudios