Web 设计师的 50 个超便利工具.docx
《Web 设计师的 50 个超便利工具.docx》由会员分享,可在线阅读,更多相关《Web 设计师的 50 个超便利工具.docx(30页珍藏版)》请在冰豆网上搜索。
Web设计师的50个超便利工具
Web设计师的50个超便利工具(上)
作为一个Web设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。
本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在,这是第一部分。
LaunchList
站点发布前的工作清单,预设了28个需要检查的事项,也可以自定义。
同类工具:
UltimateWebsiteLaunchChecklist以及TheUltimateWebsitePrelaunchChecklist。
PencilProject:
SketchingandPrototypingwithFirefox
一个开源GUI原型设计工具。
Zootool
一个非常漂亮的书签工具,可以将你收集的各种素材,图片,文档,链接,视频等在线组织到一起。
Bounce(推荐)
输入一个站点地址,该程序会给该站点截图,然后,你可以在上面批注,加评论,并和朋友分享。
非常适合用来和您的客户在线就某个站点的设计进行讨论。
NiniteBatchInstaller
这个站点可以将很多免费的流行软件(最好的版本)打包在一起,一次性安装到你的机器,支持Windows7,Vista和XP。
SupportDetails(强烈推荐)
假如你想让你的用户提供他/她所使用的浏览器环境,比如Flash版本,操作系统,屏幕分辨率,Cookie,JavaScript状态等,可以让他/她访问一下这个站点,这个站点或自动将这些内容探测出来,并允许用户现场通过邮件将报告发送给你。
MugTug’sDarkroom
一个在线图片处理程序,可以调整对比度,白平衡,曝光,饱和度等,可以从Picasa及Flickr上传图片,同类产品:
Pixlr及SumoPaint。
VisualWebsiteOptimizer(强烈推荐)
VisualWebsiteOptimizer绝对是你所能见到的最好的A/B测试工具。
Keyonary
这个简单的在线工具可以帮你列出MacOSX,Photoshop等工具的快捷键清单。
gridrbuildrrr
一个在线网格设计工具,选择你希望使用的网格布局,帮你预览并生成CSS代码。
InstantBlueprint–Createawebprojectframeworkinseconds.
帮你瞬间生成一个Web项目框架,基于合法HTML/XHTML和CSS。
Hummingbird
一个实时的(真正的实时,每秒刷新20次)站点流量分析工具,基于Node.js.
jsFiddle
在线Web编辑器,支持JavaScript,MooTools,jQuery,Prototype,YUI,Glow,Dojo,HTML以及CSS。
String:
createamulti-languagewebsiteorapp
帮你创建多语种Web应用的资源文件,
Titanpad
可以多人同时编辑同一个文档,别的改动会实时以不同颜色标识,可以是同一个办公室的多个用户,也可以是地球另一边的多个用户。
PixelnovelTimeline:
VersionControlforAdobePhotoshop
该工具通过插件方式集成Subversion客户端,可以在Photoshop中实现版本控制。
非免费工具。
0to255
给出一种颜色,会帮你列出这种颜色由浅入深的各种颜色变化,并特别针对Web做了优化。
LoadImpact:
Websiteload/stresstest
一个在线压力测试工具,模拟多用户同时访问你的站点,并出具报告以分析你的站点可以支撑的访问者数量。
Ideone:
OnlineIDE&DebuggingTool
一个在线IDE和调试工具,支持多达40种语言,包括C++,Java,JavaScript,Perl,PHP,PythonandRuby,同类产品:
PHPAnywhere以及CodeRun。
OnlineDummyImageGenerator
快速帮你生成一个在线虚拟图片,以便您进行某些测试。
HiFiRegExpTool
在线正则表达式工具。
Tableizer(推荐)
将你Excel表格中的内容复制粘贴到这个站点,它会帮你生成HTML格式的表格(HTMLTable)。
FollowUpThen:
EasyEmailReminder
-假如你希望有人提醒你什么时候该做什么事,你可以给比如1day@一类的地址发个邮件,1day表示一天后,这样,一天后,你会收到他们的提醒邮件,1day可以改成人和别的时间间隔。
Divine:
ConversiontoolfromPSDtoHTML
这个工具是一个Photoshop插件,可以将你的PSD转换成WordPress主题。
(译者:
有待验证)
本文国际来源:
SmashingMagazine50PowerfulTime-SaversForWebDesigners(原文作者:
VitalyFriedman)
Web设计师的50个超便利工具(下)
作为一个Web设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题。
本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳,这是第二部分。
Kaleido
为你的代码创建视觉化标识。
来自麻省理工。
Sketchpad
一个强大的在线图像编辑器。
难能可贵的是,这是基于HTML5的。
Unicodecodeconverter
虽然界面有些乱,但这个工具能把一段文字转换成各种编码形式。
GridSystemGenerator
另一个网格设计生成器。
namecheck(强烈推荐)
这个看似简单的工具,可以帮你查询某个名字是否还可以注册域名,商标,已经社会媒体网络入口。
Typograph—Scale&Rhythm
这个工具可以帮你即时预览各种不同的Web排版效果,并生成代码。
ColorBrewerIntro–SelectingGoodColorSchemesforMaps
适用于地图的配色工具。
CSSInlinerTool(推荐)
将独立的CSS定义转换为InlineCSS。
假如你使用电子邮件进行营销,会发现这种工具非常实用,因为邮件客户端常常会将你独立的CSS代码过滤掉,而InlineCSS不会被过滤。
HTMLPurifier–FilteryourHTMLthestandards-compliantway!
这个使用PHP设计的工具,可以对你的HTML代码进行过滤,去除其中的恶意代码,并按W3C标准对代码进行净化。
Rendera
在线编写HTML5和CSS代码,现场看到效果。
RegExr
又一个在线学习,体验,测试正则表单式的地方。
tryruby!
(inyourbrowser)
Ruby在线体验。
GoogleCommandLine
使用命令符访问Google的一些产品和服务。
TinyFluidGrid
又一个网格设计工具,很小巧。
F
这个很别致的站点,可以帮你快速接通那些大公司的免费技术电话,不过目前只能用于美国和加拿大。
Producteev:
CreatingTo-DoListswithEmails(推荐)
把重要的工作安排发到task@,他们会帮你生成一个任务列表,以便安排你的日程。
AddUse–Userresearchmadeeasy
一个在线用户测试或调查管理工具。
bookwhen(推荐)
帮助你的用户在线预订你的展会,课程等服务,免费版支持150个项目以及每月300个预订。
世界Web设计最新潮流
19年前,世界上第一个网页诞生,它没有设计可言,由文本和url组成,样式只有最基本的
。
而如今,Web设计已经成长为独立而庞大的设计门类,一个网页的创造需要多个工种、多种技术的参与,其流程的复杂性和挑战性已经超过任何传统设计类别。
这19年间,网站拥有者越来越清楚自己的目标,而设计师们也越来越理性和专注,人们在不停寻求商业诉求、用户、审美和技术上的平衡点。
每一年过去,都有无数过时的风格、特征元素以及实现技术被抛于身后。
设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。
新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点,这些因素都在推动潮流的变化。
你可以回想一下那些曾经风靡一时的模式:
复古的像素样式;Google的朴素之风;韩式清新插画风;Flashsite的兴起带来的不规则布局和动画的滥用;Apple引发的对质感的追求;用户和情境意识的觉醒;对细节的关注——圆角和阴影的广泛运用;Web2.0设计风潮中典型的配色和特征元素;空间与层次感的魔术……
09年流行的半透明风格
空间和层次感的魔术
潮流的涌现,是社会一致化与个体差异化的碰撞,每一次碰撞都推动着这个行业的进步。
让我们来看看这些发生中的变化:
简洁,精简,极简
极简主义(Minimalism )在这一年大热。
原因有4点:
1. 手持便携设备的占有量逐步上升,人们的访问方式发生了改变,小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。
2. Apple公司简洁、专注、充满诱惑力的设计哲学重领潮流,效仿者众多。
3. 来自全球设计思潮的影响:
极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。
4. 网站的专业性和针对性在进一步加强,人们选择一个网站一次把一件事做好、做到极致,而非盲目扩张。
这也使“精简”拥有更大的实现空间。
极简主义体现设计师对意图、受众、情境的强大控制力。
不是简单的做减法就可以了,如果不能很好地把握取舍的宗旨与理由,一个为了极简效果而精简的页面可能看起来庸俗不堪,是为“做作”的留白 。
操刀这一风格需要对作品有充分的自信和理解力,更重视细节和布局,把握恰当的对比、强调。
来自版式和留白的均衡美感
极简主义风格非常适用于以图片为表现主体的网站
极简主义的风潮中,还涌现了许多单页网站。
所有内容都放在一个页面上呈现,通过分屏来巧妙地布置格局,不再有跳转和复杂的站点结构,一目了然。
更有人情味与趣味的设计
运营上的专注使得设计师们可以在设计中投入更多的感情,更有针对性地取悦受众。
从保守、冷漠、功利的陈旧风貌中,涌现出更多富有生命力和趣味的产品。
Twitter取得了巨大成功,可爱的小鸟形象深入人心。
以动物为主题的logo和网站吉祥物也随之风行起来。
这一变化出现的原因:
1. 是具有针对性的中小型服务和应用类网站大批涌现。
2. 是来自示范者的力量。
3. 是多元化的必然趋向。
4. 是在功能性、规范性和用户体验之外,设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。
亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。
曾经很不常见的高饱和度的配色,这种充满动感和生命力的高调设计让人充满惊喜。
对传统设计的借鉴
Web设计这个年轻的分支在自我生长的同时,也在不停向传统设计汲取营养。
在布局与版式方面,设计师们一直在探寻更好的表现手法,所以尝试从传统的设计媒介中寻求灵感。
杂志版式布局( Magazine-style Layouts)的从2009年就开始大热,不光大型新闻网纷纷求变,杂志版式布局的Wordpress Themes 也炙手可热。
这一变化对传统设计不仅仅是形式上的追随,更重要的是尝试去借鉴与融合的态度。
Times和FinancialTimes都是国外老牌媒体,他们的网站布局结合传统纸媒版式有许多新潮的亮点,比如竖式的流体布局、图文混排、头条强调,由标题字号变化带来的层级差别。
由比较可见,国外的大容量信息网站的趋势是降低首页的信息密度,把内容分摊到二级频道;版式上更具引导性、更适于阅读,浏览方式像读报一样更流畅随意。
由于广告盈利价值的差别,国内这类网站还是使用信息密度极高的索引模式,所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。
在信息呈现密度与模式无法改变的情况下,照搬国外的版式布局是非常危险的。
除了在样式上的借鉴,传统版式设计上的许多经典的实现手法也移植了过来,最著名的就是黄金比例和栅格系统(Grid System)。
栅格系统的历史有300多年,运用严谨的几何网格来指导和规范元件的分布排列。
将传统栅格移植为适合网页设计的系统,不光是创造了一种工具,也产生了一种普遍的审美规范与倾向。
无论你是选择遵循规范还是打破规范,都是对它的推动。
960px宽的网页栅格系统
个体风格带来的变化
谁才代表着趋势?
有人认为设计师们所追捧的变化代表了潮流,有人认为Top100的大站才是大势所趋。
狡猾一点说,两个说法都不确切,网站运营的Top100并不代表设计上的Top100,出于多种原因,很可能它们是最保守的阵营。
但你无法忽略它们对用户/客户的审美及视觉习惯造成的影响。
而设计师们虽然愿意挑战和尝试变化,但在面对个人化设计和商业设计时,他们的取舍却往往不尽相同。
巨头和个体们在设计风格一直在互相影响和渗透。
所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。
观察它们的最好舞台就是设计师的blog和profile站。
下面这几点都是从现在小众网站上流行,慢慢被许多普通大众网站设计所趋向的特征。
内容放得再多再好,但用户记不住“你是谁?
”也是白费。
更大header区强化了用户对品牌和风格的记忆,让你有更多的发挥余地去表现。
更大header区,更醒目的logo和标识,字号更大的标题。
在背景中使用恰当地纹理。
十几年前,在美化手法贫乏的年代,人们也喜欢在背景中使用纹理,但大多只取得了浮华嘈杂的效果。
现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘托气氛。
两个电商网站:
左图是户外服装,使用了粗砺的水泥纹理。
右图是婴幼儿用品,使用了清洁柔和的圆点纹理。
把Footer区利用起来:
更注重品质,更能抓住用户眼睛的设计
这点变化在和消费挂钩的网站上非常明显。
设计师们注重对设计心理学和视觉传达的技巧的运用,使用强调和对比的策略来引导用户的视觉焦点。
更醒目的标题、高质量的图片,使用Slideshow来创造更多展现空间,这些手法都在强调那些希望得到用户关注的地方。
Apple网站的专业、直接、有效的界面设计,不光打动了消费者的心,也吸引了众多开发者的效仿,大量App应用网站都以使用Apple风格为荣。