绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

个人工作室网页设计

人气:  作者:  发表时间:2021-01-26 09:12:41
一、设计需求的确定
设计师的工作室网页通常比较个性化,风格活泼,且形式多变,有比较大的空间来发挥创意。在多数情况下这类网页会占用比较多的区域来展示设计师的个人作品,因此在设计前期需要有针对性地规划界面布局,重点突出核心需求。

通常,设计师的工作室网站都是由设计师自己独立完成的,因此设计师对方案和核心需求都了然于胸,在界面布局上有充分的自由性,在设计前期,只需要简单勾勒设计草图、确认各区域的形状与关系即可,而原型图的步骤可以省略。

在草图的具体绘制过程中,要灵活运用知识结构,提高效率,节省工作时间。

二、确定设计规范
设计师的工作室网页设计一般包含设计师的个人资料、个人作品、服务内容,减少冗杂的元素带来的视觉干扰,也在一定程度上减少了设计师的工作量。在移动端的适配上,扁平化设计的优势也更为突出。

在本例中,网页风格同样倾向于扁平化。在本色方面,选用了带有灰调的蓝色,辅助色使用白色或浅灰色。

在字体的选择上,汉字字体使用的是微软雅黑,英文字体使用的是Arial和Verdana。

提示:需要注意的是,如果页面中有大量的图片需要展示,那么在配色时可以用无彩色来进行搭配,这种配色方式的好处是能够尽量减少视觉干扰,同时能够更好地搭配色彩丰富的图片,不会使页面出现色彩上的冲突。

三、导航与Banner设计
导航与Banner是用户打开网页后第一眼看到的部分,优秀的Banner设计为整屏的视觉效果,使其看上去更具视觉冲击力。采用这种设计方式,务必选择高清质量的图片作为素材,并且在选择与使用素材时应注意图片的版权,避免产生不必要的纠纷。

1、在Photoshop的“菜单栏”中执行“文件>新建”命令,然后在弹出的“新建”对话框中将文档命名为StudilWebsite-V0.1,设置宽度为1920像素、高度为4500像素、分辨率为72像素/英寸、颜色模式为RGB颜色、背景颜色为白色。

2、案例中的导航与Banner共用相同背景,设计步骤,可以先进行背景的设计,然后进行导航设计。在Banner的设计当中,将总高度设置为950像素,接着选择“矩形工具”,沿参考线绘制一个1920像素X950像素的矢量矩形图形,颜色可随意填充,并将该矩形图片命名为bg-Banner。

3、将Banner中用到的图片素材拖入画布中。

4、可以发现,拖入画布中的图片素材超过了原设定的950像素的高度,因此这里使用“剪切蒙版”将多余的部分隐藏起来,具体操作如下。

在图层面板中按住Ctrl键,用鼠标左键单击图层bg-Banner,此时画布上会出现一个尺寸为1920像素X950像素的选区。

5、在图层面板中选择该图片所在的图层,并单击鼠标右键,同时选择“创建剪切蒙版”选项。

6、此时画布中多余的图片部分已经被隐藏起来了。

7、下面开始设计导航。首先将导航的高度设为70像素,然后将需要展示的Logo和文字分别摆放在网页的左右两端。

8、在导航功能的显示效果上,用一个小滑块来标示导航功能当前所在的位置。

9、由于整屏的Banner设计在一定程度上会打断用户的视觉浏览习惯,因此在设计时需要做好视觉导向的工作,例如,用一些文字或设计元素来提示用户。

四、文字与图集板块的设计
1、文字排版与设计
网页的文字排版,一定要适当地留白。多数看上去效果很好的网页都比较注重留白,网页“透气性”佳。

为了更好的区分内容的层级,把设计图中的标题与文字进行色彩上的区分。其中第1层级内容主要为各板块的主题和icon等,颜色选择深蓝色。设置英文主标题文字字体为Verdana,字体属性为Bold;设置中文主标题文字字体为微软雅黑,字体属性为Regular。

第2层级内容主要为各板块的副标题、正文内容等,使用较浅一些的灰色。

2、图集板块的设计
图集的展示方式借鉴了当下比较流行的设计风格,它可以根据浏览器的宽度自动适配,这种展示方式在移动端的显示效果也同样优秀,且在苹果官网中,也可以见到类似的设计方式。

在该案例中,需要根据网页的总宽度计算一下单张图片的宽度。例如,假如每行显示图片数为5张,计算方式应为页面总宽度÷每行显示数目=单张图片宽度,即1920(像素)÷5(张)=384(像素)。

展示图集时,需要把握好图片的尺寸比例和大小,常用的图片宽度比为4:3、3:2和5:3等。

将以上这些都确定好之后,即可开始设计。

(1)图集板块的设计与Banner的制作方式相同,首先要创建一个尺寸为384像素X300像素的适量矩形。

(2)将要展示的作品图片拖入画布中,然后在按住Ctrl键的同时单击矢量矩形图层,待选区出现后在图层面板中选中图片所在的图层,并单击鼠标右键,选择“创建剪切蒙版”选项,隐藏图片多余的部分。

(3)按照上一步的操作方法,将其他图片按照需要的顺序排列进去。

(4)在图集的下方设计一个按钮,单击可以进入二级页面,按钮的制作方法如下。首先绘制一个尺寸为230像素X50像素的矢量矩形,将矩形的描边设置为1像素,将描边的颜色设置为深蓝色。

(5)使用“文字工具”为按钮添加文字信息。

3、图文区域的排版
图片+文字是网页设计中最常见的组合形式。在网页设计中,图片与文字应保持适当的距离,同时在编排时文字的内容不宜过多,否则容易让人产生视觉疲劳感。

在图文区域的排版中,为了提升文章的易读性,会适当拉在文字的行间距和段落的分隔距离,同时在图片的底部叠放一个矩形图层,以突出界面的层次感。

五、表单与辅助信息
1、表单设计
“联系方式”信息板块的设计采用了表单和图形结合的样式,简化内容的同时使页面形式更加活泼。表单背景选用深蓝色,表单的设计使用了干净的白色作为主色调,并在输入框内设置“提示”功能,方便信息录入。

2、辅助信息
在网站的最下方位置,通常会有社交媒体入口及相关的版权信息,这部分内容的设计要尽量做到简洁,以免喧宾夺主,在配色上可选择无彩色系来搭配。
个人工作室网页设计:http://www.luweit.com/news/jianzhan/194.html
标签: 网页设计
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2