66

优设专访!给任天堂做设计的大神是如何做排版设计的?

 5 years ago
source link: https://www.uisdc.com/nguyen-le-how-to-make-typographic-design?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

yMvia2J.jpg!web

Nguyen Le(个人主页: dribbble.com/newincreative ) 是 Dribbble 上的排版设计达人,他的网页作品简洁富有国际范儿,拥有12年的设计经验,擅长极简主义的网页设计风格,他的设计类订阅邮件每周发布,为世界各地的设计师带来新鲜知识干货,不仅作品高产而且还有一颗乐于分享的心,今天优设独家为您带来 Nguyen 的设计访谈,内含他的排版设计心得,这可是在他的付费课程上的超级干货哦。

个人主页 – http://www.verse-co.com/

Dribbble 主页 – https://dribbble.com/newincreative

yMFV3ua.jpg!web

△ Nguyen Le Dribbble主页

优设:

能为优设的粉丝们介绍一下您自己么?您的设计成长历程是如何的,是什么让您从一个品牌设计师转到自由设计师的?

Nguyen Le:

我已经从事设计专业12年了,职业生涯始于大学期间,刚开始也是一个初级设计师和程序员,那段时间成长很快,也是在那段时间看到了设计的发展,并意识到了设计的变化速度之快。

bAFzEr3.jpg!web

△ Nguyen Le 作品

​为了给自己创造更好的成长空间,前8年,我在不同的设计工作室工作,也有幸作为创意总监为任天堂、日产、阿迪达斯、塔吉特百货(美国零售巨头)、澳大利亚国家银行等公司进行设计服务。期间我与非常优秀的团队合作,也学到不少好东西。但是每天开始变得非常忙,开会的时间比设计的时间更长,我感觉不到自我的成长,设计激情也被消磨,于是我决定做出改变!

RBjaier.jpg!web

△ Nguyen Le 作品

​成为自由设计师之后,原计划是从墨尔本搬家到纽约,但在墨尔本我又接到了很多工作,最后我决定继续呆在墨尔本,在这4年里,我进行日常设计学习,空余时间旅游,自由设计师的职业让我有了更多的选择权,可以选择进行更有趣的、有挑战性的项目。

优设:

您是如何与客户进行有效沟通的?

Nguyen Le:

我有两类客户,一是大家常常面对的甲方,另一种就是我的课程学生。

对甲方来说,在早期,我会选择尽量多的获取有效信息。与客户建立信任和合作关系非常重要。我们一般是通过邮件、Skype 和 Slack 进行实时沟通,自己设定日期并尽可能提前交付,例如你说在周四交付草图,尝试周三或者更早完成。这是在一开始就能建立良好关系的秘诀。当你写邮件时,可以设置一个日程,明确告知客户你的下一步是要做什么。

zqimAnm.jpg!web

​对我的学生而言,我有一个自动回复的电子邮件,学生开启七天免费学习邮件时,每日发送课程邮件,并跟进看有什么需要帮助的地方,并确保他们在课程中获得更多价值。我们还有一个 Slack 社群,在里面学生可以向我提问,分享想法和链接,我们一起学习。总之,原则就是尽我所能的帮助到他们。

优设:

能为我们详细的拆解您的一个设计案列么?

Nguyen Le:

我们来看看我的 Bakers Guild 项目。

1. 信息层次结构

Nrmeyqm.jpg!web

△ Bakers Guild 项目

​在进行设计布局时,首先要考虑的就是层次结构。使用您产品 / 网站 / 应用的用户首先会注意哪些内容?第二和第三注意点呢?信息层次结构可以让用户体验更好,也可以让我们轻松设计出画面平衡、有细节质感的设计。在 Bakers Guild 这个页面中,第一个被注意的内容应该是左半部分的文案(Our passion…)和图片素材。然后再关注到右半部分的关于我们,通过界面元素中的大小、粗细对比,我们可以知道用户的视觉流向。

2. 行高和栅格

BbIjeeq.jpg!web

下一步要考虑的是行高。根据经验,使用的理想标高是字体高度的1.2到1.4倍。我在正文中使用的文本大小是16px,行高24px。网格的使用可以在画面中创建一种秩序感和统一性。

3. 字间距

FvqqEzB.jpg!web

左侧的字间距要明显大于右侧,看上去更加和谐。

4. 首字下沉

FR7z6bj.jpg!web

您可以在下面看到操作中的首字下沉。它是大M。它是一种装饰性元素,能将用户吸引到正文中,并使排版变得有趣。

​5. 字距

7f2MRbZ.jpg!web

字距调整是2个特定字符之间的空格,与字间距不同,后者主要是全文本的字间距大小。 特别是当你的文字非常大时,字符之间的间距变得更加明显。 我们可以使用字距来手动调整,特别是在 logo 和大的文本中,这非常重要。

6. 连字

zAJrU3V.jpg!web

​​连字是指两个特定字符(如「ff」和「fl」)连接并拥有各自的字符,这样做的目的会让整体更加美观。

​7. 字形和替代字母

字形和替代字母是字体中存在的特殊字符。某些字体具有替换字符,例如可以使用不同的「A」或特定字母,而不是标准字母。当您尝试在设计中获得有趣的视觉变化时,它们非常适合。这些替代字母主要用于标题。

8. 正确的字符

rYNbee2.jpg!web

正确的字符是针对特定的字符,如破折号、连字符、引号与虚号等等。注意这些小元素意味着我们从印刷的角度创建的所有内容都是需要考虑的。

优设:

我们知道您已经撰写每周电邮很久了,请问您是怎么保持动力并高效分享有效经验的?

Nguyen Le:

责任和习惯是我坚持下来的动力,再就是一些我从其他设计师那里得来的有效反馈,他们使我保持积极性,继续写作和分享我的日常所得。我的每周电子邮件有助于建立我的设计影响力,在那里我可以通过分享帮助到别人。

优设:

我们看到您的排版设计更加极简的风格,请问您是怎么说服偏好繁复的甲方的?

Nguyen Le:

​从事了这么久的设计工作,可以说已经能够 hold 住各种「风格」。现在经常看的页面是我正在处理的案例的最佳视觉方案。所以这一切应该归结为项目的目标,这才是导致特定视觉效果的原因。先解决问题,然后再担心「风格」。因为你所看到的是我解决问题的方案,我用此来吸引客户。你不应该为了极简而使用极简排版,只是单纯的追求漂亮,是因为这样的排版能够解决问题,而这种画面恰巧是「极简风格」而已,所以来找我的客户都需要知道自己想要的是什么。

RNVbeaI.jpg!web

△ Type layout

​至于如何处理偏好繁复的客户,我认为这取决于教育和理解客户的价值。如果您能向客户展示他们的客户更喜欢设计A,而不喜欢繁复的设计B,你可以向他们阐述留白的价值,不仅能够改善他们的业务成果,同时也能够达到他们想要的效果,例如转化率、更多的客户等等。如果你把这些和你的设计决策放在一起,那么客户会更容易理解。简而言之,您得让用户理解我们的工作价值。

优设:

您的典型一天是怎样的?

Nguyen Le:

ZNRrU3B.jpg!web

​早上8点到10点半,我会和我的孩子们相处(一个6个月一个2岁半),然后开始进行工作。设计、写作、发邮件、思考、阅读。直到下午5点半,剩下的就是家庭时间,遛狗、晚餐和娱乐,晚上会阅读1小时,当然睡前要先哄宝贝们睡觉: )

优设:

能否为我们分享下您是如何有效提升自己的设计能力?有什么值得推荐的好书么或者效率工具么?

Nguyen Le:

伊拉·格拉斯说过:作为初学者,没有人告诉过你这些,我希望当年能有人告诉我。我们这些从事创意工作的人,之所以做这行,是有品位,但是这里有个坎儿,并不是所有人能迈过去。你在刚开始工作的时候,你知道自己有潜力,想做的东西也会有潜力,但是就是做不出来。有很多人对自己失望并退出,这很正常,在这个时候,请你记住,一定要坚持,每周写一些小故事,每周都有一些小成果,只有做好了这些,你才能够得到质的改变,才能跨过这个坎儿,你的工作才能做得和你预期的一样好。这需要时间,这很正常,你一定要拼尽全力!

是的,秘诀就是持续性工作。多看优秀的作品,并自己尝试再创造、改进,让它也成为你自己的知识,才能够弥补差距。 至于书籍, 我在这里做了一个清单:

优设:

您的工作台是什么样子的?​

Nguyen Le:

FzAvYzn.jpg!web

​△ Nguyen Le 的工作台

哈哈,我的家人带给我的快乐比任何项目都多,除此之外,我非常重视我的书,或者更确切地说是这些书给我的知识。我每年至少阅读12本书。我喜欢设计,设计让我非常高兴,因为我可以高度专注和创造。 这对于我来讲,是一件非常幸运的事——边做边玩。

感谢设计师 Nguyen Le 给优设小伙伴们带来的这次精彩分享,让我们看到了一个作品背后最真实的一面。​喜欢的朋友可以访问 Nguyen Le 主页哦。

「设计师专访,了解大牛都是如何开展设计的」

6Z3EVbb.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK