Pixel Hinting Vectors in Photoshop

Article: Source

Working with vectors in Photoshop provides extreme flexibility, but challenges can arise when anti-aliasing kicks in, particularly when your documents are at 72dpi. Learning how to utilize the pixel grid and becoming comfortable working at high zoom levels in your documents is a requirement if you want to make sure your vector elements are a maximum crispness. I walk through taking a logo from Illustrator into Photoshop and my process for cleaning up the logo’s edges. This is Photoshop geekiness at it’s finest! 

Pixel Hinting. Article: Source.

Unlock the 007 in you. Coke Zero challenged unsuspecting train passengers to unlock the 007 in them for their chance to win exclusive tickets for the new James Bond movie SKYFALL. Article: Source

NEO Window Shopping. [adidas NEO] is taking window shopping to a new level with an interactive digital window concept that connects to your smartphone. Now it is possible to shop at our store after hours without an app or scanning a QR code. Article: Source

IBM Flashing Zebra Crossing. Article: Source

The 100% Easy-2-Read Standard

Article: Source

by oliver reichenstein

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small. So…

Screen vs. magazine: 100% is NOT big; image by Wilson Miner.

Don’t tell us to adjust the font size

We don’t want to change our browser settings every time we visit a website!

Don’t tell us busy pages look better

Crowded websites don’t look good: they look nasty. Filling pages with stuff has never helped usability. It’s laziness that makes you throw all kinds of information at us. We want you to think and pre-select what’s important. We don’t want to do your work.

Don’t tell us scrolling is bad

Because then all websites are bad. There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

Don’t tell us text is not important

95% of what is commonly referred to as web design is typography.

Don’t tell us to get glasses

Rather, stop licking your screen, lean back (!) and continue reading in a relaxed position.

Five Simple Rules

1. Standard font size for long texts

The font size you are reading right now is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display.

We don’t want to click bigger or smaller buttons and we don’t want tochange our preferences. We want to read right away. We want you to adjust to our settings, and not the other way around.

Initially it is more difficult to create a good layout with a big font size, but that difficulty will help you design a simpler, clearer site. Cramming a site with information isn’t difficult, but making it simple and easy-to-useis. At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

2. Active white space

Let your text breathe. Using white space is not a designer’s nerdy issue. It’s not about taste.

“The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.”
Josef Muller-Brockmann, Grid Systems

Having air around the text reduces the stress level, as it makes it much easier to focus on the essence. You don’t need to fill the whole window. White space looking nicer is not a side effect: it’s the logic consequence of functional design. Who said websites need to be crammed with stuff?

Muller-Brockmann: “The question of the column width is not merely one of design or format; the question of legibility is of equal importance.”

Please make sure that the line width (text column width, also called “measure”) is not too wide, and that you add room on the left and right to make it easy for the eye to jump. We don’t want to adjust either the font size or window size. When we open a website, we just want to read away. Column widths that scale are nice; never-ending text lines all across the screen are not.

Good Nielsen – bad Nielsen. The King of Usability recently added white space and a maximum width to his main article column (left). The old layout scaled 100% (right picture). A little bit more line space and you’re perfect.

The basic rule is: 10 to 15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

3. Reader friendly line height

Here is what the reading specialist says:

Lines that are too narrowly set impair reading speed because the upper and lower line are both taken in by the eye at the same time The eye cannot focus on excessively close lines and … the reader expends energy in the wrong place and tires more easily. The same also holds true for lines that are too widely spaced.

The default HTML line height is too small. If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.

4. Clear color contrast

This should not even be necessary to say. But if you still believe you can get away with one of the following combinations:

1. light grey text on a lighter grey background
2. “silver” colored text on a snow white background
3. grey text on a yellow background
4. yellow text on a red background
5. green text on a red background, and so on…

…then you are not a web designer, but just a designer with an attitude. If you insist you are a web designer, then you have to be aware that no one will ever know, as no one will ever be able to read what you say. Stop this nonsense and let us see what you type. Note: for screen design, an overly strong contrast (full black and white) is not ideal either, as the text starts to flicker. Benchmark: #333 on #fff

5. No text in images

We want to be able to search text, copy text, save text, play with the cursor and mark text while we read. Text in images looks pretty, but pretty is not what the web is about. It’s about communication and information, and information needs to be readable and usable and scalable and citable and sendable.

If you can’t make your website look nice without text in images, I am afraid that you will have to start again from scratch.

Responsive Resources

Source: Article

1. Gridset

Developed first as an internal tool that has now grown into a full-fledged product, Gridset lets web designers and developers design, prototype and build custom, responsive grid-based layouts for their projects. It can create any type of grid you require, from regular columnar grids (such as those in CSS frameworks like Bootstrap or 960.gs), to asymmetrical, compound, fixed, fluid and responsive grids. It even lets you create a library of your own grids, with a variety of presets available.

The beauty of Gridset is how fast it will allow you to build responsive prototypes (without all the calculations), providing all the measurements and tools to integrate with your existing markup. You can tailor specific grids across breakpoints you define, and create PNG files of your entire grid set, so you can view and work on your grids in the design tool of your choice.

Alternatives: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify,Responsive.gs, Golden Grid System and Photoshop Grid for Responsive Design.

2. Bootstrap

Built by two guys at Twitter as a way to provide a clean and uniform solution to the most common, everyday interface tasks they faced as developers, Bootstrap is a “sleek, intuitive, and powerful front-end framework for faster and easier web development.” It uses a 12-column responsive grid system, and features dozens of components, styles and JavaScript plugins, with basic global display, typography and link styles all set.

Using the Customizer, you can really make Bootstrap your own, and customize variables, components, JavaScript plugins and more. Bootstrap can be expanded, with a wealth of resources available, to include themes andinterface-building tools.

Alternatives: Skeleton, Foundation, Base, InuitCSS, LESS Framework,Gridless, 320 and Up and Gumby.

3. Adaptive Images

Previously, making your website images responsive usually meant using a"hack-around,” such as rewriting the “src” attribute or using the “noscript” tag. But there are now several tools to make this a much simpler task, including Adaptive Images, which uses one htaccess file, one php file and a single line of JavaScript to detect your visitor’s screen size. It then automatically creates, caches and delivers device-appropriate rescaled versions of your embedded HTML images. What’s more, it is entirely non-destructive, and works on existing websites and markups — without the need to edit anything.

Adaptive Images works on the premise that you are already using the highest-resolution images on your site, and also offers a ton of customization options. You can set breakpoints to match your CSS, set the quality of the generated JPGs, set how long browsers should cache the image for and much more.

Alternatives: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js and Retina Images.

4. Responsive Design Testing

Building a responsive website means constantly testing how it displays across mobile and tablet devices. You could resize the browser yourself, or use a browser extension or tools within your IDE; but there is an ultra-simple tool that allows you to see how a page displays on different screen sizes, in a single view. The Responsive Web Design Tool from Matt Kersley works by entering your website’s URL into the address bar to test a specific page. The screen and device options are 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad – Portrait) and 1024 x 768 (iPad – Landscape). However, the content width cannot be pixel-perfect, as 15 pixels have to be added to the frame to accommodate the scrollbars.

You can share the results of the test with others by adding any URL to the end of the testing page address (e.g. http://mattkersley.com/responsive/?mashable.com). One major benefit of this tool is that it can be self-hosted(available on GitHub) by downloading and installing it on your own site. You can then navigate through the frames that your website appears in, testing the entire site effortlessly.

Alternatives: Screen Queries, Screenfly, Responsivepx, Responsinator,Responsive Viewport Responsive.is, and Resize My Browser.

5. FitText

As content scales according to a user’s viewport, the text will naturally wrap as the container is narrowed; but this often causes widows, orphans or your headlines to look rather ugly, and can even break the entire layout. This is where FitText comes in: It’s a fantastic jQuery plugin that makes your finely tuned text inflatable. It auto-updates the font size according to the width of the element wrapping it, so you can achieve scalable headlines and a non-broken layout that can be caused by font-sizing issues. FitText works perfectly withLettering.js or any CSS3 property thrown at it. There are options to fine-tune the text, including the ability to set min-max sizes and the level of scaling. For those that are opposed to “window.resize(),” Chris Coyier created a fork of FitText that limits the number of window-resize events.

As the plugin ignores the font size you specify in the CSS file (body tag), you should set one as a fallback, in case JavaScript is turned off. Equally important is making sure the H1 tag has a display block with a specified width. Please note that FitText is only for headlines, and shouldn’t be used with paragraph text.

Alternatives: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter andSlabtext.

6. Respond.js

Media Queries are extensions of CSS3, supported by most modern browsers; they allow you to specify when certain CSS rules should be applied. But one disadvantage of using media queries is that as they are part of the CSS3 specifications; they are not supported in older browsers such as in IE8 and below. With Respond.js, this problem is solved, as the script makes min-width and max-width work in IE6, 7 and 8, and it should also work with other browsers lacking support.

The script itself is incredibly small and lightweight (only 3 KB minified and 1 KB gzipped). It works unobtrusively, and doesn’t rely on any other scripts or frameworks to run. It works by requesting a clean copy of your website’s CSS via AJAX, and then translates any media queries it finds into equivalent JavaScript for browsers that don’t support media queries directly.

Alternatives: Modernizer, Adapt, Categorizr, CSS3 Media Queries andEnquire.js.

7. Responsive Slides

An incredibly lightweight jQuery plugin (only 1 KB minified and gzipped) that creates a responsive slider using list items inside a single container, Responsive Slides works with a wide range of browsers, including IE 6 and up. The plugin is dependent on the images being the same size and jQuery 1.6 and up being used. The plugin uses CSS3 transitions with JavaScript fallback, and allows captions and other non-HTML elements inside the slides. There are settings for transition and timeout durations, with multiple slideshows supported, as well as automatic and manual fade.

While Responsive Slides keeps things simple, there are still a wealth of options and possibilities to customize the plugin, including optional “before” and “after” callbacks, separate pagination controls, a random order setting and the choice of where to append the controls.

Alternatives: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera,RefineSlide, Blueberry Sequence.js and Galleria.

8. Wirefy

Flat, static wireframes aren’t particularly useful to show a client how responsive your design is, or what functionality is being suggested. Instead, using a rapid prototype approach may be more beneficial. Wirefy is a collection of functional responsive HTML snippets and templates that scale as the browser is resized (working across multiple devices). It builds on tools such as the Frameless grid system and Bootstrap, and uses CSS media queries that adapt to different device resolutions. It allows you to experiment rapidly with responsive wireframes, and lays a foundation for the design (while staying design agnostic), without losing sight of the content’s importance.

Built on a 16-column base grid, it is packed with UI elements and styles such as typography, tables, images, forms, buttons, tab panel, breadcrumb system, paginator, menu, slideshow and much more. When compared to other frameworks, it is stripped down and doesn’t focus on fancy components, but rather focuses on the users, and how they will experience your content on various devices.

Alternatives: Froont, Interactive Style Tiles, Responsive Sketch Sheets,Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify, Responsive Design Sheets, Responsive Wireframes,Webstiles, Responsive Design Sketchbook and Style Prototypes

9. Responsive Tables

Data tables in responsive design can be problematic: They can be wide and must cater to large, complex amounts of data that need to be kept together to make sense. When the viewport is adjusted, your table can suddenly look very ugly — either being too small to read easily, or zoomed in too far, requiring scrolling. But ZURB offers a simple JavaScript/CSS combination to let tables adapt to small devices and tablets without breaking your responsive layout. It works by taking the first column, which is often the unique key for a table, and “pinning” it to the left of the table, allowing you to scroll the other columns under it. This means the user is able to see the entire table.

It’s a lightweight package containing two key files: responsive-tables.js and responsive-tables.css. To use it on any data table in your markup, you simply need to attach a class of .responsive, and the CSS and JavaScript will do the rest. From there, the tables are modified client-side when the window is smaller than a regular table.

Alternatives: Responsive Data Tables, Stackable.js, Footable, Responsive Tables, Responsive Tables, Responsive SEO Friendly Data Tables,Responsive Approach for Data Tables and RainbowTables.

10. FlevNav

With responsive design now at the forefront of web design, and the ever-increasing use of mobile and tablet devices, the choice of a navigation strategy is now a wide-reaching decision. It needs to be as carefully planned as your content architecture. FlexNav is a jQuery plugin that takes a device-agnostic approach to complex site navigation. It is a mobile-first concept using media queries and JavaScript to create a menu with drop downs. It features multiple nested sub-menus, with support for em units and tap targets to reveal sub-menus for touchscreens.

It’s simple to set up: Start with an unordered list, add in the appropriate class and data attributes (you can also use em units), add flexnav.css to the head of your document, insert jquery.flexnav.min.js before the closing body tag and initialize FlexNav right before the closing body tag. The default speed can be changed, with the plugin being supported by most modern browsers.

Alternatives: TinyNav.js, Navigation Patterns for Responsive Design,MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu,Responsive Design Approach for Navigation and Top Drawer.

Worst UX Mistakes Websites Make

Article: Source

The user experience of websites has improved by leaps and bounds over the years, but there are still sites out there that may leave you asking, “What were they thinking?!”

From a design perspective, it’s easy to get caught up in internal squabbles (“No, no, THIS is the content that has to be front and center”) or distracted by tools or methods (“I say we use lean UX on this project”). When this happens, we often forget that at the end of it all waits a person who wasn’t in on all these decisions, and just wants to get the information they need,buy the product or be entertained for five minutes while waiting for the train.

In the hopes it will help us all avoid these pitfalls, here’s a list of the five worst UX mistakes that people still make in website design.

1. Paying Too Much Attention to Macro and Short-Shrifting the Micro

The large design decisions that you make—things like the main information architecture of your website or the overall layout grid of your pages—are, of course, important. But it’s the small interactions that often botch the entire experience.

Recently, I reviewed a non-profit agency website. It had great navigation, great content and a great layout, but click on the Donate button and there were frustrating controls that didn’t work intuitively, and a screen that refreshed with every action.

When organizations are tight on UX staff they sometime have the UX people do the high level design and then leave the “lower level” interactions to people who are less experienced, or just don’t have time to take care of the UX details: often a costly mistake.

People expect technology to follow the same rules as human-to-human interaction. Think about it, how do you decide whether someone is truly kind, or if he or she cares about you and is acting in your best interests? It’s not the clothes they wear or whether they have the right accent. It’s the little things they do for you, and whether they come through for you in a pinch. The same is true of websites. We decide whether a website is usable and useful when we are trying to complete those micro-interactions.

2. Putting Too Much Time Into Designing Your Homepage

You put a lot of time and energy into designing and redesigning the homepage of your website (versus all your other pages). But it’s possible, even likely, that few people are even seeing your homepage. Your marketing and social media campaigns likely send your visitors to other landing pages.

Of course you want a well-designed homepage, but don’t sacrifice the user experience of other important inside pages by pouring so much time and energy into the homepage. Use your analytics to see where people are really entering your site and then make sure those pages are the best they can be.

3. Relying Too Much on Text

What is the main way you communicate with visitors to your website? What percentage of your content is text versus imagery, audio or video? There’s nothing wrong with having text on your website, except of course that people likely aren’t reading it.

Unless you have a site with the singular purpose of providing text documents, think about providing content in another format. Research on the human brain shows that when people are listening to someone speak, their brain activity syncs up with the speaker. The more the listener’s brain is in sync with the speaker’s, the more thoroughly the listener will comprehend the content.

Where it makes sense, use audio and/or video instead of just relying on text.

4. Designing for the Wrong Generation

I often ask how many of the people in the audience are over 55, how many are between 30 and 55 and how many are under 30. Most of the people in the audience are in the middle range, between 30 and 55. That’s Generation X. Baby Boomers (those over 55) are a huge demographic, and the Millenials (those under 30) are an even larger demographic.

This indicates that most of the design for the two largest demographics is being done by the smallest one. Does that matter? Yes it does. Research shows that there are generational differences in the expectations and mental models that people have about technology.

The technology that is dominant when you are between the ages of eight and 10 forever changes the way you think about technology. So, if you design a website with content, features and interactions that you think work well, it’s likely that it won’t be so great for people who are in another generational group.

For example, Baby Boomers expect technology to help them get stuff done. They don’t demand a multi-channel experience, and they make a distinction between different channels: TV is one channel and “the Internet” is another.

Generation Xers expect some technology to help them get stuff done and other technology to be fun to play with. Gen Xers think that it’s important to be able to customize and personalize an interface and an interaction, an idea that is not that important to other generations.

Millennials don’t even think about the term “technology.” Everything is technology. They think in terms of what they are doing, not what the technology is doing. Boomers will say, “Go look that up on the Internet.” Millennials would just say, “Go look it up.”

People who are even younger won’t think of a desktop or laptop as a primary technology. They think of smart phones and tablets. Since you are in one generation, you can’t ever really understand how another generation thinks: that’s why you have to test.

5. Ignoring Multi-Screen Behavior

We know that the incidences of mobile and multi-screen use are increasing rapidly. People are accessing websites on smartphones and tablets. They are starting on their smartphones and then switching to tablets. They are viewing something on their laptop while also looking at something else on their smartphone. They are on a train, or walking or talking to someone else while looking at websites.

Yet when we design we still tend to imagine one person sitting in front of a large desktop all alone in a quiet space. Unless you are sure that your target audience is visiting your website that way most of the time, you need to think about a multi-screen, active experience.

This is challenging. Most of our design tools haven’t caught up with this idea yet. Sure, it’s possible to code for a multi-screen experience, and everyone talks about responsive design, but what if you are a designer and not a programmer? Can you easily prototype a multi-screen or responsive experience? What if you are a site owner creating your own website with WordPress? How easy is it to design a multi-screen and/or mobile-first website on your own? And what about user testing for a multi-screen experience? Do you have that covered?

Hopefully these things will get easier, but in the meantime we’ll have to think of our own workarounds to be sure that we aren’t stuck in the “one person, one desktop” mindset.

Are these the five mistakes you would have chosen? What are the missteps you come across that leave you asking, “What were they thinking?!” Tell us in the comments below.

Image via iStock, A-R-T-U-R