Design101

The 6 Principles of Design

If there's anything being a designer has taught me, it's the fact that no matter the project, usage of these 6 Design Principles is a sure thing, even if you follow it strictly or not. No matter how much you deviate your design from the norm, it will always follow any of these principles. 

The more you observe your designs, the more you'll see your usage of a combination of these design principles. It's universal!

Design 101: UI & UX

If you're friends with someone from the design-and-tech industry, chances are you may have been hearing the terms "UI" and "UX" come out of their mouths. Regardless of connections, you may have overhead tech, hip people use these terms, like, "The UI could be better" or "The UX isn't a fit for this app's target users".

What do these terms really mean? Who are considered UX or UI Designers, even? Is it anything like Graphic Design? Do people purposely use these terms to sound cool and techie? Keep reading and you will find the answers.

 

Acronyms Explained

Quite simply, UX stands for "User Experience" and UI stands for "User Interface". Both parts are crucial to creating a product as they work hand in hand to get the "feel" and "design" just right.

While they sound similar, these two are actually different in what aspects of the product they touch. UX design is more analytical and technical, whereas UI design is similar to graphic design, only a little more complex.

To make things a little bit clearer, think about the human body:

The codes are like the bones which give the body structure,

The UX design is represented by our organs, optimizing our body and making sure we function the best way possible

Finally, the skin represents the UI Design, the aesthetics and appearance that "packages" the bones and organs into a pleasing output

 

User Experience Design

By definition, the UX Designer's main goal is to make sure the "experience" or feel of whatever product a consumer has is flawless. Think about an app that may not be so pretty but one that you keep coming back to. For "unpretty" products, you're buying the usability, the function, the ease in handling that product. That's UX Design. 

 

According to Wikipedia:

 
User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
 

Regardless of whether it's an app or a physical product (like cars or street lamps), UX design covers any and all interactions between customer and company or brand. As a process, UXD can be applied to almost anything. (Even this website went through the UX Design process!) 

A UX Designer takes on many faces: the marketer, the designer, the project manager, and so forth as needed. It's a complex role and a very challenging one. The end goal is to connect business goals to a user's needs through testing and refinement to satisfy both sides.

 

User Interface Design

While UX is all about optimization of a product to ensure its effectiveness and functions, UI design deals with the "look and feel", the way a product is presented to delight its users. Like I mentioned earlier, UI and UX complement each other. Sadly, employers often confuse these two professions, expecting more or less from one or the other. 

Like User Experience Design, UID is as challenging as it is multi-faceted. It's main purpose is to ensure that products provide an attractive and responsive experience for users. 

 

According to Usability.gov:

 
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.
 
SOURCE

SOURCE

 

In short...

UI and UX co-exist - not in competition but in harmony. Great UI (appearance, form) should be complemented by amazing UX design (function, usability). Imagine using an app that looks slick but requires hours to fully load the contents. Imagine an incredibly functional website that has everything you need and is easy to use, but is so bland you'd rather visit the next site.

 

If you want to know more about UI/UX Design, tune in to the blog as more content regarding the subject will be posted in the following months. Hope you learned a thing or two!

XO, OLIVIA

Common Design Terms Non-Designers May Find Confusing

Learning jargon of a specific profession is like trying to understand a language you've come across for the first time. While some might sound familiar to what you know, most are still right along the grey areas of understanding. 

If you've got a designer in your life - a friend, a family member, a co-worker - or if you're a budding designer yourself, relax and take a breather. I'm here to help. 

 

Serif Typeface

These typefaces are characterized by the small strokes (serifs) attached at the end of vertical and horizontal lines. Serifs give a sense of professionalism and authority, so if that's the message you're going for (maybe you're creating a political-themed poster), use this typeface.

 

Sans Serif Typeface

"Sans" roughly means "without", meaning this typeface has no decorative small strokes at the ends. This typeface gives off a fresh, clean, and modern vibe unlike their serif opposite.

 

Display Type

If you want to attract attention, use display types. Examples could be movie titles on posters, newspaper headlines, and others.

 

Hierarchy

In design, the way elements are visually arranged signify their level of importance. For example, you may make the headline big and bold in contrast to a small captions on images. Think of what you want your readers to see first and which elements to remember. 

 

Body Copy

This is the main body of text on your design. The paragraphs of a blog post, a magazine article, and even this one are examples of body text.

 

Kerning

This is the space adjustment between two characters in a type. This helps give a more proportioned, balanced look to the space between your characters.

 

Leading

Leading (pronounced "leding" is the space between lines of your type. Loose leading will make your paragraphs look really loose and unpleasant while tight leading suffocates the letters and renders them unreadable. It's important to find balance between the two. 

 

Tracking

This is concerned with the space between letters. With tracking, it's about adjusting space between all letters in a word to change how spread out it looks. With kerning, you adjust the space between individual pairs of letters, a select few to maintain balance overall.

 

Orphans and Widows

In a column of text, these are the short lines or words that appear at the end and start of each column. They're the loose ends of the paragraph they're part of (poor things). Ever read a newspaper? You'll find a few of them there at times.

 

Ascenders & Descenders

Ascenders are parts of a lowercase letter that extends above the x-height (the height of lowercase letters). You'll find them in letter d's, f's, and b's, among others.

Descenders are parts of a lowercase letter that extends below the x-height. Some examples are g's, j's, and q's.  

 

Palette

A palette is a selection of colors you use on your design. They're often used before the design process itself to get a feel for the tone of your output and to see which colors can work with what. 

 

CMYK, RGB, & Pantone (PMS)

CMYK (or Cyan, Magenta, Yellow, & Key) is a color mode used for print. This is a subtractive color, meaning we begin with white and end up with black. When we add more color, we get darker results. 

RGB (or Red, Green, Blue) is the color mode for on-screen projects. As an additive, this is the opposite of CMYK in that as we add more color, we get closer to white.

Pantone is the standard system of colors for printing. Pantone shades are numbered, making it easier for us to identify specific shades of color.  

 

Opacity

The measure of an object or element's transparency. The higher the opacity, the less transparent the object will be. 

 

Stock Photos

Stock photos are free or paid images available online for licensing. Some people find it easier to just buy a stock photo instead of hiring a photographer, or if their designer doesn't have an applicable photo in their stash for a current need.  

Some favorites of mine are Unsplash, Pexels, and Bigstock (paid).

 

Rule of Thirds

This is a design theory where an image is divided with two vertical and two horizontal lines (to make a grid). The areas where the lines intersect serve as focal points of the design.

 

Brandmark & Logotype

Brandmarks are a type of logo design where symbols are used instead of the company name. A popular example would be Apple Inc.'s "apple" logo. Brandmarks can often be accompanied by a logotype.

Logotypes are logos where the name of the company is created in a visually appealing way. Some brands could be Disney, Ikea, and CNN.

 

Negative Space

Also called "white space", this refers to the blank areas of a design. This blog, for example, has a lot of negative space where I have chosen to keep unlittered with content. This is to give the design some "room to breathe" and keep it from looking complicated and untidy.

 

Lorem Ipsum

Ah, the favorite. Also known as "dummy copy", lorem ipsum is there to fill in bodies of text for mock designs, to fill in placeholders for text when you want to get the general feel of how it would look once real body copy is put in. 

 

So, there you go. These are just some of the terms designers use when talking about their designs, and hopefully I was able to help in explaining certain words to you. As a designer (or not), you have to understand that although knowing these terms are important to note (and will make you appear knowledgeable), it's not the be all, end all. 

If you have any questions, leave a comment and I'll do my best to help!

 

XO, OLIVIA

Source: https://www.pexels.com/photo/black-pencils...

5 Terms Every Graphic Designer Should Know

When I talk to friends who are from a different industry and they ask me to do design work for them, they're often stumped by the array of words that leave my mouth when trying to explain the process. If it's happened to you, that's great - it means you know your designer lingo.  

Just like all other professions, Graphic Design has its own collection of jargon and terms you might or might not have come across in the past. I've taken five which I think are some of the most commonly used in design-related conversations in the hopes of clearing things out for you. Whether you're a long-time designer in need of a refresher or someone just starting out, read on.

 

1. CMYK & RGB

CMYK -  SOURCE

CMYK - SOURCE

Your purpose for creating a document often defines its "color mode". RGB (or Red, Green, and Blue) is the color mode used more frequently in the digital space (or as you see it on screen). It has more color gamut (range or scope) than CMYK (or Cyan, Magenta, Yellow, Key), the color mode used more frequently for print. 

In CMYK, "K" stands for "Black" because when you print in this color mode, the CMY plates are aligned with the key of the black plate (this is really technical stuff now, but the more you know, right?). This means that when you send something for printing, the CMYK plates are aligned for printing on paper. 

There are other color modes available (especially when using Photoshop or Illustrator) but these two are the most common ones used by designers everywhere, whether for digital or print projects. 

 

2. Raster Images & Vector Images

To the non-designer, images are just images. However, there really is a HUGE difference between the two, again depending on purpose for use. So how are they different?

SOURCE

SOURCE

Raster Images are often called "bitmap images" made up of pixels. These pixels decide the color and form of an image (they're the small squares you see when you zoom in in Photoshop). Because raster images are made up of a set number of pixels, resizing is the worse, especially when you're trying to make it larger. When you do that, the software has to create pixels by guessing which ones would fit where and in what color. This guesswork makes the image blurry in effect.

Vector Images were sent by the gods (haha, partially kidding). Because vector images are based on points that form a shape, they can be scaled to whatever size you want and have no loss of quality. These points have defined coordinates on the document, so in a sense, you're really just moving the points around when resizing, not adding to them like the software would do for raster images. Vectors are most often used for logos and shirt designs so that quality is maintained all throughout. 

 

3. PPI & DPI

PPI stands for "Pixels Per Inch" while DPI means "Dots Per Inch". When it comes to image resolution, this is yet another term most people (and even some designers) find confusing. (Note: resolution is only used for raster images because vectors use points.)

Put simply, you should only bother yourself with DPI when creating for print. DPI is the number of dots per inch on a page so the more dots there are, the better the image quality. 300DPI is the acknowledged standard for printing images. 

Obviously, PPI counts how many pixels are in your document per inch. If you scale an image in Photoshop, you increase the image's number of PPI, making you lose quality. 

 

4. Logo Design & Branding

Yes, they're not the same. While a logo is part of establishing yourself as a brand, it's not branding itself, just an aspect of it. If you think designing a logo isn't easy, branding is not a walk in the park either. 

A logo should be memorable and really good ones last a lifetime, but those that do reach that point because of - you guessed it - the branding. The latter is the identity of your company and it purpose, how it wants to represent itself to the public. 

 

5. Typography

Typography is the art of arranging type so that they look great. It's one of the fundamentals of graphic design and anyone aspiring to be a designer should look into it. It's the art of layouting text in response to a mood, an advocacy, or something else you want to communicate to the audience. 

The past year was the time typography really started to make its mark among even the most old-fashioned brands. Great typography communicates a message through its form and style. 

Hope you learned a thing or two from this post!

XO, OLIVIA

 

Color Psychology and How It Will Help Establish Your Brand Identity

Believe it or not, color plays a very important role in conveying a message to your audience or brand consumers. We've heard it all before, that black exudes elegance and stature, that red and yellow stimulate the brain to feel hunger and want food, and that yellow is the general color for happiness. This is why some brands have painted their restaurant walls a certain color and designed their logos a certain shade.

Ever asked yourself why you trust brands with blue-colored logos more (depending on personal experience) and why you feel uneasy with brands that have shocking, neon-colored logos that claim they won't rip you off? Why is color in brand identity crucial?

 

Studies have shown that, depending on the product, around 90% of snap judgements made can be based purely on color alone. (source)

 

Personally, I wouldn't trust my money with a bank that plays with very bright colors. Based on personal preference, I'd be willing to invest in a bank that uses more subdued shades of blue or green. I feel like they're more "established" and wouldn't just run away with my investment. (Quick question: Have you ever observed which brands you're more trusting of because of their logo color?)

This is because people tend to associate color with what it is being used on or for. A study named The Interactive Effects of Colors emphasizes that to a "T", noting that if a color "fits" the brand's "personality" (keywords all over, everyone), no eyebrows will be raised to question its appropriateness or believability. Imagine a blue McDonald's logo. That would make me feel so uncomfortable. Or maybe a blue KFC logo. Pass!

Research has shown that color is attached to a persona or "aura" of some sort, as perceived by people at any given country. To prove this, let's have a little icebreaker: go through the short list below and decide whether or not you agree with the personality each color is said to represent. Ready?

 

BLUE: Said to convey trust, honesty, and dependability.

SOURCE: Google

SOURCE: Google

GREEN: Said to promote the good, healthy, and organic (also nature and relaxation)

SOURCE: Google

SOURCE: Google

BLACK: Conveys elegance, power, boldness, and sophistication.

SOURCE: Google

SOURCE: Google

RED: Said to convey a sense of urgency or boldness / high-energy.

SOURCE: Google

SOURCE: Google

PINK or PURPLE: Radiates femininity, fun, and youthfulness.

SOURCE: Google

SOURCE: Google

ORANGE: Stands for warmth, enthusiasm, and fun.

SOURCE: Google

SOURCE: Google

When companies hire designers to help in their branding, some usually come with a preconceived image of how they want it to look like and what colors they want on there. I've had experience where a high-end clothing brand wanted a rebranding of their line, but gave me color options that didn't match the personality they were aiming for. Often, a chat or two with the business owner (using suggestive psychology) will help convince them to choose more appropriate palettes. 

 

So how do you choose the right color palette for your brand?

The first (and most obvious) thing you can do is think about your brand's voice and feel. What do you want to be and how do you want customers to perceive you? Who are your target customers or audiences? Will your brand deal with teenagers, or professional businessmen? Once you've established that, you're closer to figuring out the proper palette for your brand. Here are a few more tips for you:

  • Start with a "base" color, one that fits your brand's voice and feel. Look through the colors above and check if you fit under any of them. If you need to add a color or two, use complementaries. (For more help, check out Color Hunt, Palettab, Paletton, or Adobe Kuler)

  • If you plan to go international, keep in mind that colors in other countries convey different messages. (For example, in most of the world, white is closely related to happy weddings while in India, it's the color worn when someone dies.)

  • If you've finalized your colors, it's always wise to create a style guide, complete with the hex values for each. Place your logo on different backgrounds (eg. grey, black, and white) to help you get an overview of how it would look when you decide to expand your range of design/products.

  • Too many colors can ruin your brand. If you really have to, just use at most four (4) colors only.

 

My history with colors

It took me a while to find the colors for my brand. Since I started blogging last 2009, my color palette has changed a lot. I've gone from pinks and oranges to minimalistic black, greys, and dusty rose shades, and to aqua and apple green. There was always something off about the brand colors and I've realized why I haven't had peace with my brand yet.

I knew I've always been attracted to pink, but I wanted my brand to be an authority in the field I've chosen, which is art and design. I've tried so many combinations but still, there was something that wasn't right.

It was only this year that I realized why. I didn't really know what my brand stood for. Because I wanted to be and do so many things, I was struggling to find my point of interest. What did I really want my brand to represent? Technology? Blogging? Beauty? It dawned on me a few days ago that I wanted to be the one thing I studied for. In the end, the easiest topics for me to discuss were design and self-improvement. A life in design. Design and Life.

It also was hard for me to choose whether to go for minimalistic or go with the flow of this year (apparently, these are the design trends for 2017), but I could always use them on my designs for clients. They didn't have to represent who I am because they're hot this year. The obvious choice was to go for minimalism. 

 

Where are you now in terms of getting your brand smoothened out? I know it's a process, and it changes with you and your experience, but once you do get where you feel comfortable, it's a very rewarding feeling. Need someone to talk to regarding branding? I'm all ears. Hope this post helped you out!