Image Image Image Image Image
Scroll to Top

To Top

design

18

Feb
2013

Information Resources

Permalink

By admin404

Above the Fold

February 18, 2013 - Information Resources

When creating mechanicals for website strategy, or Strategic UI/UX, we often make recommendations for content that should be visible above the fold. In the context of Web search/usage, the term above the fold refers to the part of the web page a user can see without having to scroll down or use the scroll bar within their web browser. In general, this space is at the top of a Web page, and is considered prime real estate for visibility and getting information seen most efficiently. The term, itself, is derived from the web’s ephemeral predecessor, the newspaper, in which the most poignant stories—the ones that would be more likely to sell that particular newspaper over competing papers—were those that were above the crease on Broadsheet or Berliner sized papers. Web strategists use the term above the scroll interchangeably with above the fold.

As browser resolutions increase, the fold mark keeps changing. In 2013, 25.4% of the world was browsing at 1366×768, as opposed to only 18.7% in 2012. And the growing availability of mobile phones and tablet devices, such as iPads, has changed the landscape to a point where we can no longer rely on a majority resolution and location of the fold. As a result, we recommend fluid, responsive layouts that accommodate for the broadest range of resolutions possible. Not only does this help clients to be able to see the most important content, while helping them to sell their services over their competitors’, but it also helps us to reorganize and strategize content based on the different types of users. For instance, a user on a phone may be more interested in contact information, a tablet user may want to read topical news or view videos, and a desktop user may want more in-depth articles and research information. Responsive layouts help gear the content toward these different demographics and re-organize what’s seen above the various folds.

That said, we’re currently in the age of Cinema (16 x 9 resolutions) and Retina (2x Device Pixel Ratios) displays. With iOS’s dock protruding into the available horizontal space and retina’s ability to scale content by pinching, the confusion over the floating fold mark is mired further.

With the one caveat that the rapidly changing environment may soon render this outdated, our recommended fold mark remains 645px for landscape orientations (with allowance for a persistent bookmarks bar) and 900px for portrait.

 

Examples of our testing can be seen below:

Safari Landscape

Safari Landscape

Chrome Landscape

Chrome Landscape

Safari Portrait

Safari Portrait

Chrome Portrait

Chrome Portrait

Safari Landscape - Bookmark Bar

Safari Landscape – Bookmark Bar

If you’re interested in learning more about fold lines, Strategic UI/UX or the changing landscape of the web, drop us a line to initiate a conversation.

Tags | above the fold, above the scroll, berliners, broadsheets, design, develpment, mechanicals, orientation, resolution, standards, strategy, tabloids, website, wireframes

28

Jan
2013

News Articles

Permalink

By admin404

The Creative Process

January 28, 2013 - News Articles

Oftentimes when approached by clients and agencies, we’re asked about our creative process at ERA404. While people can easily see a step-by-step diagram of our development process, broken down by time, cost and client interaction, we have never really outlined how the creative process works here. This is partially because development, which is creative in its own right, is considerably more objective, pragmatic, and analytical. The process is linear, relying on previous checkpoints to proceed to latter ones.

Design, on the other hand, grows organically and chaotically. It pushes forward and outward in untraceable trajectories. If one thinks of development as a relay race with the baton being passed at regular relay points, design is more like a quixotic multi-player game of capture the flag. It’s undoubtedly the most challenging, gratifying (and possibly frustrating) part of our job here, riddled with stops, starts, reorientation, redirection, hidden doors, trap floors, exploration, and trial and error, relying purely on experience and gut instinct to reach the goal. And while the description above sounds daunting, it’s the primary reason we love our jobs so much.

So, depicting our creative process in a linear diagram like our development process is impossible. But each design roughly follows the same objectives along the uncharted path, which, coupled with client feedback and critiques, act as polestars in guiding us to their completion. Below are those objectives, distilled and organized as they would be in a perfect world, free of the organic and beautiful growth of real-world scenarios:

 

Defining the Problem

  1. Defining the Problem
    To maximize success we first define the problem we are trying to solve—we articulate it and give it boundaries (what’s part of the problem? what’s outside our control?). We call upon our designers to help cull, visualize, express that problem in human terms—looking at it from many different views.
  2. Envisioning the Desired End State (Knowing what victory looks like)
    (If you’ve ever been part of a team that seemed lost, it’s likely this step was skipped.) Knowing how to both characterize and recognize a victory will be vital when embarking on the journey of solving the problem. As designers, we can help prototype the end state (through scenarios, models, journey maps, etc.).
  3. Defining the Approach by Which Victory can be Achieved
    Once we know where we want to go, we need to create a map to get there. That map must be imprinted in the minds of every participant along the way, including clients and team members. We find it helps to draw an actual map with our clients, to assist them in visualizing the distance and milestones to the destination.
  4. Inciting Support—And Then Action
    In some cases, not everyone will want to make the journey. They’ll need to be inspired. Convinced. Reinforced. Educated. As designers, we call on our skills as communicators to help them see why they should come along.

Innovating

  1. Seeking Insight to Inform the Prototyping of the Solution
    After the team is assembled, in which the client plays an integral—if not central—role, the next task is to look at the work ahead and be smart about it. Often it pays to take pause and seek insight that will enable the team to prototype a solution. That means research. Our designers help structure that research, especially in reporting its findings.
  2. Prototyping Potential Solutions
    The prototype might might literally mean physically prototyping the solution: building it in miniature, or as a one-off, to see if it will work. Or, it might mean prototyping a new customer experience—a collection of moments that make up an experience. In either case, we play a critical role in communicating the vision to clients.
  3. Delineating the Tough Choices
    A good prototype (or prototypes) unearths all sorts of unexpected data and insight. And from that, tough choices emerge. Should we include this feature, or that? What if the solution costs more than clients have budgeted? Can the prototype be broken down into stages to make the objective more affordable and digestible? What if there are downsides? Together, with regular and consistent communication  we try to make the choices evident.
  4. Enabling the Team to Work as a Team
    And, when crucial to the project, we help the team work as a team: helping make choices, envisioning different outcomes, seeing the “whitespace” that connects divergent views and approaches.

Generating Value

  1. Choosing the Best Solution, Then Activating It
    This is the culmination of many steps of hard work. If we do our jobs right, we can often be the pivotal voice in this step, helping argue for the best overall solution—we can visualize the case, see different sides of the problem and lay out a path for making a commitment to the chosen solution.
  2. Making Sure People Know about our Solution
    Once a solution is chosen, the task becomes to ensure that people—customers, constituents, employees—know about it. In a traditional sense, this is about marketing the idea. In a deeper sense, it’s about empowering people to support/own/celebrate the solution.
  3. Selling the Solution
    In most cases, an exchange of money or time will be involved—between seller and buyer, creator and participant, sponsor and beneficiary. That process is generally helped by design, so that people know what they’re buying and what it’s worth.
  4. Rapidly Learning and Reorienting Based on your Successes and Failures
    The most effective projects are those in which we constantly learn, strive, and improve. Our job is to help take the team back through the journey, recounting the steps where good decisions were made and where the team could act differently next time.

Tags | checklist, creative process, creativity, design, development, diagram, flow chart, innovation, milestones, problem, prototyping, stepping stones

07

Oct
2012

Information Resources

Permalink

By admin404

A Decade of Lessons in Small Business Management

October 7, 2012 - Information Resources

As we round third plate to complete our 10th year of business at era404, it’s impossible not to reflect upon the previous decade’s successes and lessons. In fact, despite the enormous pride we have for our successes—the awards we’ve won, the opportunities we’ve been afforded, the pieces we’ve created—it was in the lessons that our company grew the most. We can only assume that the same way the triumphs and tribulations of a child’s first ten years shape his or her personality, a business uses its own experiences to analyze the risks it will take and the directions it will pursue.

The first ten years weren’t always easy. Read More

Tags | awards, design, development, education, failure, lesson, opportunities, recommendations, reflection, small business, strategy, success, tips, tribulations, tricks, triumps

09

Jun
2012

Press Releases

Permalink

By admin404

Pantone Moods Widget on Pantone.com

June 9, 2012 - Press Releases

CARLSTADT, NJ — On Friday, June 8, Pantone launched a new version of their web site that features ERA404’s Pantone Moods widget in the footer of every page of the site. The widget’s “Realtime” tab shows a streaming feed of moods and color chips submitted by users through the Facebook application, Pantone Moods. Visitors may also see the previous day’s most submitted color chip, mood keyword and submission city by clicking on the “Most Popular” tab. The widget compliments the application’s trending and reporting tab which was designed and developed by ERA404 earlier in the year.

Visitors interested in seeing the widget in action can visit: pantone.com. To submit moods to the widget, log-in to Facebook and add the Pantone Moods application. For more comprehensive trends, including proximity, gender, location and time matches, current color and mood comparisons, and global mood trends, click the “Mood Trends” tab from within the Pantone Moods Facebook app.

Pantone Moods currently boasts a lifetime user base of  nearly 70,000 users and over a half million moods posted and has been featured in GDUSA, Communication Arts and other industry periodicals. The application was originally conceived and created by ERA404 in October 2008,  and was redesigned in August 2011 based on the unprecedented response from Pantone brand advocates and fans on Facebook. See this project in the ERA404 portfolio, here: http://www.era404.com/loves/pantone/

 

Tags | application, chip, color, conception, creative, design, development, emotion, facebook, jquery, mood, pantone, programming, x-rite

21

May
2012

Press Releases

Permalink

By admin404

www.era404.com Site Relaunch

May 21, 2012 - Press Releases

NEW YORK CITY—ERA404 Creative Group, Inc., the New York design, development and strategy studio, is pleased to announce the launch of its newly revamped website, portfolio and client portal.

The new www.era404.com showcases selected work from the past decade of business and is part of a strategy to reposition themselves as leaders in multi-disciplinary creative and forward-thinking development. The site features an online portfolio, creative reel and dozens of other HD videos that make use of HTML5 and browser-native players, eluding the requirement of plugins for Adobe® Flash and Apple® Quicktime videos. Each page of the site is saturated with social media options (FacebookTwitterPinterest, and Google Plus) and the site has been re-engineered to be optimized for search engines, RSS feeds, Facebook OpenGraph, mobile (and tablet) devices and responsiveness to multiple browsers/platforms/resolutions.Read More

Tags | agency, creative direction, design, development, don citarella, era404, facebook, flash, google plus, mike citarella, mobile, new york, nyc, opengraph, pinterest, relaunch, responsive, rss feeds, site, strategy, studio, tablet, technical direction, twitter, www.era404.com

01

Jan
2011

Press Releases

Permalink

By admin404

ERA404 Creative Group Rebranding

January 1, 2011 - Press Releases

Commemorating Their 10-Year Anniversary, ERA404 Gets a New Identity

ERA404 Creative Group, a long-standing creative studio based in New York City, is unveiling the company’s new corporate identity this quarter. ERA404 (formerly era//404) has made the choice to update their 10-year-old mark, its supplemental iconography and palette, even the company name.Read More

Tags | brand, branding, creative, creative director, design, don citarella, era404, firm, group, new york, new york city, nyc mike citarella, rebrand, rebranding, studio