Search

Is Less Always More? Getting To The Bottom Of Minimalism

Share

We’ve been told time and time again that simple design is better than complex design. Everyone from Seth Godin to Steve Jobs has expressed their feelings on the matter, and the consensus seems to be that true simplicity and minimalism are the way to go.

Remove everything that doesn’t absolutely need to be there, and you will inevitably arrive at the perfect design. But is that always true? We’re going to test this theory of less is more, and get to the bottom of why it’s so universally accepted.

Remove What Doesn’t Work?

It’s definitely true that removing elements of a design that aren’t fitting in with the end goal is the best, most obvious way to simplify a design. But what does that mean, exactly? Does it mean you should just keep taking things out until there’s only the bare minimum left?

How do you know when to stop removing design elements?

Richard Seymour of Semourpowell argues that design is more than simply a mechanical game of addition and subtraction. "You shouldn’t be putting more into something than it needs," Seymour explains in the Design Insights video series. "But the fact is, the need may be an emotional need."

What Seymour is getting at is that, sometimes, what doesn’t seem to "work" from a pure design perspective may actually be vital from a psychological perspective.

Simple vs. Easy

Take, for example, your favorite web browser. I’m going to go out on a limb here and assume that, for the majority of you, that will be either Microsoft Internet Explorer or Mozilla Firefox. Those are the two most widely used browsers in the world, but are they the most efficient from a design point of view?

Well, no. Google’s Chrome browser, I’d argue, is probably the most streamlined in terms of design when it comes to mainstream browsers. But it’s not the most popular browser, even though everybody who uses Google knows about it. There are certain features built into the IE and Firefox software that users are convinced they need and refuse to go without.

Therefore, they are necessary. Emotionally necessary.

What Do They Need?

Paying attention to your users’ emotional needs is one of the most critical jobs you have as a designer. You need to be able to judge when a design should be reduced down to the barest elements without angering the vast majority of the people who are using it. Emotionally, they may need to have more options, even if it’s not true. They may simply want the comfort of knowing that they have multiple ways of arriving at a solution.

Think of Adobe Photoshop. There are at least 10 different ways to do just about everything in that program, and the majority of its users wouldn’t have it any other way. Think about what happens when Adobe makes just the slightest adjustment to one of its functions or tools. If you guessed "maniacal howls of protest", then you’d be right.

Even if the change is for the better, there will always be a vocal group of users who will violently protest it, purely for emotional reasons.

The Functionality Of Users’ Needs

Do people need an absolute, bare bones interface? Do they need something that’s so simple and elegant that it brings them to tears of joy every time they look at it? Or do they need something that does the job it needs to do – something that works?

You the designer may be viewing your design from an aesthetic perspective, but don’t forget that (most of the time) your users are looking at it from a purely functional perspective. They are looking to use your design, not discuss its artistic merits.

This is a very difficult lesson for even the most experienced designers to learn. How many times have you seen an award winning ad campaign, mobile app, or book cover design and been completely perplexed as to how it solves any kind of design problem?

Sometimes, you may feel as though the design world rewards beauty over functionality, but the real proof of a design’s success lies with the people it’s supposed to be helping. The examples of gorgeously designed, award-winning failures in design history are numerous enough to fill entire volumes.

What Do You Think?

Do you think that simplicity and minimalism should be the end all, be all of a designer’s creative vision? Are there other ways to approach design that truly value function over form, while still being considered "good design"?








30 Outstanding Resume Designs You Wish You Thought Of

Share

It’s a competitive job market we hunt jobs in and sorry to say, resumes created in MSWord are just not going to cut it anymore. These days, particularly if you are a creative, you need an outstanding resume to make an impression on potential employers. When a prospective client looks at your resume, everything you put into your resume is doing all the selling for you.

Not only do you have to ensure that what you put into your resume convinces them that you are the best candidate for the job, you need to create a resume that not only shows them what you can do, but how you are not afraid to break boundaries, and try out new ideas.

Today, I’d like to share with you a collection of 30 outstanding resume designs that come in many forms: infographic designs, booklets, business cards, postcards, personal branding material, posters, website designs and more. Feeling the pressure yet? Perhaps it is time to spruce up your own resume design.

If you need more design ideas, check out some of our published posts below:

Curriculum Vitae by Anton Yermolov

CV & Portfolio Mailer by Charlotte Allen

Resume by Roberta Cicerone

Self-Promotion by Syril Bobadilla

Resume IOS Version by Julien Renvoye

Bubbles Resume Template by CodeGrape

Updated Resume by Jered Odegard

Creative Curriculum Vitae by Nico Lopez

Curriculum vitae by Camila Soto

My portfolio by Stefania Capellupo

Self Branding, CV/Resume by Teesha Masson

Personal Branding & Self Promo by Mathew Lynch

Resume Book by Paula Del Mas

Curriculum Vitae by Rebecca Fisk

Infograpics of My CV / Resume by Felix Baky

Lucreziau cv sintetico by Lucrezia Urtis

Creative Resume by Iel Caseda

Curriculum Vitae by Carlos Bedoya

My curriculum vitae / skills by Simone Primo

Infographic Resume by Lim Zhiyang

My CV/Resume 2013 by Wap Martinez-Mercader

“Eye”dentity – Pop-Up Folder by Matthew Stucky

Personal resume by Maria Gabriella Aronne

NEW_CV by Candice Witpas

Portfolio ’11_newspaper by Marianne Riegelnegg

Jamie Murphey Resume by jamiemurphey

Infographic Resume by Varun Sudhakar

Anatomy of a graphic designer by Francesco Rivieccio

Infographic CV by Gary Corr

Self Promotion / Resume by Marco Bertoletti








20 Creative Mascot Designs That Leave An Impression

Share

Do you remember the helpful paperclip in Microsoft Word that would help you out with tips? It’s one of the first mascots in design I remember. With the number of websites increasing daily and highly competitive markets, brand new attention-grabbing tricks are required for you to stand out.

A logo on your website is no longer enough to make an impact on your visitors. One creative way is to develop a mascot, which will interact with customers and present your company to the outside world. Visual memory is much stronger than text, thus the mascot is a great solution to help people remember your products and services. A custom-made character doesn’t only fit your company’s style perfectly but it’s also way more memorable.

These days mascots can be used for various sites, no matter what sort of business you run. Today, I’d like to share with you 20 creative fresh mascot designs for your inspiration.

The freddie expression project by Ron Lewis for MailChimp

Toon Me! JohnObidiMascot by Anthony Anth Ezeokoye

Olympic Mascots by Alina IVANOVA

Borne, Character Design for Wonderful Indonesia by Tandy Mackenzie

Miner Mascot by Alan Oronoz

Mascot for Surfaccounts by Nikolay Verin

Hipposters by Matt Kauzlarich

Cubtab Mascot by Alan Oronoz

Owl Mascot Prints by Jacob Greif

Bulls Sports Mascot by Ed

Mascots for the World Winter Universiade 2019 by Anna Kulakovskaja

Patch: mascot design for Salvation Army by Joey Ellis

Wheat character by Evgeniya Rodina

“Kahuna” mascot & characters by Andreas Krapf

Instagram Logo Mascot Toy Design Concept by Shinbone Creative

Owl mascot for a translation company by Anna Grape

Hypertech Octopus by Andra Popovici

MonsterMortgage.ca Mascot Illustration by Karen | fivethree

Splish Splash Swimming’s Mascot by Brian James Russell

Rhino mascot design by Sergio Ordonez








Simple Grid – CSS framework

Share

Simple Grid - CSS framework

Simple Grid is an essential CSS framework providing a smart responsive grid system. No styles, no design, just grids! By Przemek Galarowicz.

The post Simple Grid – CSS framework appeared first on Freebiesbug.

5 HTML Elements That You Probably Don’t Know

Share

In the past we have covered a lot about HTML5 elements as well as demonstrating their functions. New elements such as header, footer, aside, nav, and main make our document structure more semantic or “meaningful”. In particular, these elements help machines to easily understand sections within the document.

But, HTML specifications are huge. If you visit W3.org where the documentation resides, you will find hundreds of pages documenting each element extensively. To this extent, there are possibly a few HTML elements that you have overlooked, and those include:

1. Sample Element

Sample Element or samp defines the output from a computer system, a program or a script. It was introduced far back in HTML3!. This element will be useful for tech tutorials or computer manuals. This example below shows how we wrap an error that occurred in Terminal.

 If you type dir in Terminal, it will output <samp>command not found: dir</samp>. 

All browsers, including IE5, support this element, and they will display it with Monospace typeface like thecode and pre elements.

2. Keyboard Input Element

Keyboard Input Element or kbd is an element that defines a user input. Similar to the samp element, kbd would be commonly used in tech or computer-related articles.

Say, you want to instruct readers to enter particular characters in an input field of an Application. You can wrap the text characters with kbd, as follows:

 To confirm deletion of your account, type <kbd>DELETE</kbd>. 

kbd can also be used to represent actual keyboard keys.

 Press <kbd>Enter</kbd> to create a new line. 

But when used along with the samp element, it could represent input that is conducted through the Application screen such as the buttons or menus. Here is one example:

 Click <kbd><samp>Agree</samp></kbd> to proceed. 

Even though kbd element is explicitly described as “Keyboard Input”, we can also use it for other input type, such as a voice input. If you write tutorials or manuals on Siri, Google Voice, or Cortana that allow us to communicate with the device using voice commands, wrap the voice input this way.

 ...the Ok Google hotword isn't actually disabled according to region and can be easily enabled in just two steps. 

Similar to samp, kbdalso outputs with Monospace typeface by default.

Styling Suggestion

These elements help machines understand the content better. But since they are all rendered with Monospace typeface, readers will hardly see the difference. In this case, we can add some styling to make them look more distinct.

We can add a class, for example button-input if it represents a keyboard key or an Application button.

Then, in CSS, we put the following style rules.

 .button-input { border: 1px solid #333; background: linear-gradient(#aaa 0%, #555 100%); /* W3C */ color: #fff; padding: 3px 8px; border-radius: 3px; box-shadow: 0px 2px 0px 0px #111; } 

This will make it look like an actual button.

3. Variable Element

Variable Element or var, as the name implies, represents a variable character. This element may be useful to write tutorials or articles that comprise of mathematical equations, such as:

 <code>var <var>y</var> = Math.sqrt(16);</code> 

In the above example, we wrap the equation with code element, as the equation is a JavaScript code. We only wrap the character that is a variable with var element.

4. Defining Element

Defining element or dfn is used to highlight a jargon or a specific term that is particularly used in a community or an industry. Web Development industry, for instance, is full of jargon that may not be well known outside the industry.

And below is an example where we use dfn element to wrap the word Breadcrumb; we took the following sentence from Wikipedia.

 <dfn>Breadcrumbs</dfn> or <dfn>breadcrumb trail</dfn> is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. 

Browsers display it in italic, corresponding to the typographic convention to denote a new instance, or a foreign term.

5. Mark Element

Mark is a new element introduced as part of HTML5. In short, mark is used to highlight text that you want readers to pay attention to. Thus, by default, browsers render this element with bright fluorescent color as you can see below.

For more, you can head over to its documentation, Text Level Semantic – Mark Element, where you can see some detailed examples on the usage.

Final Thought

Instead of using a generic element like div or span, it is better to wrap your content within a more semantic element as listed above, so that the machine – be it an Application, a bot, or a reading device – could better understand the content. Hopefully, this article can be a good reference for getting started.