Banner广告条中的字体设计

时间:2024.5.4

Banner广告条中的字体设计

导读:由于banner一般用于专题类网站,在门户网站的二级页面,用户进来之前,在首页已经对主题有一定的了解和认识,所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导;所以这也是和传统广告中普遍要求第一感官视觉冲击力来强奸眼球所不同的地方

本来想写“Advertisemen中的字体结构分析”,后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工作中对banner设计上的一点浅见,仅起抛砖引玉的作用。 Banner的传达方式 [TOPIC]

针对网站中的banner

Banner的本身形状:形状决定了其固定的构成方式,一般为矩形,横幅,左右结构和居中;

Banner的文字特点:主题式,一般分为主标题和副标题,文字较多;设计的时候还需要考虑应用到网站各种尺寸推广图的可读延伸性。 Banner的图像特点:辅助主题,增加文字的渲染力。

Banner的传达行为方式:载体为电脑屏幕,IE浏览器的第一屏位置,用户眼睛焦点停留时间约3秒以上。

Banner广告条中的字体设计

[由于banner一般用于专题类网站,在门户网站的二级页面,用户进来之前,在首页已经对主题有一定的了解和认识,所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导;所以这也是和传统广告中普遍要求第一感官视觉冲击力来强奸眼球所不同的地方。] 文字在banner中的重要性

对于文字,我们常常听到需求方提出:“字要大!”

“啊?还要大?已经很大了!“ 然后很无奈的拉大一点,其实我们都知道大那么几个像素没有意义;

但细心想想,需求方要的真的只是那么一丁点的追求么?毕竟他们不是设计师,不懂得如何表达自己的想法,而唯一可以让们觉得显眼的方式只有大小的区别而已,或许是因为,字不够显眼,字的处理太普通,背景太抢眼之类的,或许,我们应该理解为:“字要显眼一点“,而”显眼“的方式却有很多种。 Banner=文字+图像[辅助]

Banner上的文字一般都占据了整个banner的70%的区域,而实际图像只占不到30%,往往很多的设计师更专注于那30%的图像设计,忽视了最重要的70%文字区域,最后只用系统字草草拼凑了之,试问这样的一个banner的设计合理么? 尤其当主题被延伸应用到小尺寸推广图的时候,只剩下放文字的区域时,这个推广图算是彻底完蛋了。

Banner广告条中的字体设计

中文字和英文字母的属性区别

中文字与英文字母的区别,字母是一种纯粹发音符号,每个字母本身并没有意义,单词的意义来自于这些字母之间的横向串式组合,而汉字的组字方式是以象形为原始基础,也就是每个字都具有特别的意义,一个简单的字在远古时代就代表了一个复杂的生活场景,因而它也是世界上最形象的文字。两者之间的阅读方式和解读方式都有本质的不同,因此,汉字的编排不能照搬英文的编排方式,它们两者之间在编排上有一些客观的区别。

Banner广告条中的字体设计

中英文字体的结构分析

a. 同样字号的实际大小不同,英文因为都是字母,字母的构成结构非常简单,屏幕最小可视像素为6px[代表字体:04字体],中文则结构复杂。屏幕最小可视像素为10px[MS明朝/MS UI Gothic]和11px[新细明体/ PMingLiU]

b. 英文的整体编排容易成段、成篇,视觉效果比较自由活泼,有更强的不连续的线条感,容易产生节奏和韵律感。

中文整体编排容易成句、成行,视觉效果更接近一个个规则的几何点和条块,不容易产生动感的最主要的原因是因为整个结构是闭合的,笔划张力的总和趋于零。

Banner广告条中的字体设计

c. 英文的篇幅普遍比相同意义的汉字的篇幅要多,在设计时,英文本身更容易成为一个设计主体,而且因为英文单词的字母数量不一样,在编排时,对齐左边那么右边都会产生自然的不规则的错落,这在中文编排时不太可能出现的,中文编排每个段是一个完整的”块”,很难产生这种错落感。

Banner广告条中的字体设计

d. 英文的结构有大小不同的形状,在字形设计上不可能排列在同一条直线上,如gjpqy等字母齐下方的沉降线,而bdfhkl字母上齐顶线,其它字母才齐上中线和下脚线。然而,英文编排时自然产生的错落其实并不是西方设计师所期望的,他们在细排文字对齐上花大量的时间来调整字距、词距、行距、段前距、段后距等,使得段落更趋向于几何形态。

Banner广告条中的字体设计

如何处理banner中文字的构成问题

关键字:理解-分解-重构

理解.

在进行文字的编排之前,首先要理解文字的内容。见过很多设计师只注重版式美现而不关注文字内容,文字一拿到手就开始编排,从不考虑文字在说什么,他们的原则是文字一定要服从于版式需要。这是不正确的设计方法,对于一条标题,

如果我们不去理解标题所表述内容,就很容易本末倒置。这也是设计师需要和需求方重点沟通的问题,并从中获取需求方的关键字。

分解.

根据主题关键字所传达情感,分析字体本身的性格属性,综合画面,对其分解;笔划粗细与结构、留白、重心之间的关系,这是活字设计中的一个综合问题,并非一朝一夕就能掌握的,它不但对字的个性要有深刻的理解,而且还要具有非常敏锐的观察力。尤其对于字体本身所设定出来的一个形象,或这种字体通常会在什么地方出现?见到这种字体会想到什么?这是视觉传达中需要长期积累的。 重构

字体的设计需要考虑到标题整体组合在画面的均衡性,在不破坏字体的基本识别前提下进行再设计,使文字图形化,字体类别中的衬线字体和无衬线字体(serif vs sans-serif),在组合的时候,不建议把无衬线类字体和有衬线类字体直接组合。

Banner广告条中的字体设计

从心理模型可以看出,常规的组合排列中,无衬线字体比衬线字体的常规组合性更好一些,但处理的不好反而会呆板。

书法字体,因为书法字体经过历代书法家对字体的追求,使其结构更加牢固,多一点少一点都会影响其本身的字型美感,且气场较强,不适合太小的版式和过长的句子大量使用;学过书法的同学,或许深有体会,在中国书法里是十分讲究“精”“气”“神”,用语言无法表达情绪的时候,书法的字里行间却能透露出来的气场,也就是所谓字的性格。

Banner广告条中的字体设计

以上是书法类字体在特定主题情绪表达上的一些处理方式;文字并没有做特别的变形,而是切合主题的做了一些效果。

ps. 记得来网易面试时,HR曾经问过我一个问题:“对于视觉设计师这个职位里,你觉得设计师是什么?你能做什么?”

我说:“设计师在这里,往往更多的是担任着翻译师的角色,把讯息更快速准确的诠释给所有受众。”


第二篇:字体设计简介


课程简介

一、课程基本信息

字体设计简介

二、课程目标

通过教学,使学生初步理解基本字体设计和创意字体设计的概念及法则,并通过训练,提高学生的设计创新能力。

三、课程内容与主要学习材料(含教材及参考书)

模块一 中文美术学概论

课程内容

主要讲述汉字的发展历史使学生了解汉字的发展过程及演变。

教学要求

了解历史,便于创作。

模块二 中文基本字体设计

课程内容

1、分类和特征。

2、基本规律及绘写方法

教学要求

通过基本理论的讲授及作品赏析,使学生了解宋体仿宋体、黑体、圆黑体等字体的起源及基本笔画结构,并通过大量练习,打好基本功。

模块三 中文创意字体设计

课程内容

创意字体的构思及类型。

教学要求

通过基本理论的讲授及作品赏析,使学生掌握装饰字体(空心、断笔、折带、重蠢、连接、扭曲等)和形象字体(添加形象、笔画形象、熬体形象等)以及立体字的绘写规律。

模块四 外文基本字体与创意字体设计

课程内容

1,基本字体设计

2。创意字体设计

教学要求

通过基本理论的讲授及作品赏析,使学生了解拉丁字母筛史及老罗马体、现代罗马体等字体的写法及规律,然后设计出新的字体。

参考教材:《文字设计》。刘杰编著,西南师范大学出版社

四、教学方式、实践环节、学生自主学习的基本要求

本课程分三个单元来进行。采用直接授课,第一单元:理论学习部分,通过学习让学生掌握基本的专业理论知识。第二单元:国内外精品设计欣赏与分析,学会学以致。第三单元:字体设计与创作。

五、考试方式与评价结构比例

考查

1、结构形式 2、创意

3、 色彩协调性 4、学习态度

六、其它:

授课过程中 ,以理论为指导,培养学生们的兴趣及鉴赏力。提高学生的创造力。

更多相关推荐:
dreamweaver课程设计报告

扬州市职业大学课程设计报告书(网页制作)设计题目:中国军械网站设计系别:计算机系专业:计算机网络技术班级:09网络(1)姓名:学号:指导教师:完成时间:20##年9月前言本次网站设计主题是中国军械网,由我们09…

dreamweaver设计报告

20xx20xx学年第二学期课程实训报告书课程名称网页制作与网站建设系部信息工程系专业班级计算机084学生姓名徐峰完成日期20xx78山东科技大学泰山科技学院目录1实训目的42诱惑都市系统的分析与设计4装345...

Dreamweaver课程设计

XXXXXX学院课程设计说明书百味人生BookStore百味人生BookStore一、引言随着以多媒体和网络技术为核心的现代信息技术的飞速发展,信息管理系统领域正在经历一场重大的变革,其中最突出的莫过于电子商务…

《网页制作:DreamWeaver网页制作》课程设计报告写作模板

东北财经大学网络教育课程考试论文设计考核课程名称作者考试批次学籍批次学习中心层次专业完成时间一作品简介12二设计思想三设计技术和方法四设计体会和感想附录

Dreamweaver网页设计_实训报告

广播电视大学实训报告书一说明1浅灰色部分由学生填写2白色部分为教师判分用3本报告与学生实际作品相关联实训报告书二说明1浅灰色部分由学生填写2白色部分为教师判分用3本报告与学生实际作品相关联实训报告书三说明1浅灰...

《网页制作:DreamWeaver网页制作》课程设计具体要求

网页制作DreamWeaver网页制作课程设计具体要求一DreamWeaver作品提交形式考生在做好网站后需要提交一个网站功能展示的word文件介绍网站的主要功能并辅以截图展示以下所提到的内容均需在word文件...

学号web数据库编程——Java课程设计报告

web数据库编程java课程设计报告班级09计高本姓名陈丽真学号090803131日期20xx年1月3日漳州师范学院计算机科学与工程系目录1设计内容12概要设计13自定义类及接口说明34程序源码35程序运行与调...

20xx-20xx Java Web课程设计(1)

JavaWeb课程设计课程设计报告正文书写要求1课程设计报告书的正文内容格式如下目录二字三号宋体加粗目录内容四号宋体一级标题三号宋体加粗二级标题四号宋体加粗正文内容小四宋体单倍行距段落缩进两个字符图表号5号宋体...

java 课程设计 实验报告

JavaScript课程

Java课程设计报告

合肥学院计算机科学与技术系课程设计报告20##~20##学年第#学期课程:Java语言程序设计课程设计名称:企业人事管理系统专业班级:08网络工程(1)班20##年9月一、需求分析系统需求分析:考察中小企业企业…

java课程设计报告

淮海工学院计算机工程学院课程设计报告设计名称面向对象课程设计选题名称图像浏览器的设计与实现姓名学号专业班级网络工程122班系院计算机工程学院设计时间设计地点软件实验室教室面向对象课程设计报告第2页共16页面向对...

java课程设计报告

课程设计说明书课程名称Java程序设计专业班级设计人山东科技大学20xx年1月14日山东科技大学学生课程设计目录1需求分析说明111背景112功能要求113运行环境114功能实现12概要设计说明221模块调用图...

dreamweaver课程设计报告(6篇)