java商业化
摹颖饮料DC有问题... (Green Drinks DC has a problem…)
They’re a small team passionate about engaging their community and growing a more vibrant and connected environmental movement in the nation’s capital. They want their events to be the best place to meet other district-area enviros; a space where all feel welcome and empowered to make genuine connections that go beyond the usual standard for professional networking.
他们是一个小型团队，热衷于与社区互动，并在美国首都发展更加活跃和相互联系的环境运动。 他们希望自己的活动成为与其他地区环境相遇的最佳场所； 一个所有人都感到欢迎并有权建立真正的连接的空间，该连接超出了专业网络通常的标准。
They’ve also expanded their services to include high-quality development workshops that further connect the community through shared personal and professional growth. The two kinds of events are considered to be the “two pillars” of what Green Drinks DC brings to the table. The problem is, they’re having trouble communicating this to newcomers.
他们还扩大了服务范围，包括高质量的开发研讨会，通过共享的个人和专业成长进一步联系社区。 这两种事件被视为Green Drinks DC带来的“两个Struts”。 问题是，他们在与新人交流时遇到了麻烦。
According to co-founder, Spencer Schecht, the company is struggling with misunderstandings about what Green Drinks actually does. Prospective members sometimes just don’t take the brand seriously because they think that it’s some kind of boozy social club. Otherwise, they assume that a Green Drinks happy hour or development workshop will be just another stuffy networking meetup!
根据联合创始人Spencer Schecht的说法， 该公司正在努力应对Green Drinks的实际误解。 准会员有时只是不认真对待该品牌，因为他们认为这是一种疯狂的社交俱乐部。 否则，他们认为“绿色饮品”欢乐时光或开发研讨会将只是又一次闷热的社交聚会！
Their existing landing page doesn’t do much to help this state of affairs. There’s not a lot of easily skimmable information about their services and most of what is there is hidden on other pages in the site. The largest elements on the page are a huge “jumbotron” hero video of someone making some (admittedly delicious-looking) cocktails and a long scroll list of upcoming events with wide columns of white space either side. The GoFundMe tracker in the footer is no longer relevant to the company according to Spencer and the email list sign-up is a little clunky.
他们 现有的目标网页 在帮助这种状况方面没有多大作用。 关于他们的服务的信息不多，也很容易浏览，其中大部分隐藏在网站的其他页面上。 页面上最大的元素是一个巨大的“超大型”英雄视频，视频中有人制作一些(看上去很美味的)鸡尾酒，以及即将到来的事件的长长的滚动列表，两边都有宽列。 根据Spencer的说法，页脚中的GoFundMe跟踪器与公司不再相关，并且电子邮件列表的注册有点笨拙。
我重新设计的主要目标是…… (The main goal of my redesign…)
… would be to produce a high fidelity landing page design that communicates their company’s offerings (those “two pillars” of their service), their fun and casual culture, and their value proposition from the moment a user lands on the page.
……将是一种高保真的登陆页面设计，从用户登陆页面开始，就可以传达公司的产品(服务的“两个Struts”)，娱乐和休闲文化以及其价值主张。
As designers, the question was: How can we convince people that their events are not only fun to attend, but effective as well?
作为设计师，问题是：我们如何说服人们他们的活动不仅很有趣，而且也很有效？
设计目标 (Design Objectives)
In order to accomplish this goal, I identified five key needs of the final design.
为了实现此目标，我确定了最终设计的五个关键需求 。
Some illustration of the “two pillars” of the business.
对业务“两个Struts”的一些说明。
A distinct casual/fun tone throughout the design, both verbally and non-verbally.
在整个设计中，无论是语言还是非语言，都具有鲜明的休闲/趣味性 。
Clear communication of the activity of their calendar.
清楚地交流他们的日历活动 。
An illustration of their value for money proposition. (Green Drinks DC development workshops are very well priced compared to others!)
说明其物有所值的主张 。 (与其他公司相比，Green Drinks DC开发研讨会的价格非常优惠！)
Some indication of the “real people” in the Green Drinks community.
绿色饮料社区中某些“真实的人”的迹象。
I then went through each of these and thought about what this might look like when made manifest on the page. For example, having plenty of visuals that featured peoples happy faces would contribute to the tone of the design overall, but if they were images of actual Green Drinks events and members, this would be even more effective and also show the community in action! Another addition would be to have a testimonials feature alongside a break down of the “two pillars” to deal with needs 1, 4, and 5.
然后，我仔细研究了所有这些内容，并考虑了在页面上显示这些内容时的外观。 例如，拥有大量让人愉悦的表情的视觉效果将有助于整体设计的基调，但是，如果它们是真实的绿色饮料事件和成员的图像，那么这将更加有效，并向社区展示实际行动！ 另一个补充是要具有推荐功能，同时分解“两个Struts”以应对需求1、4和5。
To synthesize these ideas, I listed out the features that would appear on the landing page in order of prominence.
为了综合这些想法，我按突出顺序列出了将出现在登录页面上的功能。
The Green Drinks DC’s mission statement, vision, and value statements as provided by Spencer.
Spencer提供的Green Drinks DC的使命声明 ，愿景和价值声明。
A breakdown of the “two pillars” of the business: happy-hour-style social meetups and professional development workshops
业务“两大Struts”的细分 ：欢乐时光式社交聚会和专业发展研讨会
A calendar of upcoming events.
即将发生的事件的日历。
Testimonials from the “real people” in the GADC community.
来自GADC社区中“真实人物”的感言 。
A photo gallery of past events with an emphasis on people’s faces.
过去发生的事件的照相馆，重点放在人们的脸上。
约定 (Conventions)
I surveyed the visual designs of other companies such as Quip Electric Toothbrushes and found some effective design conventions that they employed as a way to tell their stories and breakdown complex product/service offerings.
我调查了其他公司(例如Quip电动牙刷)的视觉设计，发现了一些有效的设计惯例，他们将其用作讲故事和细分复杂产品/服务产品的方式。
Quip had step-by-step breakdowns of each part of the service, a prominently displayed mission statement, testimonial cards in a carousel.
Quip会 逐步细分服务的每个部分，在醒目的位置显示任务说明 ，并在轮播中提供证明卡 。
#HashtagLunchbag’s landing page greets the user with a large hero image that provides immediate context for the user and finishes off with a collage of images from events to display the strength of their movement.
#HashtagLunchbag 的着陆页向用户显示一个大英雄图像，该图像为用户提供了即时上下文 ，并以事件图像的拼贴画结束，以显示其动作强度。
The Dale Carnegie Institute, an organization known for its high-quality training used a stark black and white color scheme, but made their page more dynamic by adding a lot of depth to the composition with dropshadow hover states for each part of it’s service breakdown. There were also a lot of real faces in their photography.
戴尔卡耐基学院(Dale Carnegie Institute)以其高质量的培训而闻名，该组织使用了鲜明的黑白配色方案，但是通过在组成部分中使用阴影阴影悬停状态为服务的每个部分增加了很多深度，从而使页面更具动态性 。 他们的摄影作品中也有很多真实的面Kong 。
线框 (The Wireframe)
With my hierarchy mapped out and some research made into the conventions used by other organizations, I sketched out a simple wireframe for my design.
绘制好层次结构，并对其他组织使用的约定进行一些研究后，我为设计绘制了一个简单的线框。
I followed the example of #HashtagLunchbag for my header menu design, with emphasis on a large hero image and a highlighted CTA. For this project, the primary CTA would be for the user to sign up for their mailing list to promote long term engagement with the Green Drinks Service.
我在标题菜单设计中遵循了#HashtagLunchbag的示例，重点是大型英雄图像和突出显示的CTA。 对于此项目， 主要的CTA是用户注册其邮件列表，以促进与Green Drinks Service的长期合作。
I placed secondary priority on the actual calendar of events, but the link would still be prominently displayed on the main navigation (which becomes a sticky nav as the user scrolls down) to maintain easy access for power users.
我将实际事件日历设置为次要优先级，但该链接仍将显着显示在主导航上 (当用户向下滚动时，该导航变为粘性导航)，以使高级用户可以轻松访问。
The design also included a section designed to reinforce the email sign-up CTA partway down the page.
该设计还包括一个部分，该部分旨在增强页面下方的电子邮件注册CTA 。
Testimonials would also be displayed in carousel cards featuring visuals of actual Green Drinks DC members!
推荐信还将显示在带有真实绿色饮料DC成员视觉效果的轮播卡片中！
This wireframe was then transferred into Figma and drawn up digitally, which allowed me to settle on a final order for the long scroll of the webpage.
然后将该线框转移到Figma并进行数字化草绘，这使我得以确定长篇幅的网页最终订单。
Here we can see where the hero image will be most prominent with the logo and a dark gradient overlayed onto it. The wireframe also suggests some color blocking to help highlight the main CTA in the navigation bar.
在这里，我们可以看到带有徽标和深色渐变的英雄形象将在最突出的地方出现。 线框还建议一些颜色阻止，以帮助突出显示导航栏中的主要CTA。
In informal communication of Green Drinks DC’s mission statement and vision will be the first part of the scroll.
在Green Drinks DC的非正式交流中，使命宣言和愿景将是本书的第一部分。
Then the user will encounter a section that communicates the “two pillars” of the business with an illustrative icon and image for each and a third image in the composition to help tie the two together with a quote overlayed to serve as a main idea for the section.
然后，用户将遇到一个区域，该区域将业务的“两个Struts”与每个图标的图示和图像以及构图中的第三个图像进行通信，以帮助将两者与绑在一起的引号绑在一起，以用作该产品的主要思想。部分。
Upcoming events in this iteration are displayed as calendar tiles — not a full, interactive calendar page—because, at this point in time, Green Drinks DC only has a few scheduled every month. I also found a useful blog post from UI Patterns about design considerations for calendar tiles that discouraged the full calendar page approach I’d initially planned.
此迭代中即将发生的事件显示为日历图块，而不是完整的交互式日历页面，因为在这个时间点上，Green Drinks DC每个月只有几个时间表。 我还从UI Patterns中找到了一篇有用的博客文章 ，内容涉及日历磁贴的设计注意事项，这不利于我最初计划的完整日历页面方法。
Next comes the CTA reinforcement section which I blocked out in a way that I hoped would help break the regimented grid the carousel cards would follow to bring more interest to the design.
接下来是CTA加固部分，我以某种方式阻止了该工作，希望该方法有助于打破轮播卡遵循的规则网格，从而使设计更具吸引力。
And then following that the carousel for member testimonials would flow into a larger banner with a collage of event images from the company’s social media.
然后，成员证明的轮播会流入带有公司社交媒体事件图像拼贴的较大横幅。
风格决定 (Style Decisions)
As it came time to decide on color and type styles for the content, I compiled a moodboard using Pinterest and set up several alternatives for my type choices. To communicate the fun, approachable, and vibrant personality of the brand I tied in several elements to the moodboard overall.
决定内容的颜色和字体样式时，我使用Pinterest编写了一个情绪板，并为我的字体选择设置了几种选择。 为了传达品牌的趣味性，平易近人和充满活力的个性，我在整体上将几个要素联系在一起。
Illustrations with a loose, creative style.
具有宽松，创意风格的插图 。
Lots of color—not just green, but also those colors that would compliment green well such as golden yellow, red-orange, and deep purple.
许多颜色- 不仅是绿色 ，而且还有那些能很好地补充绿色的颜色，例如金黄色，橘红色和深紫色。
Photos of people with illustrated elements overlayed on the image.
带有插图元素的人物照片叠加在图像上 。
Plant imagery, but a de-emphasis on images of cocktails and alcoholic drinks to reduce misunderstandings about what Green Drinks Events are like.
植物图像 ，但不再强调鸡尾酒和含酒精饮料的图像，以减少对绿色饮料事件的误解。
I realized that one way I might be able to push the boundaries of what was expected and place my design firmly on the “fun” end of the spectrum, would be to adopt a dark theme, using primarily light colors on a black background.
我意识到，我可能能够超越预期的界限并将我的设计牢牢地置于“有趣”的范围内的一种方法是采用深色主题 ，主要在黑色背景上使用浅色。
This would allow my design to hint at nightlife and happy hours and showcase vivid bright colors without feeling too childlike in its playfulness. The challenge then would be to maintain a certain level of professionalism in the aesthetic. With the dark theme, making sure that the brand retained its approachable feel and not seem too exclusive would be another challenge.
这样一来，我的设计就可以暗示夜生活和欢乐时光，并展现生动鲜艳的色彩，而不会使其玩味显得过于童趣。 那么，挑战将是在美学上保持一定水平的专业水平。 以深色为主题，要确保品牌保持平易近人的感觉，而不是显得过于排他，将是另一个挑战。
I decided I would balance the dark background with a vibrant color palette and lots of organic shapes to keep it from appearing like some high-end, luxury brand. The typefaces are both simple and sans serif with blunt, rounded edges in the header styles.
我决定将深色背景与充满活力的调色板和许多有机形状保持平衡，以防止它看起来像某些高端奢侈品牌。 字体既简单又无衬线 ，在标题样式中具有钝圆的边缘。
I also wanted to bring in some of the depth and dynamism I had noticed on the landing page for Dale Carnegie Institute, a brand that I knew our client appreciated for their professionalism and high quality. (I also took a leaf out of their book in focusing on imagery featuring the smiling faces of real people to lend an air of friendliness and a welcoming atmosphere.) I spent a large portion of my design time at this stage referencing the Material Design guidelines for Dark Themes. There I found valuable advice regarding communicating depth on dark backgrounds: the “closer” surfaces appear to the user, the lighter they should be.
我还想介绍我在Dale Carnegie Institute登陆页面上注意到的一些深度和活力 ，该品牌我知道我们的客户因其专业和高质量而受到赞赏。 (我还从他们的书中摘取了叶子，着重研究具有真实人物笑脸的图像，以营造友善和友善的氛围。)在这一阶段，我花了很大一部分设计时间来参考《材料设计指南》为黑暗主题 。 在那里，我发现了有关在深色背景上传达深度的宝贵建议：“更近”的表面在用户看来应该更浅。
将色彩，图像，插图和图像应用于设计中…… (Applying color, imagery, illustrations, and iconography to the design…)
设计分析，评论和迭代 (Design Analysis, Critique, & Iteration)
When I was an undergrad art major, the most important skill my professors were hoping to pass on to us wasn’t how to apply paint to a canvas, ink up a block for printing, or dodging and burning in the darkroom. The most valuable skill we could develop was being able to take a step back and evaluate for ourselves whether the piece we’d been toiling over for so long was still doing what we had set out to do—and if not, was the result heading in a direction we were willing to explore.
当我是本科艺术专业的时候，我的教授希望传递给我们的最重要的技能不是如何在画布上涂油漆，如何为打印块上墨或在暗室中躲避和燃烧。 我们可以开发的最有价值的技能是能够退后一步，并自我评估我们已经努力工作了很长时间的作品是否仍在按计划进行—如果不是，结果就是我们愿意探索的方向。
Evaluation of this kind is even more important for designers. When we have to balance business goals with user needs, we’re no longer dealing with subjective assessments of effectiveness. The work we do has its own role to fulfill and it’s important that we are able to adequately determine whether it’s up to the task.
对于设计师来说，这种评估更为重要。 当我们必须在业务目标与用户需求之间取得平衡时，我们不再需要进行主观的有效性评估。 我们所做的工作有其自己的作用，重要的是我们能够充分确定它是否适合任务。
The scope of this project did not include any usability testing, so it was important that I get feedback from my peers along the way. I had incorporated these elements in micro iterations throughout the design process. For example, a peer suggested that my amorphous background “blobs” as I was lovingly calling them, read to him as more like camo than the abstract flowing composition I was hoping to evoke. Through some iterations, I realized that transitioning the other, more blue-toned green in my palette changed this effect for the better!
该项目的范围不包括任何可用性测试，因此，在此过程中，我必须得到同行的反馈，这一点很重要。 在整个设计过程中，我已将这些元素纳入微迭代中。 例如，一位同事建议我亲切地称呼我那些无定形的背景“斑点”，对他读起来更像是迷彩，而不是我希望唤起的抽象流畅的构图。 通过一些迭代，我意识到过渡调色板中的其他蓝色调绿色会更好地改变这种效果！
However, when I took a step back from this work and had revisited the goals I had set out for myself in the beginning, I realized that there was one in particular that my design was utterly failing to address.
但是，当我从这项工作中退后一步，重新考虑起初为自己设定的目标时，我意识到特别是我的设计完全没有解决一个目标。
I had stated at the outset that one important objective my design had to achieve was to communicate the unique value proposition of the Green Drinks DC service. So far all I had done was provide a visually appealing breakdown of the “two pillars” of the service and did nothing to further explain the value for money that those services (the development workshops in particular) could deliver for users. This fell short of adequately selling the services my client had asked me to design for and failed to provide useful information and context to enhance the users' information-gathering journey.
我一开始就说过，我的设计必须实现的一个重要目标是传达Green Drinks DC服务的独特价值主张。 到目前为止，我所做的只是提供了该服务的“两个Struts”的视觉吸引人的细分，并且并没有进一步解释这些服务(尤其是开发研讨会)可以为用户带来的物有所值。 未能充分销售客户要求我设计的服务，但未能提供有用的信息和上下文来增强用户的信息收集之旅。
In order to remedy this, I brainstormed another section to add to my design that followed conventions I had seen used on other websites and used the icons that others had noted as being a particularly effective element of my design.
为了解决这个问题，我集思广益，在我的设计中加入了另一部分，以遵循我在其他网站上看到的惯例并使用其他人认为是我的设计特别有效的元素的图标。
This was the result:
结果是：
With this addition, I felt confident that I had addressed my design objectives and produced a final design that would be of value not only to my client, but to the end-user as well. If I were to take this design further for the client I would continue to iterate and do more to test the effectiveness of the design on actual users of the Green Drinks DC service. Getting feedback on the placeholder copy that I had generated is a particular area of interest.
通过添加这些内容，我充满信心地实现了我的设计目标，并完成了最终设计，该设计不仅对我的客户有价值，而且对最终用户也很有价值。 如果我要为客户进一步设计，我将继续进行迭代，并做更多的工作来对Green Drinks DC服务的实际用户测试该设计的有效性。 获得有关我生成的占位符副本的反馈是一个特别感兴趣的领域。
There are always ways to get more feedback and the sooner we as designers realize that we’ll never really be done iterating on our work, the better we’ll be at producing quality work for our clients and, most importantly, for our users!
总是有办法获得更多反馈，我们作为设计师，越早意识到我们永远不会真正完成我们的工作迭代，就越能为我们的客户，更重要的是为我们的用户提供高质量的作品！
java商业化
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
