October 2018 - YasTech Developments
Social MediaWeb Design

Doing More with Less | Why Instagram Works and Your Website Doesn’t

Identify The Problem

Websites are complicated, but your customer’s experience shouldn’t be. Confusing navigation bars, overwhelming blocks of endless text, and poorly optimized websites are what separates a good site from a bad one: the balance between content and user experience.

We often see our own websites as an extension of ourselves, which leads many of us to include too much information about ourselves and our business. While you do want to show your passion, you don’t want to overwhelm your readers to the point of disinterest.

Understand Beauty and Function

Beautiful like art—functional like design

Perfect balance between these two can create a website you’ll be proud of, and your customers will love.

One design principle has stood the test of time with this balance: Simplicity. Think of your favorite websites or social media apps. What makes them so easy to use day after day? What makes their content so easy to digest? What draws you and and causes addiction in some cases?

Study Instagram’s Psychology

There are many theories at play behind the scenes at Instagram. Searching “Why is Instagram addicting” will return results such as FOMO (fear of missing out), instant gratification and validation, and the appeal of filters.

I won’t be exploring these phenomena today, but rather how Instagram’s design releases dopamine in your brain through a Reward System.

At any given time, browsing instagram stimulates your brain very strategically. You see only two icons on the top, one large image from friends or family in the middle, and five navigation icons at the bottom.

Here’s the strategy:

  • Show the viewer bite-sized piece of information through a stimulating photo
  • Have the viewer perform an action in response to that stimuli by swiping to the next photo
  • The viewer forms a habit based on the reward of seeing the next stimulating photo by swiping
  • Repeat

Why Does This Work?

Leaving your user wanting more means more frequent and often longer visits. The method used by Instagram can be used on almost any website: give the viewer just enough to look at and reward them for looking at more.

Imagine a social app that does the opposite—ten icons instead of three, clunky interface, having to click back to see a new stimulus instead of swiping. Suddenly, what should be easy and enjoyable has become overwhelming, confusing, and a chore.

When thinking of content and design, consider the purpose and value of what you’re creating. Does your customer need to know every owner your business has ever had? Do they need a link to every given page at every given moment?

No. No they don’t.

Try This at Home

You don’t need to reinvent the wheel, and you don’t need to be an experienced designer to get this concept. Try out this activity and you’ll see exactly what I mean:

  • Go to your favorite websites and write down why you use them, how you use them, and what they’re doing right.
    • Look at how many paragraphs they use.
    • Look at how many sentences are in each paragraph.
    • Look at how they’re using the white-space around their content.

Now, go look at your competitors’ website. Chances are, you’ll find so many of these rules and standards thrown right out the window. I just hope you didn’t have to read… COMIC SANS.

MarketingWeb Design

Yas’ Ultimate Branding Library

       

Finding all the information you need about your business’ brand isn’t easy, which is why we’ve done the legwork and compiled all the resources you need right here!

Sure, some of these industry leaders are our competitors, but we believe in providing you with everything you need to make an informed decision about your brand.

We’ll take you through five very important steps in deciding developing your brand, which are:    

  1. Creating Your Company Values

  2. Deciding on a Mission Statement

  3. Picking Your Colors

  4. Finding Your Typography & Fonts

  5. Selecting Your Web Designs

Find a summary of each resource in the categories below so you know where you need to delve deeper and where you don’t!

 

Understand what your Company Values are, why you need them, and how you and your team can develop them.

 

The Muse

https://www.themuse.com/advice/words-to-live-by-5-steps-to-choosing-your-teams-core-values

  • Determine Who Should Be Involved
  • Brainstorm About What’s Important to You and Your Team
  • Consolidate and Define
  • Frame Your Values According to Your Team’s Culture
  • Evaluate Your Values as a Complete Set

TINYpulse

https://www.tinypulse.com/blog/sk-how-to-choose-company-values

  • List Who You Like and Why
  • List Who You Don’t Like and Why
  • Brainstorm Values
  • Repeat
  • Make Values Easy to Remember

Zenefits

https://www.zenefits.com/blog/how-to-choose-the-best-company-core-values-for-your-organization/

  • Why Core Values are Important to Businesses
  • What to Consider When Choosing your Company’s Core Values
  • The Best Company Core Values: A How-To

CultureIQ

https://cultureiq.com/defining-company-values/

  • What are Company Values
  • Defining Your Company’s Values
    • So, Where do You Even Start?
    • Who do You Involve?
    • The Core of It
    • What Was the Result?
    • What Comes Next?

Threads Culture

https://www.threadsculture.com/create-your-core-values/

  • The Wrong Way to Use a Core Values List
  • Threads Method to Make Your Own Core Values List
  • What You Need
  • Step #1 — The Core Values List Question
  • Step #2 — Creating the Core Values List
  • Step #3 — Organizing Your Core Values List
  • Step #4 — Selecting Your Core Values
  • Step #5 — Defining Your Core Values
  • Next Steps

Cornerstone OnDemand

https://www.cornerstoneondemand.com/rework/6-steps-defining-your-organizational-values

  • Assess Your Current Organizational Culture
  • Review Your Strategic Business Plan
  • Determine the Culture Needed to Achieve Your Plan
  • Decide if Your Values Need to Shift
  • Define What Your Chosen Values Really Mean
  • Incorporate These Values into Organizational Processes

Talk Business

https://www.talk-business.co.uk/2018/01/31/how-to-determine-your-business-core-values-and-why-to-do-so/

  • Step 1: Understand Where the Company Stands at the Moment
  • Step 2: Review the Current Strategic Plan
  • Step 3: Consider the Cultures
  • Step 4: Choose the Values
  • Step 5: Define the Meaning of the Value
  • Step 6: Incorporate the Values Into the Processes of the Organization

 

Take your personal and company values and turn them into a powerful Mission Statement that will set the tone for your business.

 

Kinesis Inc.

https://www.kinesisinc.com/how-to-write-a-powerful-mission-statement/

  • Your Mission is Your Core Purpose
  • Why You Should Have a Strong Mission Statement
  • Examples of Mission Statements

The Balance

https://www.thebalancesmb.com/how-to-write-a-mission-statement-2948001

  • Describe What Your Company Does
  • Describe How Your Company Does What It Does
  • Add Why (Your Company Does What It Does)
  • Put Your New Mission Statement to Work

Seapoint Center

https://seapointcenter.com/how-to-write-a-mission-statement/

  • Step 1: Determine Why You Want to Write a Mission Statement
  • Step 2: This Next Step Corresponds With Your Selection in Step 1
  • Step 3: Consider What You Offer from Your Customer’s Viewpoint
  • Step 4: Now, Write a Brief Statement of No More Than 25 Words
  • Step 5: Involve Others

Community Tool Box

https://ctb.ku.edu/en/table-of-contents/structure/strategic-planning/vision-mission-statements/main

  • What is a Vision Statement?
  • What is a Mission Statement?
  • Why Should You Create Vision and Mission Statements?
  • How Do You Create Vision and Mission Statements?
    • Learn What is Important to People in Your Community
    • Decide What to Ask
    • Decide on the General Focus of Your Organization
    • Develop Your Vision and Mission Statements
    • Obtain Consensus on Your Vision and Mission Statements
    • Decide how You Will Use Your Vision and Mission Statements

 

Now we get to the visuals. Take a look at what branding colors can mean, some suggestions and trends, and a ton of examples to inspire you.

 

Help Scout

https://www.helpscout.net/blog/psychology-of-color/

  • Misconceptions Around the Psychology of Color
  • The Importance of Colors in Branding
  • 5 Dimensions of Brand Personality
  • Color Trends for Men and Women
    • Men’s and Women’s Favorite Colors
    • Men’s and Women’s Least Favorite Colors
  • Color Coordination and Conversions
  • Why we Prefer “Sky Blue” Over “Light Blue”
  • Finding Your Own Palette

99designs

https://99designs.ca/blog/tips/branding-colors/

  • Why Branding Colors Matter
  • Application of Branding Colors
  • How to Determine Your Brand Identity
  • Emotional Associations of Each Color
  • Formula for Building a Brand Color Scheme
    • Plan on Choosing 3 Colors
    • Choose Your Base
    • Choose Your Accent
    • Choosing Your Neutral
      • Monochromatic
      • Analogous
      • Complementary
      • Triadic
  • Know When to Color Outside the Lines

CreativeBloq

https://www.creativebloq.com/branding/amazing-uses-colour-6133196

  • Red and Orange
    • Coca-Cola
    • Target
    • Vodafone
    • Orange
    • Home Depot
    • easyGroup
  • Yellow and Green
    • Veuve Clicquot
    • Caterpillar
    • JCB
    • John Deere
    • Harrods
    • Starbucks
  • Blue, Purple and Brown
    • NHS
    • Tiffany & Co
    • Facebook
    • Cadbury’s
    • UPS
  • Pink, Black and White
    • T-Mobile
    • Hotel Chocolat
    • Guinness
    • Apple

Piktochart

https://piktochart.com/blog/inspirational-brand-colors/

  • Food & Beverage
    • Talor Jorgen Coffee
    • Gold Bar Whiskey
    • Omakse Room
    • Hurly Burly Live Cultures
    • H + J
    • The Street Food Collective
    • Flor de Viento
  • Lifestyle
    • Rasaru
    • Basetti Home Innovation
    • Tour & Travel
    • Blue Saigon
    • Mutual Attraction
    • NAU
  • Digital
    • Cashtree
    • Mobu
    • SM Protect
    • Hidden Characters
    • Wokine
    • Waaark
  • Big Brands
    • DropBox
    • Google
    • Uber
    • Lufthansa
    • Asana
    • Evernote
    • SpaceX
    • National Geographic
    • Bang & Olufsen
    • Spotify
    • Airbnb
    • Grand Budapest Hotel

BrandColors

https://brandcolors.net/

 

This one has too many choices to list, but you’ll love seeing the hundreds of brand colors from 500px to Zopim

Fast Company

https://www.fastcompany.com/3028378/what-your-logos-color-says-about-your-company-infographic

  • What Your Logo’s Color Says About Your Company (Infographic)
    • Red
    • Yellow
    • Blue
    • Orange
    • Green
    • Purple

Canva

https://www.canva.com/learn/brand-color-palette/

  • Rich and Adventurous
  • Warm Antique
  • Waimea Waters
  • Tropical Punch
  • Bolivian Beauty
  • Fall Collection
  • Very Venice
  • Vintage Sundown
  • Marigold Mix
  • Nordic Woods
  • Green and Gold
  • Balearic Bounty
  • Aqua Army
  • Siesta Hour
  • Mellow Musings
  • Afternoon Delights
  • Greek Salad
  • French Connection
  • Serene Sakura
  • Morning Mist

 

It’s not what you say, but how you say it! According to the industry, these are the powerful strategies you can employ for picking the perfect typography and fonts.

 

99designs

https://99designs.ca/blog/trends/font-trends-2018/

  • Handwritten Fonts
  • Watercolor Fonts
  • Vintage Slab and Script Fonts
  • Helvetica and Helvetica Alternatives
  • Creative Experimental Display Typography
  • Responsive Fonts for Web
  • Mid-Century Fonts
  • Refined Serif Fonts

Awwwards

https://www.awwwards.com/typography-is-the-new-black-trends-in-web-design.html

  • Hero Fonts and Bold Typefaces
  • Serifs ARE BACK
  • Expressive Typography in Broken Grid Layouts
  • Hero Fonts and Large Letter Sizes in Paragraphs
  • Pictograms, Icons and Emojis Decorate Our Paragraphs
  • The Evolution of the Paragraph in Web Design

Design Shack

https://designshack.net/articles/typography/typography-trends-2018/

  • Color Fonts and Type
  • Simple, Bold Sans Serifs
  • Highlighted Type
  • Cutouts and Overlays
  • Layering with Other Elements
  • Text with Gradients
  • “Overdone” Effects
  • Custom Everything

Digital Synopsis

https://digitalsynopsis.com/design/top-10-typography-trends-2018/

  • Serifs Will Dominate
  • Retro Makes a Comeback
  • Bigger will be Better
  • Cutouts and Overlays
  • Highlights and Underline
  • Hand Drawn Letters
  • Gradients Will Take Over
  • Custom Fonts Will Emerge
  • Colorful Fonts Will Be the New Black
  • Transparency in Typography

CreativeBloq

https://www.creativebloq.com/features/typography-trends

  • 1970s-Style Serif Fonts
  • Retro Reactions to Geometric Type
  • Colour Fonts
  • Custom Fonts Designed In-House
  • No Trends

Creative Boom

https://www.creativeboom.com/resources/top-10-fonts-that-will-be-popular-with-designers-in-2018/

  • Harriet
  • Larish Neue
  • Ogg
  • Domaine Display
  • Transcript
  • Opposit
  • Moniker
  • Trade Gothic Display
  • Mont
  • Noe Display

 

Finally, it all comes together! The tone, theme, and imagery of your company fit together to create a customer experience they’ll never forget. You’ll be surprised by what websites can really do.

 

Boral Agency

https://www.boralagency.com/web-design-trends-2019/

  • Personalized UX
  • Voice User Interface
  • Practicality and Content Centered UX
  • Minimalism and Bold Typography Designs
  • Augmented Reality
  • GIFS or Animations
  • Sticky Elements
  • ChatBots
  • Progress Spectrum
  • Grid Layouts

TheeDesign

https://www.theedesign.com/blog/2018/web-design-trends-2019

  • Speed
  • Flat Design
  • Mobile First
  • Broken Grid/Asymmetrical Layouts
  • Shapes
  • Single Page Design
  • Video Backgrounds
  • Micro-Animations
  • Chatbots/Machine Learning
  • Engaging Minimalism or Attention-Grabbing Visuals

Merehead

http://merehead.com/blog/top-web-design-trends-2019/

  • Non-Standard is an Effective Move
  • Full-Screen video as a Convenient and Informative Element on a Website
  • Geometric Shapes as Freshness and Originality of Web Design
  • Cinemagraphs as an Excellent Replacement for Boring GIF Animation
  • Bright Colors
  • Simple Design & Unique Font
  • Minimalism and Translucent Buttons
  • Using Photos in the Center
  • Natural and Streamlined Shapes
  • UI Trends of 2019
    • Large Headings
    • Minimalism
    • Enough Space Between Elements
    • Bright Colors
    • 3D Elements
    • Gradients
    • Presence of Animation

 

I love how many of these trends are the same—that’s why they’re called the industry standard!

Webflow

https://webflow.com/blog/19-web-design-trends-for-2018

  • Broken Grid Layouts
  • Illustrations Take Center Stage
  • Brutalism Reaches Mainstream Status
  • More Organic and Oblique Shapes
  • Even More Pervasive Interactions and Animations
  • The Emergence of Maximalism
  • Serifs Put Their Best Feet Forward
  • Floating Navigation Menus
  • The <Video> Element
  • More Immersive “Multimedia” Longform
  • Variable Fonts
  • Content Hubs — or Webhooks? — Get Cool
  • CSS Grid
  • The Quest for the Perfect Digital Design Tool
  • Diversity and Inclusion as Design Challenges
  • The “Pivot to Video” Plays On
  • The Rise of the UX Writer Continues
  • Design. Systematized.
  • Principles-First Design

NJ Marketing & Web Design Agency CMDS

https://www.cmdsonline.com/blog/the-looking-glass/web-design-trends-2019/

  • Bright Colors
  • Natural Shapes
  • Interactive Backgrounds
  • Minimalist Designs
  • Building for Mobile First

SoftScript Solutions

https://www.softscripts.net/blog/2018/06/changes-and-trends-in-web-development-this-2018-2019/

  • Accelerated Mobile Pages
  • Progressive Web Applications
  • Shadows and 3D View
  • Integrated Animations (Motion UI)
  • Virtual Reality
  • Push Notifications
  • Compatible Extensions
  • Mobile Web
  • Single Page Websites
  • Artificial Intelligence Support
  • Flash to HTML5

Muzli

https://medium.muz.li/web-design-trends-2018-a9bfabc99d46

  • Minimal and Comfort
  • Futuristic Designs
  • Custom Illustrations and Videos
  • Shadows for Extra Depth
  • Responsive Web & Logos
  • Minimal Studio Shots
  • More Negative Space
  • Focal Points
  • Animations, GIFS and Cinemagraphs
  • Micro Interactions
  • Bright Gradients & Vibrant Colors
  • Big Bold & Creative Typography
  • Particle Backgrounds
  • Create More Space with Split Page Design
  • Monocolor and Hybrid Icons
  • Tell Stories to Retain Users
  • Make Your Content Print Ready

Venngage

https://venngage.com/blog/graphic-design-trends/

  • Multiple Brand Color Schemes
  • Color Gradients are Making a Comeback
  • Better Branded Social Media Images
  • Unconventional Colors Everywhere
  • Bold & Handwritten Fonts Dominate
  • More Custom Illustrations
  • Better GIFS, Less Reactions
  • Cinemagraphs are Gaining Traction

 

Thanks for taking the time to stop by Yas’ Ultimate Branding Library! I hope you found everything you were looking for, and I invite you to come back again to find even more inspiration.

Ready to get started?

Start your project
Copyright 2018 Yastech Developments. Saskatoon, Saskatchewan Canada Privacy Policy Get Free Estimate