It started with a Sweetgreen on the corner of W 91st street and Broadway, three blocks from Central Park. I sat down and forked the first bite of my chicken Caesar salad into my mouth. My eyes widened, my palette salivated.

它从W 91st街和百老汇的拐角处的Sweetgreen开始，距中央公园三个街区。 我坐下，把我的凯撒鸡肉沙拉的第一口叉进了我的嘴里。 我睁大眼睛，我的调色板流涎。

Salty. Crunchy. Perfection.

咸。 香脆 完美。

No, this is not a love letter to Sweetgreen (but if you would like that this one is my favourite), or koalas (that is my next Medium post). My Caesar salad was however, my introduction to Gin Lane, the agency behind their super salad brand identity (and a humble $15B+ worth of other brands you may have heard of).

不，这不是给Sweetgreen的情书(但如果您希望这是我的最爱)或考拉(这是我的下一篇中级职位)。 然而，我的凯撒沙拉是我对Gin Lane的介绍，这是他们超级沙拉品牌标识的代理(以及您可能听说过的价值不超过$ 15B +的其他品牌)。

Gin Lane has since become Pattern Brands, announcing it on this very platform. Pattern is a direct-to-consumer multi-brand company with the mission to help our generation find more enjoyment in daily life, with $14M VC funding to boot. They currently have one brand— Equal Parts, combining cookware with expert guidance to help you enjoy home cooking. Their second brand — Open spaces, is an approach to organizing your home launching this month.

此后，Gin Lane已成为Pattern Brands，并在此平台上宣布了它。 Pattern是一家直接面向消费者的多品牌公司，其使命是帮助我们这一代人在日常生活中找到更多乐趣，并提供1400万美元的风险投资。 他们目前拥有一个品牌-Equal Parts，它将炊具与专家指导相结合，以帮助您享受家庭烹饪。 他们的第二个品牌-开放空间，是一种组织本月推出的房屋的方法。

Which brings us to our real story: Pattern’s multi-brand webpage, its winning UX features, and expert story telling.

这使我们了解了真实的故事：Pattern的多品牌网页，出色的UX功能以及专家的故事讲述。

1.讲一个故事 (但要带给我微妙之处) (1. Tell Me a Story (But Give Me Subtleties))

Good web design is good story telling. When I first meet Pattern, I am greeted by a tree with two fruits, representing Pattern’s two brands. This memorable visual immediately conjures a thought of Adam and Eve, the first story told in the Bible. I feel this is the beginning of something new.

好的网页设计是好的故事讲述。 当我第一次遇到Pattern时，我被一棵树和两个水果打招呼，代表了Pattern的两个品牌。 圣经中讲述的第一个故事，这种令人难忘的视觉立即让人联想到亚当和夏娃。 我觉得这是新事物的开始。

Next, we’re presented with Pattern’s simple and eloquent one sentence mission statement. I know both who they are and what they do effortlessly. This needs to happen quickly because 55% of users spend fewer than 15 seconds actively on a page.

接下来，向我们展示Pattern的简单而雄辩的一句话使命陈述。 我既知道他们是谁，也不费吹灰之力。 这需要Swift发生，因为55％的用户在页面上的活动时间少于15秒 。

Could the homepage stand alone without the Welcome Tree? I don’t think so, at least not with the same effect. Pattern’s brands want us do the dishes and make our beds, we can’t get on board without an emotional response, which can only result from expert story-telling.

如果没有欢迎树，首页是否可以独立存在？ 我不这么认为，至少效果不一样。 Pattern的品牌希望我们自己洗碗并整理床铺，如果没有情感回应，我们就无法上船，这只能归因于专家的讲故事。

Note, if you revisit the site within the hour the Welcome Tree disappears, once novel and curious, now tedious. Excellent design.

请注意，如果您在一个小时内重新访问该站点，欢迎树就会消失，因为它既新颖又好奇，现在很乏味。 优秀的设计。

2.让我感觉到一些东西 (2. Make Me Feel Something)

Pattern doesn’t underestimate the design tools they have available to connect directly to their users.

Pattern不会低估他们可以直接连接到用户的设计工具。

Copy, visuals, and interactions can all connect to convey and elicit positive emotion throughout an experience, with no tension, no conflict, no characters, and no plot points.

复制，视觉效果和互动都可以贯穿整个体验，传达和引发积极的情感，而不会产生紧张，冲突，人物和情节。

— Jesse Weaver, “What is Story-Telling in Design?”

— Jesse Weaver， “ 什么是设计讲故事？ ”

If childhood nostalgia has a colour story, then Pattern has found it. Dream-like purples accompanied by cool greys, greens as vibrant as summertime grass, saturated oranges like a perfectly ripe peach. I am at once transported what a summer’s day in the 90’s looks like in my mind.

如果童年时代的怀旧有一个色彩故事，那么Pattern就找到了它。 梦幻般的紫色伴随着凉爽的灰色，绿色像夏天的草一样生机勃勃，饱和的橙子像成熟的桃子一样。 我一下子被运送到90年代的夏日。

“Research reveals people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on colour alone.”

“研究表明，人们在初次观看后的90秒内会对人，环境或产品做出潜意识的判断，而其中62％至90％的评估仅基于颜色。”

— Institute for Colour Research

— 色彩研究所

Countless hours of my childhood were spent in my friend’s basement in front of her Dell desktop playing Chapman’s Ice Cream online games. It was the promise of free Chapman’s merchandise that kept us coming back for more.

我小时候的无数小时都花在我朋友的戴尔台式机前的地下室里，玩着查普曼的冰淇淋在线游戏。 免费查普曼商品的承诺使我们回头了更多。

When was the last time a webpage solicited a happy memory? Or, made you feel anything at all? I hadn’t seen a hand mouse since my Chapman’s days, but Pattern digs deep into their nostalgia pockets to pull this one back from the dead. I am delighted.

网页什么时候才发出美好的回忆？ 还是让您有种感觉 ？ 自查普曼时代起，我就再也没有见过手鼠标，但是Pattern深入挖掘了他们的怀旧口袋，将其从死里拉了回来。 我很高兴。

Pattern’s website is full of gouache-inspired illustrations sized as if they might have come from a children’s book. The visceral emotions Pattern is sparking with these Easter eggs are ideal for their brand’s identity: to remind me of the simplest form of enjoyment, childlike.

Pattern的网站上充满了水粉风格的插图，其大小似乎可能来自儿童读物。 这些复活节彩蛋发出的内脏情绪花样非常适合其品牌形象：让我想起最简单的享受方式，即童趣。

3.不要忘记洒 (3. Don’t Forget The Sprinkles)

“The cleverness that you add to a product should be like salt and pepper sprinkled on a well-prepared dish. They add to the recipe, but they should not be a main ingredient.”

“添加到产品中的聪明之处应该像撒在精心准备的盘子上的盐和胡椒粉一样。 它们添加到食谱中，但不应成为主要成分。”

— Randy K Hunt, Creative Director of Etsy

— Etsy的创意总监Randy K Hunt

Little touches make a difference, like when your mom use to cut the crusts off your peanut butter sandwich. The movements of clouds, birds in flight, swaying tree branches, all add life to the webpage. What they lack in direct purpose they make up for in a greater experience. More importantly, they do not detract from the usability of the webpage.

一点点接触都会有所作为，例如当您的妈妈用来切掉花生酱三明治上的硬皮时。 云层的运动，飞行中的鸟类，树枝的摇曳都为网页增添了生机。 他们缺乏直接目的的东西会在更多的经验中弥补。 更重要的是，它们不会降低网页的可用性。

Clicking the menu symbol in the left corner of the homepage offers an unexpected delight when it expands like a raindrop hitting the sidewalk. These surprises make me want to stick around longer. Things are happening here.

单击主页左上角的菜单符号，当它像雨滴落在人行道上一样展开时，会带来意想不到的愉悦。 这些惊喜使我想坚持更长的时间。 事情在这里发生 。

4.知道何时违反规则 (4. Know When to Break the Rules)

Iconography is a well understood UI design component. The smaller the symbol, the less detail should be used. Too much detail and you risk a cluttered illegible appearance, too little and your icons feel chunky and cheap.

图像学是一个很好理解的UI设计组件。 符号越小，应使用的细节越少。 细节太多，您将面临混乱，难以辨认的外观，太少而图标又显得笨拙又便宜的风险。

Pattern’s icons are not significantly more detailed than what is expected from a 48px icon, they are however more nuanced. A flag detail on a tent, plants of different heights enjoying a cloudy day. These are not icons designed for efficiency, but rather enjoyment. After all, enjoyment is the kool-aid Pattern is selling. You’re damn right their cactus is flowering. “Do you have a cactus?” I feel Pattern thoughtfully ask me.

Pattern的图标没有比48px图标所预期的要详细得多，但是它们却更加细微 。 在帐篷的一个旗子细节，享受多云天的不同的高度植物。 这些不是为了提高效率而设计的图标，而是为了娱乐。 毕竟，享受才是酷玩乐队正在销售的东西。 你该死的仙人掌正在开花。 “ 你有仙人掌吗？” 我觉得Pattern想着要我。

Web navigation best practices aim to improve the user experience by providing a clear, simple, and consistent user journey.

Web导航最佳实践旨在通过提供清晰，简单且一致的用户旅程来改善用户体验。

“A good navigation has no more than seven links, because more than that is confusing. The human brain can’t keep more than seven items in its short term memory.”

“一个好的导航不超过七个链接，因为更多的链接令人困惑。 人脑在短期记忆中最多只能保留七个项目。”

— Ran Segall, UX Designer & Flux Academy Founder

—用户体验设计师兼Flux Academy创始人Ran Segall

Pattern’s navigation page boasts nine pages, but groups their lesser visited pages and assigns them a significantly smaller typeface. They give a wink to the rules, then break them with care.

Pattern的导航页面有九个页面，但是将访问量较小的页面分组，并为其分配明显较小的字体。 他们对规则眨了眨眼，然后小心翼翼地打破了规则。

5.没有什么是原创的 (5. Nothing is Original)

“Authenticity is invaluable; originality is non-existent.”

“真实性是无价的； 独创性不存在。”

— Jim Jarmusch, Filmmaker

-电影制片人吉姆·贾木许(Jim Jarmusch)

The birds and clouds on Pattern’s homepage create an element of motion reminiscent of Vincent Van Gough’s Starry Night brush strokes. This clue led me on a deep dive into Post Impressionist art. It seems improbable that they weren’t inspired by this art movement both in colour and design.

Pattern主页上的鸟和云创造出一种运动元素，让人联想起Vincent Van Gough的《星夜》画笔描边。 这个线索使我深入研究了后印象派艺术。 他们似乎并没有受到这种艺术运动的色彩和设计启发的可能性。

There are many places web designers find inspiration from these days, Lapa.ninja, Awwwards.com. But Pattern? They went all the way back to 1886. Great web design inspires great web design, but Pattern makes the case for better web design being inspired by well, everything else.

如今，网站设计师有很多地方可以从Lapa.ninja ， Awwwards.com找到灵感。 但是图案？ 他们一直追溯到1886年。出色的网页设计激发了出色的网页设计，但是Pattern使得更好的网页设计受到其他因素的启发。

The best of Pattern’s UX features pull you into their story and elicit positive emotion. With a company mission statement like “help our generation find more enjoyment in daily life”, maybe that is exactly the point… for you to stick around long enough to enjoy the experience.

Pattern最好的UX功能将您带入他们的故事并引起积极的情绪。 有了公司的使命宣言，例如“ 帮助我们这一代人在日常生活中找到更多的乐趣 ”，也许这正是重点……让您坚持足够长的时间来享受这种体验。