vag vlb
From Apple To automobiles, fast food to family vans, meet the specimen that has earned its stripes as one of the world’s most marketed typefaces. From its conception in the late 1970’s, VAG Rounded has seen itself grow into the preferred typeface for some of the world’s most high-profile corporate powerhouses. But, let’s not jump to the end just yet. This project called on me to convey its rich history and multiple use cases, in order to optimize conversion for licensing on a desktop landing page.
f光盘苹果汽车，快餐家庭车，满足已赢得了条纹作为世界上最市场字体的一个标本。 从1970年代后期的构思开始，VAG Rounded逐渐成长为一些世界上最受瞩目的公司巨头的首选字体。 但是，让我们暂时不要跳到最后。 这个项目要求我传达其丰富的历史和多个用例，以便优化桌面登录页面上许可的转换。
手头的任务 (Task At Hand)
To create a structured and accessible desktop landing page, showcasing the versatility and various uses associated with the typeface, VAG Rounded, to optimize conversion by encouraging users to download.
要创建结构化且可访问的桌面着陆页，展示与字体VAG Rounded字体相关的多功能性和各种用途，以通过鼓励用户下载来优化转换。
Medium: Desktop
中：台式机
Design Tools: Photoshop, Invision app
设计工具： Photoshop，Invision应用
结识：研究 (Getting Acquainted: Research)
As I scoped out the typefaces selected for assignment, I felt confident in my chances. 5 Typefaces, 4 of which I was familiar with and had used previously. Like a group of colleagues gathered for a post-shift brew at the local tavern, I felt I was amongst friends. Interstate: Life is a highway, and this font was one I had driven with plenty. Widely spaced, boasting slanted ascenders, it was a typeface I knew and loved. Next came Tungsten, a typographical renaissance of early 20th century war propaganda, familiar and distinct in all of its sans-serif glory.
当我确定要分配的字体时，我对自己的机会充满信心。 5种字体，其中4种是我以前熟悉并使用过的。 就像一群同事在当地的小酒馆喝酒后喝啤酒一样，我感到自己是朋友中的一员。 州际公路：生命是一条高速公路，而这种字体是我驾驶的丰富字体。 宽间隔，夸张的倾斜上升器是我认识和喜爱的字体。 接下来是Tungsten，这是20世纪初战争宣传的印刷复兴，在其所有的无衬线的荣耀中都很熟悉并且与众不同。
And then came a font family I was less than familiar with. Rounded, airy, yet intentional. Meet VAG Rounded, the font I didn’t know I loved.
然后是我不熟悉的字体家族。 圆润，通风但有意。 认识VAG Rounded，我不知道自己喜欢的字体。
VAG四舍五入简史 (A Brief History of VAG Rounded)
Conceived between 1978–’79, this typeface was created to celebrate the amalgamation of German auto giants Volkswagen and Audi, forming the newly named conglomerate Volkswagen Aktiengesellschaft (hence VAG, in case you were confused).
该字体的构想是在1978年至79年之间，目的是庆祝德国汽车巨头大众和奥迪的合并，从而组建了新的综合性大众汽车股份公司 (因此，如果您感到困惑，可以选择VAG)。
Upon acquisition, with VW using Times, and Audi using a near 50 year-old Futura, finding a font that sufficiently spoke to either brand’s message proved problemtatic. With London-based design agency Sedley Place hired to lead the re-brand, VW believed it integral to design an entirely new typeface in order to form a unified identity for Volkswagen’s umbrella corporation. Fun Fact: this font was originally designed by hand!
收购后，大众公司使用Times ，奥迪公司使用了将近50年的Futura ，因此找到一种能够充分传达两个品牌信息的字体被证明是有问题的。 大众公司相信伦敦的设计公司Sedley Place被聘请领导重新品牌，因此大众认为设计一个全新的字体是必要的，以便为大众汽车伞公司形成统一的标识。 趣闻：该字体最初是手工设计的！
Car enthusiasts alike would not go on to witness another re-brand until 1994, when Audi began its transition into the likes of a full-scale upmarket luxury brand, separating itself from the umbrella marketing campaigns of its sister dealers. However, this typeface was far from its twilight, with it soon thereafter moving on to represent some of the world’s largest corporate behemoths… that weren’t cars.
直到1994年，当奥迪开始向全面的高档奢侈品牌转型，并从姐妹经销商的伞式营销活动中脱颖而出时，汽车爱好者才得以继续见证另一个品牌的重新塑造。 然而，这种字体远非它的暮色，此后不久它又代表了一些世界上最大的企业庞然大物……这些不是汽车。
“我认为我们已经达到了”：VAG已全面使用 (“I Think We’ve Met”: VAG Rounded In Use)
Following its severance from Volkswagen AG in the mid-1990’s, other high-profile corporations took notice to its degree of success across the pond. Following its official release into the public domain by Berthold in 1980, this typeface’s popularity took steam, with millions now possessing the ability to use it, license free, all the while enhancing Volkswagen’s brand image due to association. Fast forward to 1999, and a small family brand by the name of Apple selects it as the official keyboard typeface for the production of its new iMac laptop computers. The brand would continue to use VAG as its official typeface into 2007, where the Imac desktop would adopt it for its keyboard until 2015. Other notable mentions include Jollibee, Novo Mel Honey, Reddit, and Mypace.
在1990年代中期从大众汽车公司 ( Volkswagen AG)撤职后，其他知名公司注意到了它在整个池塘中的成功程度。 自1980年Berthold正式将其发布到公共领域以来，这种字体便开始流行，如今，数以百万计的人拥有使用该字体的能力，无需获得许可，同时由于关联而增强了大众汽车的品牌形象。 快进到1999年，一个以苹果公司名字命名的小型家庭品牌选择它作为生产新iMac笔记本电脑的正式键盘字体。 该品牌将在2007年之前继续使用VAG作为其官方字体，直到2015年Imac台式机将在其键盘上采用VAG。其他值得注意的提及包括Jollibee ， Novo Mel Honey ， Reddit和Mypace。
滑板 (Moodboarding)
Following research, I was confident I had begun to more accurately assess the moods/tones this font evoked. Jovial, approachable, and light on its feet. This was a typeface that had claimed its rise to fame due to its inherent ability to market billion-dollar corporations as a consumers’ friendly neighbour. While comparing the likes of VAG to its more inhospitable serif counterparts, I realized how much more likely I would be to interact with a product that used such a bubbly, geometric font. In Volkswagen’s case, this was no accident. Rounded fonts are depictive of leisure and lightheartedness, subsequently making the process of making a significant purchase (like a car) feel, shall we say, less committal.
经过研究，我相信我已经开始更加准确地评估这种字体引起的情绪/语调。 愉快，平易近人，脚上轻盈。 这种字体因其固有的将数十亿美元的公司作为消费者友好的邻居进行营销的能力而声名rise起。 在将VAG之类的东西与更荒凉的衬线字体进行比较时，我意识到与使用这种起泡的几何字体的产品进行交互的可能性更大。 就大众而言，这绝非偶然。 圆形字体表现出休闲和轻松的情绪，随后使购买(例如汽车)的过程变得不那么固定。
Mood|board noun. : A visual display that utilizes imagery to visualize a product/service’s image, tone and values.
Mood | board 名词。 ：一种利用图像来形象化产品/服务的图像，色调和价值的视觉显示器。
Moving forward, I wanted to ensure I selected a colour palette that properly represented the typeface’s leisurely and hospitable nature. Blushed tones of pink, blue, and yellow that were reflective of a day at the beach, carnival rides, and faded garments. In contrast to my original train of thought, I opted to steer clear of richer, more vibrant colours, such as deep blues and fuchsias, believing they felt heavier on the eyes, which was not reflective of the font’s airy appearance.
展望未来，我想确保选择的调色板正确地代表了字体的悠闲和好客的性质。 粉色，蓝色和黄色的模糊色调反映出沙滩上的一天，狂欢节和褪色的服装。 与我最初的思路相反，我选择避免使用更深，更鲜艳的颜色，例如深蓝色和倒挂金钟，认为它们在眼睛上感觉较重，这并不反映字体的通风外观。
Upon finalization of the initial iteration of my moodboard, I felt there was something missing. Although aesthetically pleasing, it felt… flat, one-dimensional. I pivoted my scope, and chose to include GIFs as a more dynamic visual component to further accentuate the mood I intended to communicate.
完成我的情绪板的初始迭代的最终确定后，我感到缺少一些东西。 尽管在美学上令人愉悦，但它感觉……平坦，一维。 我调整了工作范围，并选择将GIF包含为更具动态性的视觉组件，以进一步加深我打算传达的情绪。
发现“为什么”：入门表 (Discovering The “Why”: Inception Sheet)
Establishing visual identity, although essential, was rendered useless in the absence of a “why”. Merely asking “what” do I want my landing page to look and feel like simply did not suffice. Much like a moodboard uses imagery to convey a certain feel, an inception sheet was helpful in capturing the mood and visual language of the design process textually. By gathering keywords that best described the specimen’s shape, space, movement and mood, I was able to more accurately envision what elements and colour palettes were best suited to include on my landing page as I proceeded into the design scope of the project.
建立视觉识别，尽管必不可少，但在没有“为什么”的情况下变得无用。 仅仅问“什么”，我是否希望我的目标网页看起来和感觉根本不够用。 就像情绪板使用图像传达某种感觉一样，初始表有助于从文本上捕捉设计过程的情绪和视觉语言。 通过收集最能描述标本的形状，空间，运动和情绪的关键字，当我进入项目的设计范围时，我能够更准确地预想哪些元素和调色板最适合包含在我的登录页面中。
发现我们的“谁”：创建角色 (Discovering Our “Who”: Creating a Persona)
After having compiled all the necessary means to create a landing page geared toward driving conversion, I felt it necessary to back up and put my UX pants on before proceeding. By developing a primary user persona (a fictional representation of one’s target audience), I would be able to better adhere to a user-centered approach, and know just who I was designing for! I considered the following criteria important to include:
整理完所有必要的方法以创建用于驱动转换的登录页面后，我觉得有必要备份并穿上UX裤，然后再继续操作。 通过开发主要的用户角色(虚构的目标受众形象)，我将能够更好地坚持以用户为中心的方法，并且只知道我为谁设计！ 我认为以下重要条件很重要：
- Demographic information (age, gender, etc.) 人口统计信息(年龄，性别等)
- Occupation (does their line of work involve working with typefaces?) 职业(他们的工作范围涉及使用字体吗？)
- Goals/motivations 目标/动机
- Pain points 痛点
As this project was UI focused, I developed Anna based off my own assumptions. A freelance product designer, she has been approached by a local ice cream shop to build them a new logo. After several hours of searching, she grows weary, unable to locate a font that speaks to the youth and innocence associated with eating a sweet treat.
由于这个项目是针对UI的，因此我根据自己的假设开发了Anna。 她是一名自由产品设计师，当地的一家冰淇淋店向她求助，为他们建立了新的徽标。 经过几个小时的搜索，她变得疲倦，无法找到一种字体，这种字体可以说出年轻人与吃甜食有关的纯真。
“As a freelance designer, I need to locate a typeface that accurately depicts the mood of my client, so I can better manage my design approach in creating a new brand logo” — Anna
“作为自由设计师，我需要找到一种能够准确描述客户情绪的字体，以便在创建新的品牌徽标时更好地管理自己的设计方法。” —安娜
揭开序幕：线框图制作过程 (Kicking It Off: The Wireframing Process)
Based off personal experience, designers tend to want to do too much too soon, subsequently tending to skip important stages of the lo-fi process. I took the approach of playing a one-man game of crazy 8’s (I highly recommend this strategy). With 8 minutes on the clock, I took pen to paper and spewed every idea I had onto the sheet before me in a crowded mess. The intention of this approach is to focus on not producing clean and structured ideas right off the bat, but rather merely spewing all of your ideas onto one centralized canvas. Aspects of the landing page, such as hero text, layouts, and general imagery were scribbled down to help vet my thought process.
根据个人经验，设计人员倾向于过早地做太多事情，随后倾向于跳过lo-fi流程的重要阶段。 我采取了疯狂的8人制单人游戏的方式(我强烈推荐这种策略)。 整整八分钟的时间，我用笔在纸上，把我的所有想法都挤在了纸上。 这种方法的目的是专注于不立即产生干净，结构化的想法，而只是将所有想法喷洒到一个集中的画布上。 登陆页面的各个方面(例如英雄文字，布局和一般图像)都经过了草绘，以帮助审核我的思考过程。
My goal was to create a page that included as many opportunities for the user to interact with the font as possible, in order to increase the likelihood of conversion. How could we achieve this? Here were a few of my strategies:
我的目标是创建一个页面，其中包含尽可能多的机会供用户与字体进行交互，以增加转换的可能性。 我们如何实现这一目标？ 这是我的一些策略：
Interactive elements that allowed the user to play with and sample the typeface in a multitude of ways
交互式元素，允许用户以多种方式使用和采样字体
Multiple entry points to purchase/license across the interface. The more the user sees an option to convert, the more likely they are to do so
跨界面购买/许可的多个入口点。 用户看到的转换选项越多，他们进行转换的可能性就越大
Being more seasoned to the likes of XD and Figma, it was vital that I create a components board to better organize my design process. I began by creating a font scale to ensure that an adequate degree of visual hierarchy would be made present across the board. Fonts were scaled using the major third typescale (1.250).
由于对XD和Figma之类的产品更加熟悉，因此至关重要的是，我创建一个组件板以更好地组织我的设计过程。 我首先创建一个字体比例，以确保在整个面板上都具有足够的视觉层次。 使用主要的第三种字体比例(1.250)缩放字体。
Next, I included a variety of possible visual elements that I felt spoke to the general theme of the landing page. This section consisted of a mixture of altered stock images and homemade illustrations/icons, along with a primary and secondary CTA (i.e. submit, purchase, download).
接下来，我加入了各种可能的视觉元素，使我感觉到着陆页的一般主题。 此部分由更改后的库存图片和自制插图/图标以及主要和次要CTA(即提交，购买，下载)组成。
最终产品 (The Final Product)
Original iterations of my hi-fi landing page included a green background against charcoal-coloured CTA’s. However, I found that a green background was not accessible when paired with pink and yellow visual elements, along with white copy. A black background allowed me to utilize my entire colour palette throughout, while still adhering to accessibility guidelines. Additionally, the original blue/steel that was included in my colour palette did not fair well against a dark background. I solved this issue by switching to a brighter seafoam-green, that still spoke to the bubbly feel of the specimen’s aesthetic.
我的Hi-Fi登陆页面的原始版本包括针对木炭色CTA的绿色背景。 但是，我发现与粉红色和黄色视觉元素以及白色副本搭配使用时，无法访问绿色背景。 黑色背景使我可以始终使用我的整个调色板，同时仍然遵守辅助功能准则。 此外，我的调色板中包含的原始蓝色/钢在深色背景下效果不佳。 我解决了这个问题，改用了较亮的海泡绿，这仍然使人联想到了标本的美感。
I experimented with the (less that intuitive) pen tool, creating rounded, abstract shapes to place across borders of the interface to accentuate overall feelings of fluidity.
我尝试了(不太直观)钢笔工具，创建了圆形的抽象形状，将其放置在界面的边界上，以增强整体的流畅感。
Due to the limited prototyping capabilities of Photoshop, I ended up having to duplicate screens with certain functions/visual elements turned on and off to provide the illusion of feeling interactive. For example, I saved my final landing page with the download function in the header in its default state and on hover. Both screens were uploaded and prototyped in Invision.
由于Photoshop的原型制作能力有限，我最终不得不复制具有某些功能/可视元素已打开和关闭的屏幕，以提供互动感。 例如，我将带有下载功能的最终登录页面保存在标头中，并且处于默认状态且悬停时。 这两个屏幕均已在Invision中上载并制作了原型。
Primary CTA’s were created as FAB’s (floating action buttons). Taking inspiration from Google’s Material Design approach, I used light shadowing effects and a duplicated bottom layer to give the illusion of depth. CTAs were designed as being seafoam green in their default states, turning pink in their active states to signify to users that an action has been successfully completed (i.e. downloading VAG Rounded).
主要CTA被创建为FAB(浮动操作按钮)。 从Google的Material Design方法中汲取灵感，我使用了光影效果和重复的底层来营造深度感。 在默认状态下，CTA被设计为绿色的泡沫，在活动状态下变为粉红色，以向用户表示操作已成功完成(即下载VAG Rounded)。
As previously discussed, simply smacking a conversion CTA (i.e. download or purchase) in the hero section does not suffice when attempting to sway a user into purchasing a product or service. I knew that this landing page had to serve as more than a history lesson, but rather an interactive experience that adequately displayed its versatility. I included an editable text box, where users would be able to type in up to 109 different languages, to show off its multilingualism. Once again, due to the limited prototyping available to me in photoshop and Invision, my original vision for this function could not be animated according to plan. In a perfect world, the descriptive copy would disappear once users click into the text box, providing instructions/guidance as to inform the user of its respective function (don’t let your users think, great copy creates seamless experiences).
如前所述，当试图诱使用户购买产品或服务时，仅在英雄部分中添加转化CTA(即下载或购买)是不够的。 我知道，该着陆页不仅要作为历史课程，而且还应该是一种互动体验，可以充分展示其多功能性。 我提供了一个可编辑的文本框，用户可以在其中输入多达109种不同的语言，以展示其多种语言。 再一次，由于我在photoshop和Invision中可用的原型有限，我对该功能的最初愿景无法按计划进行动画处理。 在理想情况下，一旦用户单击文本框，说明性副本就会消失，提供说明/指导以告知用户其各自的功能(不要让您的用户思考，出色的副本会带来无缝的体验)。
This project further reaffirmed to me how important typography is to the design process, and how text alone can be used to create beautiful interfaces. With the exception of a small selection of stock imagery, a majority of the interface was (and can be) designed using variations of VAG Rounded, along with its selection of weights (Black, Bold, Light, and Thin). Using photoshop’s character menu, I was able to create an aesthetic and organized interface through the sole use of text.
这个项目进一步向我重申了排版对于设计过程有多么重要，以及如何单独使用文本来创建漂亮的界面。 除了少量选择的库存图像外，大部分(并且可以)使用VAG Rounded的变体及其权重(黑色，粗体，浅色和薄型)进行设计。 使用photoshop的角色菜单，我能够通过仅使用文本来创建美观而有条理的界面。
Furthermore, this was my first opportunity to develop my skills in writing proper HTML and CSS syntax, as we coded landings pages alongside our design process.
此外，这是我第一次开发自己的技能，以编写正确HTML和CSS语法，因为我们在设计过程中对着陆页进行了编码。
vag vlb
2229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
