Archive

Archive for the ‘Designing’ Category

6 Tips for Posting Content Anonymously

April 19th, 2019 No comments

For one reason or another, you may find yourself wanting to publish things online anonymously. Now to some, the “A-word” conjures up images of hackers, Guy Fawkes masks, and people generally saying terrible things to each other on Twitter. There’s long been an ongoing debate about whether anonymity is something that should even be allowed on the Internet.

Yes. Yes it should. There’s no doubt that there are terrible people in the world; but anonymity is a powerful tool for good as well. Here are some of the more obvious examples:

  • Fighting the power: It sure would be nice if we lived in a world where everyone in every government had the people’s best interests at heart. We don’t, and they don’t. Ask Nelson Mandela, or any number of other great men and women throughout history who have fought for progress and human rights.
  • Exposing criminal activity: Whether you’re a crime blogger writing about the criminal underworld, or a whistleblower from some large corporation, exposing criminal activity is dangerous. People have died.
  • Adult content, and other “culturally offensive” themes: Something as simple as writing your own (very personal) memoirs can draw a lot of unwanted attention from those around you. Even if what you’re doing isn’t morally or ethically wrong by any reasonable standard, people aren’t always terribly understanding. And then, perhaps the people in your life would rather that their personal activities didn’t become public knowledge. Staying anonymous is a good way to avoid unnecessary drama, in cases like these.
  • Maybe it’s just work: One of my favorite blogs back in the day was Waiter Rant where a then-anonymous waiter told all of his juiciest stories. He stayed anonymous for the simple reason that his bosses didn’t want any extra drama at their restaurant. Besides, rude customers who might’ve just been having a really bad day don’t deserve the kind of hate the Internet can put out.
  • Not holding back: Webdesigner Depot runs a series of posts written anonymously called The Secret Designer. They’re anonymous, because they expose the underside of the web design industry that the writers don’t want to be associated with.

Now if any of this sounds familiar to long-time WDD readers, that may be because I addressed some of these points in The Ultimate Guide to Blogging some time back. I wanted to address the topic in a little bit more detail, and cover some more options we have for protecting our privacy. Here they are, in no particular order:

1. Paranoia

The most common security point of failure always has been, and always will be people. You could be uncovered by some random screw-up you make yourself, or you could be outed by trusting the wrong person. Even people who would never hurt you on purpose can give things away by accident.

More commonly, people who supposedly want to remain anonymous get caught because they can’t help but brag. If this is something you’re committed to doing, you need to change your entire outlook on life. You can’t be Hackerman by night, and turn it off by day. You need to get paranoid, without acting obviously paranoid; because someone probably is out to get you, but they can tell if you start acting too paranoid.

Sounds fun, right? [/sarcasm] How do you know when you’re paranoid enough? Let’s start with the realization that doing everything on this list alone isn’t enough to keep you perfectly safe. This is a basic beginner’s guide at best.

Oh, and remember to avoid actually writing any identifying information in your actual content if you can help it. Just sayin’.

2. Avoid Big Platforms

Don’t use Google for e-mail, sign-ins, or anything else. Ditto Yahoo, Outlook.com, or basically any other major corporation. If they have a reputation for collecting your data and selling it, they’ll mostly likely sell it to the people you want to hide from.

The same goes for your publishing platform. Simply put, you want as much control over your data as possible. That means you shouldn’t give your data to Medium, Tumblr (which is owned by Yahoo), or even good old LiveJournal (yeah, that’s still a thing). The bigger corporations have a history of playing nice with other corporations, but they play especially nice with governments. They will not advocate for your privacy, or even for your life if you find yourself in that sort of situation.

Their PR teams might mutter something about human rights, but you’ll be human left-for-dead. (Sorry, I wanted to lighten the mood a bit.) In any case, most of these platforms probably don’t even want sensitive content associated with them, and will likely take it all down.

3. Hosting

So if you’re going to be buying hosting, here’s the criteria:

  • You want privacy nuts.
  • You want a hosting company that is willing to take the (legal) fight to whoever comes looking.
  • Ideally, it would be good if they believed in your cause, too. That will make them fight harder to protect your data.
  • You want your hosting to be in another country entirely. Distance is a good way of delaying people trying to track you down. It means less in this day of the Internet, but it still counts for something.

In general, these guys are pretty good options, and they’ve been around for some time:

It should be noted that secure hosting and adult-content-friendly hosting are not the same thing. If you need hosting for those racy memoirs or what-have-you-I’d-rather-not-know, you need to find a host that specifically allows you to host those things in their TOS.

4. Intermediaries

Now remember where I said to be careful who you trust? That still stands. Even so, you may find it incredibly helpful to find someone who can act as your intermediary. If you’re acting in a whistle-blower capacity, you might be able to find a foreign aid worker or activist to do things like help you buy hosting and domain names.

Having a third-party represent you can be indispensable to a smooth operation. But remember that if things are potentially life-threatening for you, it can also get hairy for them. You want someone either committed to your cause, or at least someone who is very, very far away.

If you’re just posting stuff that’s perfectly legal where you are, but still potentially embarrassing, you might use an attorney to handle these sorts of details for you. Attorneys are expensive, but that’s because their silence is worth it.

5. Location and Devices

Don’t write from home, if you can help it. If you’re going to write from home, at least don’t post things from home. Take your device to a separate network far away from where you live, do everything you can to mask your IP, and then post. Do this with different networks, preferably in places that forgo security cameras. This is the time to be most paranoid.

Purge your machine of your notes and rough drafts regularly, preferably right after you’ve posted. Secure your machine with a password only you know on the BIOS, and on the OS, and for God’s sake, use some form of Linux or UNIX-based operating system. Nothing you do will keep a dedicated person who has physical access to your device from breaking in, but you can delay them.

You might consider forgoing a laptop or phone altogether, and just have a USB drive with a Linux OS on it, and no persistent storage. That way, you can go to almost any computer, boot it up with the OS on your flash drive, write your post, and leave. No persistent storage means that your files will not be saved when you shut the computer down.

Now which OS should you use? You might try Tails.

6. Pay Your Taxes

No, really. Whether you’re exposing corruption in your own government, or just posting some artistic photos that conspicuously do not show your face, you need to live as legally and unobtrusively as you can in your day to day routine. It’s the best way to avoid unwanted attention. Remember, not even the Joker would mess with the IRS.

7. Extra Notes

VPNs

VPN services have gotten traction, recently, as more and more privacy scandals hit the airwaves. Most of them, however, are not all they’re cracked up to be. Many keep logs of exactly which traffic goes where, and so they are a weak point if anyone wants to track you down.

That said, you should probably still use one. Just pick one that doesn’t keep logs, and allows you to pay with anonymous options like cryptocurrency. Here’s a list of some of the better privacy-oriented VPNs.

Tor

Using Tor to anonymize your browsing can help, but remember that the network has been compromised before. It’s perfectly fine to use it so long as you realize it’s just one extra layer of security, and not a guarantee of safety.

That’s just what everything on this list is: a layer of security that can, with time, be peeled back. The rest is up to you.

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Categories: Designing, Others Tags:

Finding the right multipurpose WP Theme just got easier: here are the top 12 examples

April 19th, 2019 No comments

“Multipurpose”, “all-in-one”, and
“universal” tools and products. You
heard of them before. They have a reputation for doing some things well, and
other things not very well at all.

We bet you also proverbial “Jack of all
trades, master of none” saying applies. it no longer does so in the world of
multipurpose WordPress themes.

There are plenty of good ones out there.
Admittedly, each has its unique strengths and weaknesses. But as you narrow
your search to the best of the bunch, weaknesses are inconsequential.

Select one of these 12 multipurpose themes
for your next project and guess what will happen.

It will nail it!

They’re not only that good, they’re the
best.

1. Be Theme

When you go down the list of features of any premier multipurpose theme, you’ll usually like what you see. It feels good to have a theme that can handle anything you throw at it.

Be Theme’s list of features never seems to
end. Its 40 or so core features make Be Theme the biggest WordPress theme of
all.

The “key” features are naturally those you
have the most use for; but a key feature for every user is Be’s library of more
than 400 responsive, customizable pre-built websites. They cover 30+ different
business sectors, website types, and styles, and just about any business niche
you’re apt to get involved with.

Other features you’ll particularly like are
the new Header Builder, Muffin page builder, Options Panel, Layout Generator,
and Shortcode Generator. You’ll also have shortcodes and other design elements
and options galore to work with.

Download a pre-built website with a single
click, start building, and with Be Theme it’s not at all unusual to turn out a
fully-functioning website in as little as 4 hours.

2. Jupiter

Jupiter X is a total makeover of the popular Jupiter WordPress theme; the creation of Artbees, a member of the Power Elite Envato Hall of Fame. This new version is super-fast, powerful, scalable, and extremely developer friendly. With Jupiter, you can customize design and content elements that are normally difficult or impossible to customize in other themes.

Users can for example totally reinvent
their blog lists and portfolios, and the Shop Customize allows you to customize
online shop elements that in most other themes are simply off limits.

Headers and footers can be built from
scratch and you can customize every inch of your website using Jupiter X’s
powerful visual editor, and creating special forms, popups, and unique menu
styles is no problem at all.

3.
Uncode – Creative Multiuse WordPress
Theme

Visit the Uncode website and you’ll be introduced to its website-building features. Nothing new here. Virtually every WordPress theme, multipurpose or not, does the same thing.

Where Uncode, one of the ThemeForest’s top
selling themes, is different from the rest is its showcase of user-built
websites. You can actually see what others have been able to accomplish using
Uncode, and you’ll be impressed – and perhaps inspired as well. We highly
recommend visiting the Uncode site for this reason alone.

Uncode’s advanced adaptive grid system,
adaptive images system, and more than 200 option-rich design modules should be
mentioned however, as should the hierarchical options feature that gives you
total control over your layouts and design content.

4. Brook – Creative Multipurpose WordPress Theme

More than 150 exquisite pre-made layouts. More than 35 pre-eminent homepage designs. Blend in a premium responsive drag&drop page builder, a slider creator, and a host of intuitive design elements, we have Brook.

This multi-purpose creative theme features
a WooCommerce shop, numerable custom shortcodes, mega menus, one-page
scrolling, parallax scrolling, and many more to be listed. You’re invited to
pay a visit to their website for a full understanding of what Brook could do.

5. Kalium

This developer-friendly theme offers an impressive array of theme options, blog, header, portfolio types (7 main types with options – 30 in all), shop items, a one-click demo content import and a premium page builders such as WPBakery Page Builder or Elementor. Kalium is extremely easy to use and offers endless possibilities. You should in fact be able to showcase your work as you’ve always wanted to the first time you use this theme.

6. TheGem – Creative
Multi-Purpose High-Performance WordPress Theme

TheGem lays claim to being the ultimate web design toolbox, and everything we’ve seen about it would seem to support that claim.

With its 150+ stunning demos pages, 50+
multi-purpose design concepts, flexible page layouts, and other design aids and
elements, TheGem is a great choice for startups looking for a way to let the
world know what they have to offer, and a great choice for other businesses,
large and small.

7. Bridge

This #1 bestselling ThemeForest creative theme’s open-ended customizability feature, coupled with the premier WP Bakery page builder makes it a great choice for creating a website for virtually any business niche.

Other plugins add to this software tool’s
overall value as does its library of more than 376 pre-made websites that in
themselves guarantee to get any project off to a fast, solid start.

8.
Pofo – Creative
Portfolio, Blog and eCommerce WordPress Theme

Modern, crazy-fast, and search engine optimized pretty much describes Pofo. Its 150+ pre-built websites, ready-to-go home pages and 1-click demo pages give you all the website-building flexibility you need. Pofo really shines in three key areas – portfolios, blogs, and eCommerce applications.

This
multipurpose theme with its more than 200 layouts to work with deserves much
more than a casual glance.

9. KLEO – Pro Community Focused, Multi-Purpose BuddyPress Theme

One way to
describe Kleo would be to simply refer to it as an adventure. This professional
community-focused website gives you everything you need to create a happy
community of shoppers.

Blogs, portfolios, eCommerce, community
forums and eLearning features – you name it. Kleo is also compatible with most
plugins; extending your website-building capabilities even more.

10. Schema

This website theme gives you a little extra for your money. If you’re quite capable of building beautiful websites, but have trouble getting traffic, you can count on Schema to save the day. In addition to its selection of impressive website-building features,

Schema improves your page load times, has
clean code, and guides the search engines through your site element by element.

11. Movedo – We DO MOVE Your World

This 5-star top-rated theme contains a few surprises that you will not want to let pass by; if you feel your websites could profit from an extra dose of sparkle and pizzazz. MOVEDO is the website designer’s answer to a magic wand.

MOVEDO takes ordinary images and makes them
move and takes static images and makes them appear to move. Website users love
it, and you’ll have fun figuring out ways to entertain them.

12. Crocal – Premium WordPress Theme

Crocal is the new kid on the block, having joined the neighborhood last January. It performs like an established pro thanks to an absolutely amazing adaptive grid system.

Created by a #1 rated ThemeForest Elite
author, Crocal is Gutenberg compatible, WordPress and GDPR requirements
compliant, and eager to strut its stuff.

Conclusion

We’ve
made your search for a better multipurpose WordPress theme a lot faster and
easier. You’re quite not done yet. You still need to find the one that will
best suit your needs. Or, the one that will take a little extra time and some
careful thought.

Don’t worry too much about struggling to
make the right decision. You really can’t make a wrong one with this group.

Read More at Finding the right multipurpose WP Theme just got easier: here are the top 12 examples

Categories: Designing, Others Tags:

Faking env() to Use it Now

April 18th, 2019 No comments

There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with “The Notch” but it has made it’s way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.

That spec doesn’t seem to suggest how we’ll actually set those env() values just yet. If you want them now, the easiest way to fake them would be using regular ol’ CSS custom properties and simply not change them.

But if you want that env() syntax though, there is a PostCSS plugin for emulating it. The way the plugin handles them is through a JavaScript file that declares them.

postcssCustomProperties({
  importFrom: 'path/to/file.js' /* module.exports = {
    environmentVariables: {
      '--branding-padding': '20px',
      '--branding-small': '600px'
    }
  } */
});

Having them start life as JavaScript is interesting, as it means we could perhaps have a single place to set variables that are accessible both to JavaScript and CSS.

That’s what Harry Nicholls covers more in his article, “Why you should use CSS env()” like some gotchas when dealing with units and such. But if you really needed a single source for unchangeable variables in both CSS and JavaScript, then I’d say this is a good way to go — and could potentially be ripped out once support for env() formally arrives.

The post Faking env() to Use it Now appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Creating Reusable Base Classes in TypeScript with a Real-Life Example

April 18th, 2019 No comments

Hey CSS-Tricksters! Bryan Hughes was kind enough to take a concept from an existing post he published on converting to TypeScript and take it a few couple steps further in this post to elaborate on creating reusable base classes. While this post doesn’t require reading the other one, it’s certainly worth checking it out because it covers the difficult task of rewriting a codebase and writing unit tests to help the process.

Johnny-Five is an IoT and robotics library for Node.js. Johnny-Five makes it easy to interact with hardware by taking a similar approach that jQuery took to the web a decade ago: it normalizes the differences between various hardware platforms. Also like jQuery, Johnny-Five provides higher-level abstractions that make it easier to work with the platform.

Johnny-Five supports a wide array of platforms via IO Plugins, from the Arduino family, to the Tessel, to the Raspberry Pi, and many more. Each IO Plugin implements a standardized interface for interacting with lower-level hardware peripherals. Raspi IO, which I first created five years ago, is the IO plugin that implements support for the Raspberry Pi.

Any time there are multiple implementations that conform to one thing, there is a chance to share code. IO Plugins are no exception, however, we have not shared any code between IO Plugins to date. We recently decided, as a group, that we wanted to change this. The timing was fortuitous since I was planning on rewriting Raspi IO in TypeScript anyways, so I agreed to take on this task.

The goals of a base class

For those who many not be familiar with using class-based inheritance to enable code sharing, let’s do a quick walk-through of what I mean when I say “creating a base class to reuse code.”

A base class provides structure and common code that other classes can extend. Let’s take a look at a simplified TypeScript example base class that we will extend later:

abstract class Automobile {
  private _speed: number = 0;
  private _direction: number = 0;
  public drive(speed: number): void {
    this._speed = speed;
  }
  
  public turn(direction: number): void {
    if (direction > 90 || direction < -90) {
      throw new Error(`Invalid direction "${direction}"`);
    }
    this._direction = direction;
  }
  
  public abstract getNumDoors(): number;
}

Here, we have created a base class that we call Automobile. This provides some basic functionality shared between all types of automobiles, whether it’s a car, a pickup, etc. Notice how this class is marked as abstract, and how there is one abstract method called getNumDoors. This method is dependent on the specific type of automobile. By defining it as an abstract class, we are saying that we require another class to extend this class and implement this method. We can do so with this code:

class Sedan extends Automobile {
  public getNumDoors(): number {
    return 4;
  }
}

const myCar = new Sedan();
myCar.getNumDoors(); // prints 4
myCar.drive(35);     // sets _speed to 35
myCar.turn(20);      // sets _direction to 20

We’re extending the Automobile class to create a four-door sedan class. We can now call all methods on both classes, as if it were a single class.

For this project, we’ll create a base class called AbstractIO that any IO plugin author can then extend to implement a platform-specific IO Plugin.

Creating the Abstract IO base class

Abstract IO is the base class I created to implement the IO Plugin spec for use by all IO Plugin authors, and is available today on npm.

Each author has their own unique style, some preferring TypeScript and others preferring vanilla JavaScript. This means that, first and foremost, this base class must conform to the intersection of TypeScript best practices and JavaScript best practices. Finding the intersection of best practices isn’t always obvious though. To illustrate, let’s consider two parts of the IO Plugin spec: the MODES property and the digitalWrite method, both of which are required in IO Plugins.

The MODES property is an object, with each key having a human readable name for a given mode type, such as INPUT, and the value being the numerical constant associated with the mode type, such as 0. These numerical values show up in other places in the API, such as the pinMode method. In TypeScript, we would want to use an enum to represent these values, but JavaScript doesn’t support it. In JavaScript, the best practice is to define a series of constants and put them into an object “container.”

How do we resolve this apparent split between best practices? Create one using the other! We start by defining an enum in TypeScript and define each mode with an explicit initializer for each value:

export enum Mode {
 INPUT = 0,
 OUTPUT = 1,
 ANALOG = 2,
 PWM = 3,
 SERVO = 4,
 STEPPER = 5,
 UNKNOWN = 99
}

Each value is carefully chosen to map explicitly to the MODES property as defined by the spec, which is implemented as part of the Abstract IO class with the following code:

public get MODES() {
 return {
   INPUT: Mode.INPUT,
   OUTPUT: Mode.OUTPUT,
   ANALOG: Mode.ANALOG,
   PWM: Mode.PWM,
   SERVO: Mode.SERVO,
   UNKNOWN: Mode.UNKNOWN
 }
}

With this, we have nice enums when we’re in TypeScript-land and can ignore the numerical values entirely. When we’re in pure JavaScript-land, we still have the MODES property we can pass around in typical JavaScript fashion so we don’t have to use numerical values directly.

But what about methods in the base class that derived classes must override? In the TypeScript world, we would use an abstract class, as we did in the example above. Cool! But what about the JavaScript side? Abstract methods are compiled out and don’t even exist in the output JavaScript, so we have nothing to ensure methods are overridden there. Another contradiction!

Unfortunately, I couldn’t come up with a way to respect both languages, so I defaulted to using the JavaScript approach: create a method in the base class that throws an exception:

public digitalWrite(pin: string | number, value: number): void {
 throw new Error(`digitalWrite is not supported by ${this.name}`);
}

It’s not ideal because the TypeScript compiler doesn’t warn us if we don’t override the abstract base method. However, it does work in TypeScript (we still get the exception at runtime), as well as being a best practice for JavaScript.

Lessons learned

While working through the best way to design for both TypeScript and vanilla JavaScript, I determined that the best way to solve discrepancies is:

  1. Use a common best practice shared by each language
  2. If that doesn’t work, try to use the TypeScript best practice “internally” and map it to a separate vanilla JavaScript best practice “externally,” like we did for the MODES property.
  3. And if that approach doesn’t work, default to using the vanilla JavaScript best practice, like we did for the digitalWrite method, and ignore the TypeScript best practice.
  4. These steps worked well for creating Abstract IO, but these are simply what I discovered. If you have any better ideas I’d love to hear them in the comments!

    I discovered that abstract classes are not useful in vanilla JavaScript projects since JavaScript doesn’t have such a concept. This means that they are an anti-pattern here, even though abstract classes are a TypeScript best practice. TypeScript also doesn’t provide mechanisms to ensure type-safety when overriding methods, such as the override keyword in C#. The lesson here is that you should pretend that abstract classes don’t exist when targeting vanilla JavaScript users as well.

    I also learned that it’s really important to have a single source of truth for interfaces shared across modules. TypeScript uses duck typing as its core type system pattern, and is very useful inside any given TypeScript project. However, synchronizing types across separate modules using duck typing turned out to be more of a maintenance headache than exporting an interface from one module and importing it into another. I had to keep publishing little changes to modules until I got them aligned on their types, leading to excess version number churn.

    The final lesson I learned isn’t a new one: get feedback throughout the design process from library consumers. Knowing this going in, I set up two primary rounds of feedback. The first round was in person at the Johnny-Five collaborator’s summit where we brainstormed as a group. The second round was a pull request I opened against myself, despite being the only collaborator on Abstract IO with permission to merge pull requests. The pull request proved invaluable as we sifted through the details as a group. The code at the beginning of the PR bared little resemblance to the code when it was merged, which is good!

    Wrapping up

    Producing base classes destined to be consumed by both TypeScript and vanilla JavaScript users is a mostly straightforward process, but there are some gotchas. Since TypeScript is a superset of JavaScript, the two mostly share the same best practices. When differences in best practices do arise, a little creativity is required to find the best compromise.

    I managed to achieve my goals with Abstract IO, and implemented a base class that serves both TypeScript and vanilla JavaScript IO Plugin authors well. Turns out, it’s (mostly) possible to have your cake and eat it too!

    The post Creating Reusable Base Classes in TypeScript with a Real-Life Example appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

An Event Apart Boston is Coming. Save Now!

April 18th, 2019 No comments

(This is a sponsored post.)

An Event Apart Boston is almost here! We’re talking, like, less than a month away. If you’ve been holding off from registering, this might be your last chance because time and seating are both limited. Besides, we’re talking about three days of pure knowledge-dropping by an impressive lineup of speakers on a wide range of topics. Seriously, just look at the full schedule and prepare to be get stoked for a great time.

But, if a couple of weeks until show time is a little too tight for your liking, that’s where An Event Apart has you totally covered because there’s another one taking place in Washington D.C. this summer. And three more throughout the rest of the year in Chicago, Denver and San Francisco.

The reason an Event Apart is so near-and-dear to the CSS-Tricks family is that it scratches a common itch that we see come up around here often: how can we possibly stay on top of our careers as front-enders when our industry is changing at lightning speed and when we’re all-consumed trying to keep on top of our actual jobs? An Event Apart is our chance to take intention time away from the day-to-day and invest in our careers by learning from some of the best in the business, meeting folks who do what we do, and having those micro-interactions with others in the hallways that spark the interesting types of dialogues you just can’t get from Twitter.

Think about it: 17 speakers over three days covering everything from design systems and Progressive Web Apps to variable fonts and CSS Grid Layout. There’s so much to gain by attending. Just look at the awesome takeaways Chris got from An Event Apart Seattle in March.

And, to sweeten the pot, An Event Apart gave us a special discount code for CSS-Tricksters like yourself. Enter the AEACP at checkout to knock $100 off the price.

Hope to see you at one of the upcoming events!

Register Today

Direct Link to ArticlePermalink

The post An Event Apart Boston is Coming. Save Now! appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Why Don’t We Just Use Material Design?

April 18th, 2019 No comments

I work out of a small office in a co-working environment. Next to my dedicated space is a hot-desking area used primarily for video conferencing. Thanks to a bank of west-facing windows, an overenthusiastic heating policy, and unseasonably hot weather, meetings are often conducted with the doors open, and it’s then that I overhear some of the most engrossing insights into the minds of both clients and designers, that I’ve ever encountered.

Last week, as I munched on my lunch, I was eavesdropping on a meeting to determine the design direction of a fairly well known site (that will remain anonymous). The owner was connected from Australia, there were high-up members of the team connected from the US, and the UAE, and the design/dev team was about 10ft from me.

The conversation was increasingly heated, and centered around the fact that one of the design team had been removed from the project: such-and-such was a great person, and really dedicated, but her design style was all wrong; things had gone off the rails since such-and-such left; such-and-such did beautiful work, but it didn’t test well with users; and so forth.

Material Design…is seen as the standard to aspire to

The management team were clearly desperate to uncover a new design direction in which to take the service, and the design team were clearly desperate to accommodate them. After several hours of back and forth based on little (as far as I could hear) but subjective opinions, someone uttered a phrase that almost made me crash the meeting with subjectives of my own:

“Why don’t we just use Material Design?”

I’m not sure who said it, but it sounded like it was in the room. What followed was a cacophony of praise for Google’s design system: The designers admired it, the one developer I could identify loved it, the owner hadn’t heard of it but loved Google’s business model, the UX Lead—who until this point, I hadn’t heard contribute anything, said it was the “ultimate refinement of human-centered design”.

Five minutes later the meeting wrapped, a design direction chosen, a design team clutching a set of guidelines, a development team mentally mapping components. Leaving me, watching in horrified fascination as they filed back to their respective offices.

An Unhelpful Question

Material Design is astronomically popular. So popular in fact that I’ve spoken to numerous designers who refer to their work as “Material Design” when they have either never read the specification, or are ignoring it entirely.

Of course, there’s no reason that designers should implement Material Design. It’s simply an indication of its omnipresence that it is seen as the standard to aspire to.

The question posed in that meeting (Why don’t we just use Material Design?) reverses the design process in a way that epitomizes the problem with any design system. The question that should have been asked was: “Would employing Material Design solve some, or all, of our problems?”

If It’s Good Enough For Google

There’s an assumption that Material Design, as published by Google, is a magic bullet that addresses most, if not all, challenges in modern web design. I think that assumption probably stems from the fact that the Material Design specification is well written, and feels authoritative. I also think that assumption is false.

Material Design was initially intended as a solution to Google’s design problem—unifying a disparate group of services and apps, into a single brand identity and experience. It is now described as “a comprehensive guide for visual, motion, and interaction design across platforms and devices.” Which you have to admit, sounds pretty awesome.

when the insects take over the earth there will still be Google products about to receive their long-awaited Material Design upgrade

Just last week, there were reports in the design news that another Google product was about to receive its long-awaited Material Design upgrade. It doesn’t matter when you’re reading this, when the insects take over the earth there will still be Google products about to receive their long-awaited Material Design upgrade.

At the time of writing, it’s been five years since Google went public with Material Design. In that time, Google’s products have been constantly revised. Anything that hasn’t been updated in five years is probably at least mothballed— Google is far from shy when it comes to killing off projects.

If Google itself struggles to implement Material Design, and it has the get-out-of-jail-free card of writing (and rewriting) the specification with its own product demands front and center, how difficult is it to apply it to a third party site or app?

Don’t Even Get Me Started on That Floating Button

Probably the most controversial element of the Material Design specification is the floating call-to-action button that hovers in the bottom right of the screen, joyfully obscuring the single piece of content you are trying to access.

Material Design, means restructuring the architecture of your site

Design thinking is split on the floating action button, and anecdotally I’d say it’s roughly an even split. Some designers love the forced simplicity of a single call-to-action button imposing a primary action on a screen. Other designers object to an over-simplified user journey when natural experiences tend to be more nuanced.

In many cases implementing Material Design, means restructuring the architecture of your site or app. In other words, for the sake of an aesthetic your project needs to conform to Google’s preferred approach.

When all You’ve Got is Material Design, Everything Looks Like Gmail

There’s truth in the pop-wisdom that, when all you’ve got is a hammer, everything looks like a nail.

we’ll look for problems that don’t exist, in order to explain the solutions we have to hand

There are as many design approaches as there are designers and it would be preposterous of me to say “design is…” and expect it to be universally true. However, design, when done well, isn’t about putting a shiny polish on a project, design is inherent to what the project is, and to what it aims to become.

By framing a project in Material Design — or to any other design system — we are presented with a set of answers to which, as rational cause-and-effect minds, we will try to find questions. This means two things: firstly we’ll very likely distort our problems to fit those solutions because they’re the only solutions available that don’t break the specification; secondly we’ll look for problems that don’t exist, in order to explain the solutions we have to hand.

Why Don’t We Just Use Material Design?

Material Design is a design system, not the design system. Its failings are the failings of all design systems when applied to third party projects; namely that it is driven by a different, often undisclosed, set of priorities.

Of course, it’s entirely honest to confess that many designers dislike Material Design because it’s mind numbingly boring to implement someone else’s ideas. After all, we didn’t get into design to abandon creative thinking in favor of a paint-by numbers, one-size-fits-all approach.

Personal preference aside. We shouldn’t be using Material Design, because it puts the cart before the horse. It is a set of solutions to someone else’s set of problems. It may eventually work for Google, but it won’t work for you.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Categories: Designing, Others Tags:

Don’t Make These Beginner Designer’s Mistakes

April 18th, 2019 No comments
Designer's Mistakes

“The customer only cares about money and earnings, while the designer only cares about being able to publish a good job on Dribble or Behance.”

This is a concept that I saw represented in a viral video, produced by Pixelo showing the differences between the designer and the client. Things like “the customer wants bright colors at random, the designer chooses a well-considered palette”, etc.

As soon as I saw this part about money, though, I said to myself: is that really true?

Are there really so many designers who only think about their image return and not about improving their customers’ business?

Absolutely yes. Full.

And this led me to write this article in which I talk about what I think is the biggest mistake a freelancer designer can make when dealing with a client.

Why the biggest mistake?

Because if you ignore the side of the business in your work as a graphic designer, web designer and designer in general, you are ignoring half of your work.

Let’s start by first understanding what design is:

What is design?

But wait, are you serious? I’m a designer / studio design! Do you expect me not to know what design is?

Of course, we all know what design is.

True, design is planning. But what is missing in this definition is that design is planning… on commission.

Design is not art as an end in itself. Design, as well as graphics and communication, serves to sell! Excuse me if I write it so directly, but it helps those who have a business to make more money. Communicating better and therefore selling better.

I know this can be a “blow” for all those with the romantic idea of ??design as something artistic, abstract and maybe even a bit poetic.

Design = Business.

Design = Marketing

If you don’t understand this, or pretend you don’t understand it, you’ll always be a half designer. Or rather, you will be a designer who will not be able to help your client 100%.

Design = Business. Why is this so important to understand?

It is important to understand this if you want to succeed as a freelance designer. Because customers are always people or groups of people who relate to their company and only pay for the things that interest them.

The customer doesn’t care if the project comes out cool enough to be published on Behance.

The customer is only interested in how and how much you can help them improve their business. To make more money.

And rightly so.

This is an aspect that many designers do not understand. They don’t understand it when they ask for a €1000 logo for a local non-profit association, they don’t understand it when they create a project that is cool for them but doesn’t consider the client’s business needs and they don’t understand it when they complain because it does relate to the customers.

Want to be one of those freelancers?

If you’re reading this article up to this point, I’d say it’s not what you want to do, is it?

The solution to the problem: change your mentality

The best way to solve this problem of approach with the customer by the freelancer designer is to have a sudden change of mentality.

Such as? Try following these 2 practical tips:

1. Stop considering customers as piggy banks

Stop considering the customer as someone to get as much money as possible and then adios! Start looking at it as a resource. Start thinking long term about how you can extend your working relationship over time to help both.

Start thinking about how you can help your client in every aspect that competes for you in terms of communication or design. Even if they are small consultancies that go slightly beyond the contract you signed.

When I am commissioned to do a job (and accept it) I find myself very often talking to the client about future prospects and ideas that I’ve come up with. Even if they choose not to hire me in the future, at least I’ve shown that I’m willing to continue working with them, and it’s not just about the paycheck. It’s about helping them succeed.

I believe it is part of my job to help my client’s business in every possible way.

And this attitude has led me to have customers who come to me for all the jobs after the first one, creating a constant revenue stream and a solid working relationship.

2. Start thinking of yourself as a company and not as a freelancer

And by this I don’t mean that you go to interviews with customers and pretend to be the head of a company with 50 employees.

But it is certainly true that your freelancer business is not like an employee’s. Your business is actually a business.

You have to think about accounting, income, expenses, taxes, bills to pay and salaries (yours). All aspects that make you a business.

So why not have the same kind of attitude?

Why not develop long-term working relationships that allow your company to support itself? Why not develop products and activities for customers? Why not introduce yourself as the manager of your own company instead of as the freelancer who “you tell me what I have to do and I do it”?

In short: you too are a company, act as such!

Take care of your personal brand, build your bomb-proof portfolio, create your own blog with the most effective case studies you’ve worked on, networking at events and meetings, proposing yourself as the manager and not as the executor.

Conclusion

At the end of this article I hope I made you change your mind at least a little about the kind of attitude with which to approach the world of freelancer work and maybe give you some interesting and useful ideas for your career.

In summary: design is a business, the customer has a business and thinks only of that and how you can help them make more money. You are in business as a freelancer, which means you should take every opportunity to help your customer succeed.

Read More at Don’t Make These Beginner Designer’s Mistakes

Categories: Designing, Others Tags:

Clever code

April 17th, 2019 No comments

This week, Chris Ferdinandi examined a clever JavaScript snippet, one that’s written creatively with new syntax features, but is perhaps less readable and performant. It’s a quick read, but his callout of our industry’s fixation on cleverness is worth… calling out:

…we’ve become obsessed as an industry with brevity and clever code, and it results in code that’s sometimes less performant, and typically harder to read and make sense of for most people.

He made a similar argument late last month when he wrote about code readability, noting that brevity might look cool but ultimately leads to all sorts of issues in a codebase:

Often, web developers are obsessed with brevity. There’s this thing were developers will try to write the same function in the fewest number of characters possible.

Personally, I think brevity is pointless. Readability is a lot more important.

I entirely agree with Chris on this point, however, I think there is one important distinction to make and that’s the difference between code that’s intended as a prototype and code that’s intended for production. As Jeremy Keith argued a short while ago:

What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.

I agree with Chris that we should be writing code that is easy to read when we’re in production. I also think experimenting with code in this way is a good thing when it comes to prototypes. We shouldn’t ever shy away from playing with code and pushing things a little bit – so long as we’re not doing that in a giant web app with a a team of other developers working alongside us.


I’ve noticed that there are some folks that are doing genuinely ingenious things with Sass. I consistently sit back and think, “Wow, I’ve never seen anything like this before.” But when it comes to a production web app that has to be understood by hundreds of people at the same time, I don’t believe that this is the reaction we want when someone looks at the code.

As a result, I’ve been trying to write Sass code that is actually so simple that it almost looks dumb. One easy way to make code a lot simpler is to reduce the amount of nesting:

.element {
  .heading { ... }
}

This looks fine when there’s code inside — and it’s pretty easy to understand — but add a complex bit of design in the mix (say, using pseudo elements and media queries) and you suddenly have a rather complex set of rules in front of you. Creativity and cleverness can be harder to scan and identify one small part of the code that you’re looking for. Plus, in this example, we’ve unnecessarily made our .heading class a little bit more specific which might encourage us to override things in a hacky way elsewhere in the codebase.

We could write the following:

.element { ... }

.element-heading { ... }

I know this looks foolishly simple but the relationship between these two classes is easier to see and easier to extend in the future. Bundling all that code into a single nested class can get out of hand real fast. Even if it happens to look a lot cooler.

(As an aside, Andy Bell’s post on using the ampersand in Sass — and the resulting comments — is a great example of the clash between creativity and practicality.)

Anyway, the point I’m trying to make here is that CSS (and JavaScript for that matter) is a strange language because there are no definite rules you can make about it. It all really depends on the codebase and the project. But I think we can safely say that our code ought to be a lot more boring than our prototypes when it moves to production.

Continue to make prototypes that are wild and experimental or impossibly weird! Code quality be damned.

The post Clever code appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Famous Fonts Used by Powerful Companies

April 17th, 2019 No comments
famous fonts

Have you ever wondered what the most used fonts in the most famous logos are? Those logos that happen to be seen hundreds of times, repeated on all the screens, shirts and sheets of paper that surround you.

Well, then this article is made just for you!

In fact, in this article, I want to talk to you about which fonts are used in some of the most famous logos ever.

We’re going to try and understand why these specific fonts were chosen. Because choosing a font is not a simple thing, and behind the choice of a font, there is a very precise message that any brand wants to convey.

In this article, I wanted to analyze 6 fonts in depth.

Ready? Then let’s get started!

A little clarification before starting: many famous brands use private fonts

Almost every major brand opts for a custom font. Of course, these fonts aren’t generally available to the public.

Very often, however, these proprietary fonts are based on already existing and already famous characters. And in a lot of cases, custom fonts that you can purchase or even download for free follow suit shortly after.

Now, let’s really get into it!

What font does YouTube use in its logo?

Bold and tight, the Alternate Gothic was designed by Morris Fuller Benton in 1903 for the American Type Founders Company.

It is a font with a long history, designed at the beginning of the 20th century so that it could be perfect to insert titles in narrow columns.

It was the font used in the YouTube logotype until a few years ago (August 2017, to be precise) when YouTube rebranded. Since then, they’ve used a custom font called YouTube Sans.

Famous Fonts

This font was designed from scratch, by the Saffron branding agency, starting right from the shapes and aesthetics of the Alternate Gothic used previously.

Why was this font chosen?

This current one, according to what the Saffron designers write, was chosen to “communicate its brand with only a glance”, that is, to be able to immediately communicate that it is YouTube.

With this, being a reference to the Alternate Gothic that they used previously, the recognition of the brand is strengthened.

But why had the Alternate Gothic been chosen?

Nobody can really say for sure. Most people speculate that it was chosen because of its super easy readability. Being a massive international company, readability in the logo font is a must.

It was designed for editorial use in the minuscule dimensions of column headings but also in the enormous dimensions of the main titles. And so it was readable in every dimension.

What font does Adidas use in its logo?

L’Avant Garde, which in French means cutting-edge, is one of the most influential of the 900 fonts. Created in 1970 by Herb Lubalin (along with Tom Carnase), it was introduced into the font family. Its original intention was to be in the logo of their magazine, which was called “Avant Garde”.

The forms of the Avant-Garde recall very much the natural elegance of the Art Deco of the 1920s and 30s. While transmitting a vintage effect, it is nevertheless able to tell it always in a contemporary way, thanks to its flexibility and naturalness.

In reality, however, the font used in the Adidas logo is not the Avant-Garde.

Here too, it is a proprietary font, AdiHaus. A font inspired, of course, by the Avant-Garde but also by the FF Din (one of my absolute favorites).

Why was the Avant-Garde / AdiHaus chosen?

The Avant Garde was chosen in 1971 by the designers who worked on the first restyling of the Adidas logo.

Famous Fonts

It was chosen both because it was a font very similar to the one originally designed in ’49, and, I believe, because of its qualities: elegance, naturalness, cleanliness.

What font does Nike use in its logo?

The Futura is one of the most important and influential typefaces in the history of graphics.

Designed in 1928 by Paul Renner, it is now considered the geometric font par excellence.

And it is also used, among the multitude of applications, for the Nike logo.

In particular, in the Bold Condensend Oblique version.

Even more specifically, in the Bold Condensend Oblique version, but with some substantial changes regarding the inclination and kerning (the space between the glyphs).

Why the Futura?

Famous Fonts

Because, like the “whisker” of the logo, the chosen font also transmits a message: strength (the bold version), dynamism (inclination), stability (the geometry of the Futura).

And it tells, along with with the rest of the image, a very clear message: Nike is a strong brand, buy Nike and you will be strong too.

What font does Instagram use in its logo?

Instagram, in its new logo of May 2016, does not use a real font.

Before now, the Instagram logo was made using the Billabong font. This is a 2006 script font, which has nothing special, other than the fact that it is the font of the Instagram logo.

In 2016, however, there was the famous Instagram rebrand (extremely criticized at the beginning, but now most people think it’s amazing) in which the logo has also changed.

The new logo was created without using any files, no fonts. It is simply designed to be the word “Instagram”.

It was designed by Mackey Saturday starting from the Billabong font, so that it was more functional and harmonious than the previous one while maintaining some characteristic elements.

Why this font?

Famous Fonts

Here the answer is simple: because Instagram was born as an application that presented itself as something dynamic, fun, and energetic. That font exactly reflected the kind of message they wanted to convey.

What fonts does Linkedin use in its logo?

Very little is known about the Linkedin brand choices, in reality. There are no real studies of designers or agencies that have worked with them, nor is there any mention in the brand manuals.

What is known is that the font used in the logo is certainly the Avenir (at least from 2012 onwards, before it was the Myriad Pro).

The Avenir is one of the many wonderful fonts designed by the extraordinary Adrian Frutiger, in 1988.

It is undoubtedly one of the typefaces I like most. He is able to combine the geometric shapes of the sans serif of the 1920s (such as the Futura), with the more natural and flexible forms of the grotesk characters of the late 1800s (such as the Akzidenz Grotesk) and the post-World War II period (like the Univers, always by Adrian Frutiger).

Why this font?

Because it inspires respect and professionalism. Exactly what a working network like Linkedin wants to convey.

Famous Fonts

Few other typographical choices would be so suitable.

What font does McDonald’s use in its logo?

McDonald’s has been using for years what is among the most important and today undervalued fonts in the history of graphics: the Akzidenz Grotesk.

It is extremely readable, simple, flexible and of great impact.

It was produced by the German foundry H. Berthold AG in 1896 by an unknown author. The current version available is the one reworked by Günter Gerhard Lange in the 1950s.

Why is it so difficult to recognize it? Well, because it is the base on which some of the most used and known fonts have been built today. Like Helvetica, Univers, Arial, Frutiger, all inspired by the ancestor Akzidenz.

Famous Fonts

Why exactly this font?

First of all, in my opinion, because it is very beautiful.

But then, I believe, also because it represents tradition, history. Which at McDonald’s, at the beginning, was very interesting to tell.

Conclusion

In this article, I wanted to talk about the font choices of some of the most famous brands in order to give you creative ideas for choosing a font for your project.

Analyzing what other designers have done before you is crucial.

But even more fundamental is trying to understand the reason for certain choices. What did they want to communicate? Why that font instead of another?

The choice of a font is, in fact, a crucial aspect in the process of creating a logo but also in any other aspect of graphic design.

Read More at Famous Fonts Used by Powerful Companies

Categories: Designing, Others Tags:

The 6 Principles of UX

April 16th, 2019 No comments
UX

If you are approaching the world of UX or you are already a navigated UX / UI Designer, then this article, in which I am going to talk about 6 principles that every UX Designer should know, is designed for you.

In this article, I want to deepen the discussion on what the founding principles of UX are and cause us all to think a little outside of the box.

The principles of UX: first of all, we need to know the people

Designing the experience of any product (physical or digital), or a service, means putting the user at the center of the project and then applying a user-centric thought.

Before getting in front of a computer, designing UX means knowing the people for whom we have to design and empathize with them through all our senses. It means observing them, listening to them, asking them questions; it even means smelling the smells of the context in which they live: yes, everything becomes fundamental!

Since birth, we have had 5 powerful tools that allow us to interact and retrieve information in the world we live in: the senses. Without them it would be impossible (or very complicated) to move independently in the spaces that surrounds us.

User Experience

Precisely for this reason, understanding how people interact, through the senses, in the area in which we are going to treat their experience as users, is fundamental.

So if we need to know people to make UX, who can help us do it correctly?

The most correct answer is certainly psychology. In particular, some strands that have focused more on the study of human perception and experience.

Obviously this does not mean having the presumption of knowing it all! However, having familiarity with some theories and principles helps the designer to understand (first) and design (after) the most comfortable and rewarding experience for their user.

Here I would like to start with some key principles that govern the interaction between man and the real and / or virtual world. There are not many, but they are sufficient to determine the success or failure of the products with which we relate every day.

The most fascinating thing (for a UX Designer, of course) is that these theories apply to any existing object, and sector, that can come to mind.

To start talking about it – though – it is necessary to reference one of the fathers of this discipline who theorized them, and who presented himself with the title of the first UX designer.

The 6 ” never again without” UX principles.

Donald Arthur Norman, a US psychologist and engineer, along with another guru and his partner Jakob Nielsen, has dedicated himself to the research and study of ergonomics, design, and more generally of the human cognitive process. He based his analysis on anthropocentric design, bringing together two fields that, at the time, did not communicate: technology and psychology.

In the well-known book The Coffee Maker of the Masochist , the “bible” for the true aspiring UX designer, tells the deduction of the principles of usability and ergonomics that govern our world since ancient times. Subsequently, in a second text equally worthy of mention, Emotional design , Norman maintains that a product capable of stimulating positive emotions – through an experience – is perceived as “more beautiful” and “better functioning”.

30 years have passed since the publication of his first text, yet the principles listed are still alive and well, and most definitely put into practice today.

Let’s walk through them together:

1. Affordance

The affordance (which we could translate with “invitation”) is defined as the physical quality of an object that suggests appropriate actions to manipulate it.

As Norman writes,

Perceived affordances help us guess what actions are possible, without the need for signs or instructions.

In interactive design affordance is the first fundamental rule: being intuitive. That is, the interface must be understandable from the first glance, without needing instructions (labels, texts, CTA, and so forth).

User Experience

2. Significance

The signifiers are “elements” that enrich an object, telling the intrinsic meaning of the same. In other words, they signal the possible actions through that object and how to execute them. They have the task of triggering the Feedforward, which means anticipating exactly what will happen.

The signifiers must be perceptible, otherwise they do not work.

User Experience

– Donald Arthur Norman

A classic example is the anti-panic door handle, you don’t need to know it or even accompany it with the word “push”. There is only one correct way to use it.

In interactivity, in order to exploit the concept of signifiers, you have to be careful not to make two serious mistakes :

  1. The signifiers that do not make sense: that is, the use of texts (in call-to-action) that do not clearly tell the action or page that the user is about to visit. To give an example just think of the superfluous Click here, which turns out to be a real tautology. It is obvious that a button needs to be clicked, tell me what happens if I do it! Another similar example of significant error is the Discover more, often inserted too generally in texts, videos or CTAs. As Yvonne Bindi, information architect and expert in language and communication, writes in his “Language design. Guide to the usability of words for communication professionals”:

    ” Discover thus becomes an empty navigation word, all too obviously borrowed from marketing.”

  2. The excess of icons: In visual design, the overabundant use of icons, or icons that are forced where they aren’t necessary, gives rise to what is called visual pollution. The user is overloaded with information and is therefore impaired in the use of the product. The icon is useful when alone it represents something unequivocally, without being accompanied by texts. It is also necessary to pay close attention to cultural conventions.

3. Mapping

How many times have you mistaken the light switch or the cooktop knob?

Here, it means that there was a mapping error in the design phase.

The mapping principle indicates the relationship between two things. For example, between the operation of a key and its effects. A good mapping takes into account the cultural models learned or spatial analogies.

Let’s think about activating the directional arrows of a car.

To indicate the right, move the lever upwards (making a semicircular movement to the right) and vice versa for the left, move the lever downwards.

Norman writes:

When the mapping uses the spatial correspondence between the placement of the commands and that of the commanded devices, it is easy to understand how to use them.

In web design the mapping is extremely linked to the signifiers and is conveyed by the position and behavior of the elements. The most classic example is the vertical scroll on a screen, which indicates where you are compared to the page. As you drag it down (or up) the page moves at the same speed, maintaining the place of positioning in space.

4. Constraints

The limits are divided into physical, cultural, semantic and logical, depending on the context, but define, with the same force, “obligations” that guide the user along a path.

In an interface, the constraints can be obvious, like the physical ones of the screen size, or more refined ones, like the logical ones of a deactivated icon.

They are logical constraints of anticipation, like the images half inside the screen and half outside, which allow us to intuit a slideshow and swipe. Or the visualization of the steps of a process, for example during the checkout of an e-commerce sale, which allow the user to immediately understand the correct path to follow to get to the end.

5. Feedback

The feedback (which we can translate as a “response”) is a return message from an object that tells us that our action has been implemented.

Norman points out to us that

The feedback must be immediate, even a delay of one tenth of a second can be disconcerting.

User Experience

Every day we receive feedback from the products / services we use: the light on the button of the elevator, or of the pedestrian traffic light, or of the coffee machine. They allow us to have confirmations, without groping in the darkness of uncertainty.

Also and above all, feedback is fundamental on the web. When we select a folder with a mouse click, for example, the folder takes on a different color, which tells us that the system has learned our request. If, on the contrary, this type of feedback does not occur, we would continue to click spasmodically on the folder, in the grip of a sense of frustration (why does it not open?!).

6. Conceptual model

A good example that helps us understand are the icons of files and folders on your computer. In the computer there are really no sheets or folders, but the concept of a “binder” (recovered from the way we organize things in reality) facilitates understanding and interaction.

Interactive design, as we have just understood, makes extensive use of this principle. In association with the signifiers (Home = house, Size = scissors, Funnel = filter), the conceptual models allow us to associate a virtual action with one that we perform in everyday life, and therefore more concrete, for an immediate and simple understanding.

In the design phase it is important to take into account the fact that, as in reality, even in the virtual experience users expect a similar response to that which they experience in everyday life.

Conclusion

Norman’s 6 principles are timeless because they are based on human psychology, and applying them in design is a way to ensure a significantly higher level of usability and clarity.

But I must be honest in telling you that they are not the only ones and it is not enough to know only these. There are other very interesting theories that explain the complex but fascinating way in which people act in front of daily stimuli.

And above all, remember that, although it may seem complicated at first, becoming a UX designer is a journey that must be cultivated day after day. (As with everything).

Pay attention to every experience you go through because each of them pays a small roll in the way a designer, whether they be UX or otherwise, conducts themselves and their work.

Read More at The 6 Principles of UX

Categories: Designing, Others Tags: