网站图标是您网站的标志性表示。您通常会在地址栏上找到它们。但是,它们在提要聚合器和书签列表中也可见。网站图标是您网站的重要组成部分,因此必须设计一个出色的网站图标。但是,很少有人关注此元素。网站图示通常很少;因此,在设计您的网站时很容易错过它们。但是,当用户在其浏览器上打开多个选项卡时,他们会滚动浏览不同的选项卡,从而利用图标来标识站点。网站图标在将您的网站与用户可能同时打开的其他网站群分开的过程中起着重要作用。
Favicon设计与徽标设计:
Favicon的设计可能与徽标的想法非常相似。它们都是公司的图片表示形式,可帮助人们更快地识别品牌并产生视觉冲击。尽管它们提供几乎相同的功能,但两者之间还是存在很大差异。
Favicon设计与徽标设计相比有不同的要求。背景,图标的大小以及浏览器的可变性是Favicons需要牢记的一些重要注意事项。Favicons采用简单的设计,徽标通常需要表达很多元素。因此,对于创建收藏夹图标,您可能必须去除徽标的许多元素并对其进行简化。
Favicon Design的某些方面需要牢记:
1.空间的最佳利用:
一开始谈论明智地使用您的空间并没有太多。在所有网络浏览器中,图标收藏夹的理想大小仅为16px。这使得明智地使用空间变得更加重要,并且以明亮而又有吸引力的方式设计了一个图标。由于您需要缩小徽标太多,因此可能需要对徽标进行一些重大更改。可能有各种实例,例如:
具有字标徽标:
印刷术或基于文本的徽标是最近的标志。它们永恒且简单,因此很适合徽标使用。但是,当我们谈论Favicon Design时,基于单词的徽标可能很难处理。Favicon很小,空间有限;因此,不可能在指定区域内放入品牌的全名。在这种情况下,坚持只使用公司名称的缩写是理想的选择。字母越少,设计看起来就越干净,因此您应该坚持使用。但是,如果您的公司有两个重要的名称或单词,请缩写两个字母。除此之外,其他任何东西都看起来很聚集。
挑战来自这样一个事实,您的网站图标设计必须与公司的徽标设计相符。因此,始终要确保在将徽标缩小为网站图标并重塑徽标以使其适合网站图标时,请包括设计的核心元素,以确保徽标仍遵循相同的设计语言和外观。
Vans是一个很好的例子。徽标是拼写Vans的字标徽标。现在,由于必须创建一个favicon,因此无法在有限的空间中包含所有字符。如果您发现徽标具有鲜明的特征,那就是首字母V。它的字母结尾处有一条水平线,在其他字母的顶部。请注意Vans网站图标的设计。它保留了与Vans相同的水平线,将其标记为Vans,因为这是品牌签名信。这样,品牌既保留了品牌标识,又创建了一个忠实于品牌和品牌徽标的网站图标。
带有商标徽标:
品牌商标徽标是任何使用符号表示公司的徽标。这些徽标没有任何文字。如果您是一个成功的品牌,则此类徽标最适合立即被识别。这也是将其转变为Favicon设计的理想徽标设计。通常,将徽标缩小到favicon所需的尺寸应该可以解决问题。但是,有时您可能需要消除某些方面,以使图标图标清晰明了。每当遇到这种情况时,理想情况下,至少应该有3-4个变体,以了解最有效的方法。
耐克(Nike)是商标标志的一个很好的例子。即使您读了耐克(Nike)一词,也已经可以看到耐克标志。该品牌已成功地将swoosh徽标与耐克直接相关。耐克的徽标只是Swoosh。因此,很容易为该品牌进行网站图标设计。老实说,该公司为其徽标图标使用与徽标中使用的图标相同大小的版本。
具有标志性徽标:
标志性徽标融合了商标和字标徽标。它结合了两者的元素,因此在其中具有文本和辅助符号。彪马就是一个很好的例子。他们的标志包括一个彪马(Puma),超越了该品牌的名称PUMA。但是,如果您访问他们的网站,您会注意到该网站的图标仅使用Puma。由于图片表示法在用户中具有更大的保留价值,因此该品牌决定只使用Puma的图像,而忽略文字。因此,有必要确定徽标设计中的这些基本要素,以便成功地将其转化为网站图标设计,从而即使您摆脱了某些要素,品牌形象也不会受到损害。
2.注意浏览器的兼容性:
大多数设计人员在设计网站图标时忽略或跳过的一个基本因素是,每种浏览器都有其不同的功能要求。标签的背景可能是黑色,白色甚至是灰色,具体取决于您使用的浏览器。在可自定义主题的支持下,背景可以是任何颜色。因此,您需要对Favicon Design做好充分准备和彻底检查。仔细选择图标图标的颜色,并确保将您设计的图标图标存储为PNG文件。还有许多其他可行的格式,例如SVG,GIF,JPG。但是,结果无法确定。因此,使用PNG格式是最安全的选择。您可能会更加谨慎,并选择Microsoft ICO格式,该格式在所有浏览器中都可以正常运行。
3.引人注目的Favicon设计:
只要一个人正在浏览网络,图标就始终可见。他们可能打开了多个选项卡,并且可能正在使用另一个选项卡。但是,如果他们打开了您的网站的标签,则设计良好的Favicon将始终引起他们的注意,从而增加了他们切换回您的网站的机会。由于Favicon如此可见并且具有如此强大的外观,因此Favicon设计必须引人注目至关重要。
现在有多种方法可以解决这个问题。一种方法可能只是利用太亮的颜色,而这种颜色明显不同于其他图标。但是,如果您是一家正式的设置机构,那么使用这种鲜艳的色彩可能无法很好地与您的品牌形象相吻合,那么,这种想法可能效果最好。因此,您始终需要记住设计一个与网站布局和品牌美感相辅相成的图标。另一种方法可以利用各种形状或样式。标准形状的任何不规则之处都可以正确地吸引人们的注意力。
4. Favicon设计的大小选项:
尽管我们之前已经讨论过,将Favicon Designs设置为16 px大小是实现此目标的理想方法,但以其他大小保存favicon对于其他目的也至关重要。如果以ICO格式保存文件,则可以在单个文件下创建多个不同大小的图标。因此,您应该始终具有16 x 16像素的版本,还应包括32 x 32和48 x 48像素的版本。这很有用,因为用户可能会将书签拖到其桌面上。如果用户这样做时,书签部分的收藏夹图标只有16 x 16,则收藏夹图标看起来像是像素化的,并且不太清晰。但是,如果您有32像素和48像素的变体可用,它仍然看起来很整洁。
如果您想了解所有尺寸,可以将其图标设为16、32、48、64和128。
5.试用单色:
这并不是什么新鲜事物,但是很多设计人员常常忘记了这个选项。在单色配色方案中,小规模设计通常看起来很棒。在走这条路线之前,值得考虑的一个重要因素是,您的收藏夹图标是否会传达相同的信息,无论是否带有颜色。如果您发现颜色不会为您的网站图标设计增加太多或没有任何价值,那么您可以继续尝试单色网站图标设计。
即使您要设计一个带有颜色的图标,这也是一种理想的方法,首先以单色创建徽标,然后开始添加颜色,因为它可以让您了解颜色如何为图标添加字符和相关性。
6. 进行数字化之前先进行素描:
无论是创建徽标,图标还是图标,好的设计习惯都是首先在纸上画出草图。它不需要是完美无瑕的最终版本。绘制草图的目的是作为草绘行为来指导您创建收藏夹图标。与计算机相比,曲线和线条的自由度以及擦除和编辑的自由度要高得多。因此,一旦您有了要创建的图标的基本轮廓,从数字化开始进行复制或从中获取灵感就会更加容易。这样既可以节省时间,又可以节省创建不适合您的图标设计的形状或元素的工作。
7.一致性是关键:
如您所知,徽标通常是根据品牌的美学和设计语言来制作的。它需要补充您的品牌形象并为其增加更多价值。这样做有助于在客户的心中产生协同作用,从而帮助他们与您的品牌建立联系并更好地识别它。Favicon Design也不例外。您的收藏夹图标应该可以补充您的网站和品牌,反之亦然。它也必须与您公司所在的行业相关。将叉子用作统计公司的网站图标没有意义。因此,总是总是需要直接容易地在网站图标和品牌代表什么之间建立关系。
任何访问者都应该能够理解您的品牌属于哪个领域,您提供的服务以及您的利基定位方法。一致性是设计网站图标,图标和徽标的关键要素。
这些是掌握Favicon设计艺术的7个重要考虑因素。网站图标经常被许多Web开发人员和图形设计师所忽视。但是,它们是浏览各种网站时用户体验的关键要素。它不仅可以为您的网站增值;它还有助于使其在人群中脱颖而出。网站图标可以为您的网站增加美学和功能价值。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/courses/259177.html