网站设计基本知识

一个漂亮的网页离不开美工的精心策划设计,而对于没有一定美术设计功底的读者来说,学习和掌握一点网页美工设计基础知识是非常有必要的,所以下面整理了一点基本的美工设计基础知识,希望能对读者所有帮助。

方法/步骤1主页设计包含的内容

  • 01

    网页的每一个页面中要都包含一个logo 标志,一般放置在页面顶部的左上角位置。

  • 02

    logo标志旁边放置简短易记,且能够体现企业形象或宣传内容的广告语。

  • 03

    要有“网站名称”、“关于我们”、“友情链接”“主菜单”、“新闻”、“搜索”等基本栏目,还要有相关的业务信息等内容。

  • 04

    每个页面的底部都包含有“版权声明”。

方法/步骤2如何设计主页的版面

  • 01

    着手设计主页的版面时,必须要根据企业的特点掌握企业要展现的内容以及风格,对页面的整体先进行分块。 分块是非常有必要,但对于美术功底不是很深厚的人来说也是难以掌握的一个技巧。对于设计一般的广告版面或杂志来说,因为都是有边的,也就有边可循,容易分块,也容易安排构图,但对于Web的页面,边的概念被淡化了,在电脑屏幕上可以上下左右的拖动屏幕内容的显示位置,所以在设计网页的版面时,分块是非常有必要的,其目的也就是产生边的效果。在编排分块时,可以采用不同颜色或明度的色块、线框、细线、排列整齐的文字等,但在这些内容不要过于醒目,否则会喧宾夺主,因为页面的重点是内容。

  • 02

    版面指的是浏览器看到的一个完整的页面。因为每个人的显示器分辨率设置不同,所以同一个页面的大小可能出现640×480像素、800×600像素、1024×768像素等不同的尺寸,在设计时主页可以针对不同分辨率的浏览器进行版面尺寸的建立。

方法/步骤3网页的色彩搭配

  • 01

    在开始网页设计之前版面的分块固然重要,但色彩的搭配也是一个网页设计成功与否的关键。对于只是针对网页设计而言,在色彩的搭配上有几点是设计者必须要考虑和遵循的。

  • 02

    色彩的平衡。色彩在页面中可以形成多种视觉效果,强烈的色彩对比,可以突出页面的主题;唯美的调和色彩,可以使表达的主题意蕴更加深厚。在一个网页中,一般情况下,页面上方的颜色都采用深色调,这样在颜色的厚重上才能压住下面的颜色,如果采用亮颜色,很容易使设计的页面显得很不稳重,下面的文字内容和图片有轻飘飘的感觉。因此,要使设计出的整个页面有平衡感,必须要有不同面积、不同位置和不同明暗的颜色搭配。

  • 03

    色彩的呼应。如果有一种比较突兀色彩放在设计的页面中,无论是突出重点也好,还是强调logo图标也好,都会给设计的整个页面带来副作用。因此,在设计的页面中不同的位置必须要有该颜色相同色系的呼应色,起到遥相互应,弱化某一颜色的作用。

  • 04

    整体色调的把握。色调的整体就是浏览者看到网页的第一印象,是蓝色、红色还是绿色等,所以在开始设计一个网页之前确定好整体色调是非常重要的。整体色调确定好了,在背景色、分块色、图片颜色等这些基本要素上都要向整体色调上靠,可以把同一色系分成不同的明度来运用。

方法/步骤4字体的设置

  • 01

    不要使用超过3种以上的字体,字体太多会显得杂乱,没有主题。

  • 02

    不要用太大的字,因为版面是宝贵、有限的,粗陋、笨拙的大字体不能带给访问者更多信息。

  • 03

    不要使用太多的不停闪烁的动态文字,否则会引起访问者视觉疲劳,也有可能会认为是垃圾广告。

  • 04

    一般标题的字体要比正文字体略大些,颜色也应有所区别

(0)

相关推荐

  • 安卓UI设计系列知识(一)(设计经验谈)

    搜集了很多朋友的问题,有一个比较明显的问题是现在网络上没有相关的教程or说明,书店里卖的相关书籍不是大篇大段的讲photoshop的使用技巧,就是讲一些宏观的问题,所以看到上次的帖子,很是有效. 打算 ...

  • 2018年最好用的网站设计工具集锦

    由于代码技术的限制,普通大众往往在网站建设方面总是一站难求.但是,想要拥有一个自己的网站,真的必须由程序员通过代码实现?哼,在当今满满科技感的新时代,这个问题不存在的~ 小编为大家整理了个人认为最好用 ...

  • 个人网站设计制作步骤

    当今互联网日益发达,很多人都做起了个人网站,其实个人网站一开始的设计制作尤为重要,做得好与坏直接影响得了个人网站的成功与否,那么个人网站设计制作步骤有哪些呢,下面笔者就来具体说说,希望对大家有所帮助. ...

  • 网站建设如何用色彩搭配增加网站设计体验效果

    网站设计最重要就是人性化,加上古典气息网站风格,这类网站在装修设计类网站容易常见,给人一种浓厚的文化气息感,网站建设如何运用色彩搭配给网站带来不同的体验效果? 网站不仅仅只是内容的填充,还包括色彩搭配 ...

  • 20款覆盖全面的响应式网站设计工具

    灵活的栅格和布局,响应式的图片和智能的CSS媒体查询,构成了响应式网页的主要特征。当用户扔下沉重的笔记本电脑拿起平板,响应式的网站能够自然而然地随之适配,掏出手机也毫无压力,图片和文字都会随着特定的屏 ...

  • 35个扁平化网站设计灵感

    小编话:扁平化的设计我们已经分享了很多,今天来看看@shejidaren带来的35个扁平化的网站设计.其中有的配色丰富,有的简约实用,也有有趣的交互体验.一同学习吧! 扁平化+响应式+HTML5&am ...

  • 20个精雕细琢的设计机构官方网站设计

    极简风.现代主义.扁平化.栅格系统--这些流行的设计趋势和设计手法,你希望哪些出现在自家设计公司的网站上?除了漂亮和风格化之外,它们让网站拥有更好的易用性,也更有性格,更重要的是,它们展现出了一个设计 ...

  • 50个使用虚化背景的网站设计(上)

    小编:现在的网页设计越来越倾向使用大背景的图片,能很好的营造氛围.再略微虚化图片,不仅没有消弱氛围,还能清晰的展示信息.以下是一组虚化背景的网站设计.一起去看看别人的处理方式吧. Jet Edge B ...

  • 50个使用虚化背景的网站设计(下)

    小编:现在的网页设计越来越倾向使用大背景的图片,能很好的营造氛围.再略微虚化图片,不仅没有消弱氛围,还能清晰的展示信息.以下是一组虚化背景的网站设计.一起去看看别人的处理方式吧. Convoy Dat ...