Great resource for brand guidelines

Find Guidelines on the Web website

  • Want to know the design differences between Apple’s iOs6 and IOs7?
  • Need to know LinkedIn’s brand guidelines?
  • How about getting Twitter’s .eps logo? Or understanding the ways that logo can be used?

 

Find Guidelines on the Web is a fabulous resource for finding many of the top brand names on the web right now.

Some of the brands featured:

  • Behance
  • LinkedIn
  • Apple iOs
  • Twitter
  • Vine
  • AirBnB
  • Android
  • Google
  • Mailchimp
  • WordPress

 

 

CoCo’s website very early draft

There are some roadblocks in CoCo’s redesign progress. We need the organization to complete the content analysis. And then we need to figure out the new site map.

In the mean time, I wanted to sharpen my “Layout in Photoshop” skills so I mocked up a very rough draft of a page. I can see from my layout that it needs a lot of work. I feel like it’s very bland. But it’s a good way for me to get some practice in Photoshop.

Early and rough draft of a CoCo home page created in Photoshop.
Early and rough draft of a CoCo home page created in Photoshop.

Lynda.com has great UX Tutorials

How about listening to something education while you are at work? Lynda.com has a lot of great video tutorials on a lot of subjects – like UX, web design and business. I saw this slide on one of the courses the other day and thought it was a great reminder to share. When working on a UX project, one will often go through these phases:

This illustrates the basic steps of the product development life cycle.
This illustrates the basic steps of the product development life cycle.

This particular slide was found in “Foundations of UX: Content Strategy with Patrick Nichols” and is often referred to as the product development life cycle.

Check it out. You just might learn something!

The difference between UX and UI

I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.

User Experience

  • UX is the overall experience one has with a product or service, which can include a UI.
  • User Experience is how they feel when they look at the site, aka the broad scope.
  • The interaction itself
  • Includes interfaces
  • Addresses all aspects of a thing as perceived by a person
  • UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
  • UX-er is known as the primary user-advocate on a team
  • UX informs creative
  • Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
  • UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
  • Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
  • The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
  • One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.

User Interface

  • UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
  • User Interface design is the part of the product that faces the user when he looks at the site.
  • A tool
  • A point of interaction
  • A means of communicating between a person and a system
  • UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
  • The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
  • The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
  • GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
  • Interaction Design is the grey area between UX and GUI design.
  • Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
  • Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
  • User Interface (UI) Design generally refers to the user facing side of any type of physical interface
  • A UI designer is responsible for everything that a user will see on the interface.
  • UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
  • One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
  • UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
  • A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
  • The very minimum:
  • Learn HTML & CSS. Learn Photoshop. Learn basic typography.  Learn basic color theory.  Learn about layout.  Get a feeling for producing UX deliverables.  Learn about usability evaluation methods.  Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.