草图在响应网页设计的运用(案例研究)

如果你是一个网站建设设计师, 在过去的一年你难以避免谈论素描。 推出这个设计应用人事行业由Adobe二十多年,它引起了一场争论是否素描比Photoshop和Illustrator(好 烟花 )。

长期Photoshop用户自己,我切换到素描在2014年初,没有回头。 我爱程序的某些特性,如简单的接口,文件自动保存和无限的画布。 然而,很多其他程序也有类似的功能,直到最近的更新(3.2草图),用户与应用大量的bug。

所以,为什么我继续使用草图? 错误或没有bug,它已成为最好的UI设计的工具,包括响应网页设计。

案例研究:舰队脚运动

让我们看一个新推出的网站设计,我在工作了 舰队的脚 ,运行存储在美国与80多家特许经营店。 与旧网站,新舰队的脚有一个电子商务在线销售产品组件,和它的响应。 与超过15模板设计为多个设备和几轮修改,这个项目是巨大的。

在Photoshop中,坚持组织中所有的文档和轮修正将是艰巨的和耗时。 然而,素描的工具,我能通过这个项目从开始到结束工作更顺利,轻松快速地比我使用另一个程序可以做。 让我们看看如何创建一个网站草图设计大大提高了响应过程。

看一下基础知识

激发草图,您将立即通知一个干净、unbloated接口。 是的,素描工具集肯定是比一些其他设计项目减少。 然而,它只包括可以重新创建HTML和CSS3。 所以,没有不必要的照片滤镜,3 d工具或其他工具,就能慢下来。 应用程序只提供了必要做网络和用户界面的工作,使设计过程快得多。

和素描所缺乏的,它 插件 弥补。 素描插件是类似于Photoshop和覆盖从一个简单的工具,互换边境和填充颜色完成内容生成器。 我等了几个月开始使用自己的插件,因为我想要完全熟悉程序。 大错误,这些插件是巨大的省时便利,已经成为我工作流程的组成部分。

我首先推荐下载当从草图开始 素描工具箱 。 这个插件管理器允许您直接浏览和安装插件和跟踪你的使用。

第二个基本要注意的是,所有你创建草图是矢量。 响应时代的设计,创造一个设计向量是关键。 设计师经常需要考虑高清与normal-definition显示器,窄而宽屏幕等等。 建筑设计,重新调节所有这些格式是至关重要的,然而,创建一个单独的模型为每个大小是乏味而耗时的。 草图的能力自由调整对象节省时间和精力。

使素描有别于其他基于矢量的计划,这也是pixel-aware。 你画的形状总是提前到最近的像素,这意味着你不再需要担心half-pixels或模糊的线条。 这使得程序适合屏幕设计。

开始

现在,让我们走进我如何使用草图设计舰队脚的新网站。 响应时代的设计,能够直接跳转到设计一个模型是相当罕见的。

因为舰队的脚将网站添加新组件,首先是内容策略。 我坐在在早期几次会议讨论如何制定新的网站。 我喜欢用一个方便的素描插件 AEFlowchart 为网站创建站点树我在工作。 尤其是舰队的脚,这是有用的跟踪网站的新组织和我能与我的团队。 这是这样一个有用的参考援助在设计过程中,我不会花时间创建它在另一个程序,因为它太耗费时间。

草图也使得moodboards简单创建和一个更好的项目资源。 首先,注意你的所有文件 生活在一个文档 。 草图包含一个页面的抽屉artboard侧边栏,允许您快速滚动文件之间。 对于这样的大型项目来说,这是特别高兴能够很快网站树之间来回跳,moodboard和样机我设计或更改。

让我们穿过舰队英尺的一个早期版本的模板 风格的瓷砖 (一个方便 草图模板 已经可以下载)。 能够创建排版元素非常有用,因为您可以创建 文本样式 内联样式如标题和块报价,然后运用这些风格在其他文档文本。 如果你的客户觉得他们讨厌 H1以后的字体在设计过程中,你所要做的就是更新风格的一个实例,它将更新您的项目文件中的每个实例。 这个应用程序也使用本地文本渲染文本(反锯齿),以便在浏览器中看起来如何在设计文件,不再想知道你选择的轻量级版本的字体标题将可读的屏幕。

颜色管理 也简化了素描。 创建moodboard调色板,和最常见的颜色将会拿出最重要的色板快速使用后在设计过程。 除了常见的颜色,3.1更新允许您向文档添加自定义颜色色板(根据3.3的beta指出,自定义调色板很快)。

最后,就像你可以滚动你的每一个文件在一个文档,你也可以复制和粘贴对象和对象类型(如梯度和颜色填充)从一个文件到另一个地方。 这个特性在Photoshop是不可能的,但它是非常有用的。 能够复制和粘贴元素从moodboard你的第一个模型,甚至从一个模型到下一个对象,是伟大的。

设计主页

现在您已经了解了如何创建文档中一些基本的风格,让我们看看如何创建我的一些元素在主页上。

我最喜欢的特性之一草图是内置的网格布局。 在Photoshop中,我不得不依赖插件,一系列的指导方针或单独的层有一个临时的网格,不会很容易编辑。 在素描中,您可以很容易地切换一个透明的布局指导,并迅速改变列和地沟大小。 编辑网格布局,去“视图”→“布局设置。 “我已经创建了一个默认的1080像素,12日的一篇专栏网格与由水槽,我只是根据需要改变项目。 每当我想看到网格或关机,我只是打击 控制+ L。

如前所述,任何可能在素描的CSS是可能的。 创建圆角操作按钮上点击侧边栏的对象和调整半径。 渐变叠加在图像只有一个点击添加,不要只依赖的颜色色板,并呈现忠实浏览器将显示。

CSS3工具是漂亮的,其他几个设计程序有这些工具。 草图则更进一步,使设计师能够准确复制这些元素的CSS样式。 右键单击任何对象复制的样式,包括层的名字正如上面注释的代码。 这使得更设计和开发之间的无缝体验。

除了创建和复制的CSS样式,设计复制的内容是一件容易的事。 素描允许你将一组对象转变为一个 象征 可以复制和重复,任何更改该对象会自动同步到所有实例!

查看博客文章感觉脚的底部的主页。 因为只有三个,修改都不会是一个巨大的交易,但它仍将是乏味的。 使用符号,我们可以在图像的大小,文本和颜色三个同时,让生活更容易一些。 符号甚至模板之间的工作,所以如果我们决定使用清单博客页面上的相同的布局,所有我们要做的就是复制符号的一个实例,和他们之间的变化同步。 当你准备添加的内容,就像一个图像或一个标题,你所要做的就是右键单击并分离对象从原来的象征。

虽然我使用符号博客文章和产品清单,我喜欢使用 动态按钮 插件页面上的按钮。 插件按钮实际上创建了一个符号,但是 自动调整填充 在双方根据文本的长度。 这是一个很好的节省时间与页面有几个按钮,这样的主页。 简单地创建一个文本与初始按钮文字层,选择插件,编辑层的名字反映了填充你的按钮的背景(例如 10:20:10:20), 命令+ J和哈! 你现在已经有了一个动态按钮,您可以重复持续整个设计只是通过编辑按钮的文本。

创建一个产品和团队清单页面

我触碰短暂如何有用的符号可以在主页上,但与大量的重复内容页面,产品和团队清单页面吗? 在使用一个符号来创建一个个人项目清单会很有帮助,内容最终将需要被添加到所有这些对象为了看现实的客户端。

添加内容到20 +的物品在一个模型将是一个巨大的痛苦。 另外,客户很少设计批准之前准备好内容。 值得庆幸的是,草图有几个插件自动生成内容的设计。

类似产品清单页面,我们不想花大量的时间寻找鞋白色背景的图片之前第一轮修改;相反,我们只需要一个图像占位符。 的 天的球员 插件是一个巨大的资源,填写各图像占位符服务。 我喜欢Placehold.it 因为这是我工作的开发人员使用,和我使用 Lorem像素 特定的图像。 选择插件和服务你想使用的图片,编辑选项为您的占位符,比如尺寸和颜色,并插入它在产品对象组。 这是容易得多比谷歌上搜索图片作为占位符!

为样机,需要更多填充内容,我喜欢 内容生成器 插件。 团队清单页面,例如,需要一个男性或女性形象,一个名字,一个标题和一些联系信息。 使用插件,所有我要做的就是选择图像占位符框为每个团队成员,去插件选项和选择一个男性和女性的化身。 填写姓名、电子邮件地址和电话号码也同样简单。

素描的特点不仅仅是用于模拟与重复的内容,但是对于标准的web页面。 我们说我们需要添加一些文本团队页面的底部,在那里有一些文本解释职业舰队的脚。 占位符文本,我们可以再次使用方便 内容生成器 插件填写lorem ipsum文本,完全消除了需要找到一个在线服务来生成同样的事情。 另外,你注意到文本的要点吗? 素描的另一个很棒的特性是内置的一代的编号和项目符号列表——这一特性一直是缺乏其他设计项目(包括全能者Photoshop和屏幕设计型烟花)和辛苦乏味的实现。 能够格式文本如何会出现在浏览器中是伟大的,和素描可以帮助您做到!

手机和平板模型设计

我提到了如何创建几个元素为一个标准的web页面。 现在,让我们进入响应细节素描为何如此伟大的网页设计。

素描的我最喜欢的一个特性是支持多种artboards画布。 Photoshop迫使你创建多个PSD文件,然后在窗口之间切换各种原型。 这个过程是一个麻烦,我只会造成手机和平板模型的大项目。

在素描中,您可以看到桌面,平板电脑和移动模型 在一个视图 同时,允许你的工作模型。 舰队的脚,尤其是多个artboards被证明是特别有用,因为大量的模板。 在编辑符号、文本风格和颜色,我可以看到的变化是如何影响所有的模型。 看到这也有助于设计师保持意识的内容从桌面到移动流和交互。

在草图创建这些多个artboards也容易。 简单的新闻 一个创建一个artboard和草图将提供一个列表显示28常见的屏幕和图标大小可供选择,包括“视网膜”大小。 这是响应设计中特别有用,因为你不需要担心得到正确的尺寸在创建模型。

素描的另一个整洁的特性是您可以预览设计在设备上他们是认为。 虽然不是技术上一个内置的特性, 素描的镜子 应用同步开放文档,让你看看你的设计会在iPhone或者iPad和即时预览更改。 这个程序已经被证明是适合做最后的调整和向客户展示设计。

在创建草图中的静态模型在不同的断点可以成为一个伟大的方式来显示客户端或开发人员如何应该出现的东西,这并不总是最有效的(或有效)。 给更多的流体和现实的预览如何响应设计实际上会通过交互式原型正在迅速成为一个网页设计师的必要性。 虽然素描没有内置的原型特征,值得庆幸的是其他程序集成素描的工作流模型。 著名的交互式原型应用程序等 InVision , UXPin和 奇迹 现在可以直接使用草图文件。 甚至原型插件看起来也在上升。 素描筹划者 使用FramerJS 帮助您创建交互式原型直接从画布,和目前工作草图的最新测试版(3.3)。

移动开发

一旦舰队脚设计已经准备好开发,是时候出口的资产。 当我第一次开始使用素描,我曾工作过的所有的开发人员,有这个应用程序,我不会强迫他们购买东西我只是测试。 因此,它是我项目的所有资产。

值得庆幸的是,素描使出口超宽松的所有文件。 把我们使用的图标移动导航,例如。 只需单击组图层,然后点击“导出”按钮在右下角,我可以保存图标在SVG web或PNG格式或PNG @2x视网膜显示。 这涵盖了所有的各种设备上显示资产的基础。

所以,我图形资产交付给开发人员,但不知道如何将他们所有的颜色,字体和字体大小? 使这个简单的草图。 使用 素描风格库存 插件,您可以创建一个点击所有的库存颜色的色板和十六进制代码在页面上使用。 字体以同样的方式工作。 我喜欢使用插件创建一个文本风格库存作为开发人员的参考指南。 还记得我提到的,您可以复制任何元素的CSS样式文件吗? 让这些文本样式可用的形式对于开发人员来说,你所要做的是选择所有图层的类型库存,将CSS样式和粘贴复制成一个样式表。 使用草图,可以让开发人员的所有资产和风格,他们需要开始没有他们曾经触摸应用程序!

缺失的是什么?

在本文中我说了很多关于伟大的素描一直为我设计的工作流,但缺点呢? 应用程序仍然不能 只有设计方案在你的工具箱。 bitmap-editing工具素描还有很多不足之处,也不为我工作的大部分时间,使得我在Photoshop作物或删除普通背景。 虽然密集的插图工作可以通过素描,它经常减慢了应用程序。

素描的另一个缺点是它的插件。 虽然我已经沉迷于他们中的许多人在这篇文章中,我希望这些特性是直接内置草图。 因为这些插件是由第三方,一个简单的草图或更新插件本身能使人瘫痪。 这意味着你永远无法完全依靠他们在您的工作流。

最后,这个程序仍然局限于Mac OS X用户。 这不仅排除设计师使用Windows,但它很可能,你可以分享一个本地文件与一名开发人员,项目经理或客户。

结论

虽然它仍然绝对是一项正在进行中的工作,素描继续是我大网络设计方案。 它的web工具和界面优化设计。 半成品artboard模板、符号和简单的导出功能已经大大加快我的工作流程,使设计过程更加容易。 草图也提高了我的整个工作流程,从moodboards到开发的早期阶段,使其快速响应设计的好工具。

文章整理来自网络，转载请注明北京网站建设公司-创新互联，翻译不好，请见谅！

新闻标题：草图在响应网页设计的运用(案例研究)
当前URL：/news29/80429.html

成都网站建设公司_创新互联，为您提供静态网站、自适应网站、用户体验、品牌网站建设、外贸网站建设、网站内链

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联