12个必不可少的网络设计面试问题 *

寻找 自由网络设计师工作?将您的生活方式设计为具有顶尖的网页设计师。

提交面试问题

什么是白色空间以及它如何影响网上内容?什么是“格式塔”的原则是什么?

图形设计中的白色空间是任何区域故意空白。它不一定是白色的。无论是网络设计和其他媒体空白空间都可以有效地用于视觉上分开或组元素,引起对特定元素的关注,加强内容布局或网格。有时候,白色空间也纯粹是在美学上使用,以产生视觉上有趣的组合物。

格式塔原则是视觉感知理论的一部分。他们通过潜在意地结合形状,找到相似性,完成物理断开元件的组成,他们应对“看到”注意事物的能力“看到”没有明确可见的东西。设计中常用的原则是:

  • 相似 - 人类心灵感知具有与类似的特征类似的元素(以三种颜色,形状,尺寸或三个)一样相关,有意义地连接或分组。这在导航系统设计和应用工具栏中特别有用;

  • 接近 - 类似于与相似性原理,彼此靠近放置的元素被认为是分组的,相关或整体的一部分。这是布局设计的建筑原则。在设计大量各种内容的页面时尤其重要(如新闻网站或应用程序的主页)

  • 关闭 - 当面对熟悉的视图对象时,在其可视化(缺少图像的部分)时,心灵自动“完成图片”或填充空白并有效地看到图像,就像完全显示一样。这是一种原则,通常用于徽标设计。使用关闭原理可以使元素更有趣的是看(因为用户的思想“工作”完成元素),这使得设计更令人难忘;

  • 图 - 地面关系 基于颜色,形状和过去经验的组合,是从“背景”的精神分离“物体”的倾向。当适当地用于图形设计时,这一原理将用户注意构成的重要元素引导;

  • 普通命运 - 同步地在串联中移动的元素通常被构思为分组或作为单个对象的一部分。普通命运可用于交互设计;

  • 连续性 - 基于相似之处并遵循他们的终点,介绍联系并遵循一条路径或另一条路径的能力。该原理可用于徽标设计以产生兴趣。它也可以在构建布局或组合时使用,使它们看起来像一个整洁的物体,而不是一堆杂乱的元素。

你如何结合字体?哪些类型的字体在一起工作?网站上使用多少种不同类型的类型?

有些字体很好地一起工作,在同一页面上看起来很好。要适当地结合两个字体,我们需要寻找它们之间的相似性和差异(Serifs,历史背景,X高度,厚度,孔径,行程对比)。

作为一个良好的拇指普遍规则,如果除了一个重要的事情(类似的字体),或者如果它们非常不同但是有一个共同点来连接它们(互补字体),则两个字体一起工作。与两个字体具有相同的X高度(小写的高度)与相同字体大小的大写“X”相比,它总是好的东西。

应避免将看起来过于相似的字体(如结合 Helvetica.Lucida格兰德 或者 arial.Verdana)。

一些规则来创造良好的组合:

  • 将Serif与SAN-Serif字体组合,两者都具有非常相似的X高度,行程对比度(字符线的最薄和最厚的部分之间的差异)和孔径(字符是多么开放或关闭);
  • 使用单个字体的对比厚度选项;字体的灯/薄版本与其粗体/黑色版本非常不同,两种版本与组合方式非常好;
  • 一些字体设计为家庭,彼此合作。例子是Adobe的 无数奴才 对或 博物馆博物馆 Sans.阿黛尔阿黛尔斯.
  • 选择字体时,重要的是要记住每个上下文都将用于。标题或显示字体可能更豪华,精致和详细,而主副本应该是更简单的字体,以更小的尺寸可读。
  • 对于大多数设计,一个或两个字体系列足以满足可能的第三个,谨慎使用非常具体的目的。

是什么让好的配色方案?你能说出一些互补,类似的单色和单色的颜色方案的例子吗?

一些颜色组合比其他颜色的组合更有吸引力,有一个原因:人类的思维寻找和谐,秩序和系统,以及遵守这些系统的颜色方案看起来更加“令人愉悦”。有几种方法可以有效地结合颜色。

以下是一些:

  • 单色 - 使用相同色调的几个不同的色调,例如将浅绿色的浅绿色,深绿色,使用亮绿色的浅色。这适用于前景色和背景颜色组合。

  • 类似 - 使用彼此在色轮(和彩虹)上彼此靠近的颜色,例如橙色和黄色,蓝色和绿色,或红色和紫色。通常,它适用于彼此相邻的元素,但没有与前景和背景的组合有效。

  • 补充 - 使用戴上色轮相对的颜色,如橙色和紫色,蓝色和黄色,或绿色和红色。这些颜色通常具有良好的对比,如果它们的亮度也不同,它们可以用作前景和背景颜色的对。设计师应该记住某些互补组合看起来不太好(红色上绿色,反之亦然是刺激性的,而且很少组合使用),而其他人则具有令人惊叹的对比。

申请加入Toptal's Design Network

并享受可靠,稳定,远程自由网络设计师作业。

申请自由职业者

你什么时候使用JPEG压缩,你更喜欢PNG吗?

不同的图像压缩格式具有不同的目的,具有不同的压缩方法。

  • JPEG. 压缩通过找到类似颜色的区域来减少图像尺寸;压缩水平越高,它更积极地寻找导致视觉信息丢失的区域和压缩区域边缘处的伪成物的产生。这种压缩对于照片,图纸,梯度,大多数插图和其他多彩丰富的图像有效。 JPEG也不适用于屏幕截图,简单的UI元素,平面图标,原理图,它对于文本特别糟糕。

  • PNG. 通过减少使用的颜色的数量来压缩工作。根据压缩的水平,这可能导致略微损失颜色阴影。 PNG非常适合徽标,图标,标志,包含文本的图像,用于简单的插图,UI元素和屏幕截图。与JPEG不同,它还允许图像具有透明区域。 PNG文件通常比JPEG大于JPEG,并不为照片和复杂,彩色图像和渐变提供良好的压缩。

如何处理视网膜,4K,UHD和其他高分辨率显示类型的图像?如何为高分辨率显示(包括大多数智能手机)产生和解释栅格样机?记得最重要的是什么?

随着配备高像素密度显示器的设备,重要的是在网站上提供高分辨率的一些图像,对具有简单形状和细纹的人来说尤为重要,例如徽标,数字,原理图和产品照片。

  • When an image is used in HTML as an IMG tag, techniques such as PictureFill may be used until the new PICTURE tag is widely adopted by popular browsers. This way, different versions and sizes of images can be served based on the user’s device size and pixel density.
  • 当用作CSS中的背景图像时,媒体查询可用于针对不同的设备,以便对每个用户提供最合适的图像大小。
  • 在为智能手机或高像素密度器件制作的Photoshop(或其他)模型时,记住该模型是设备上的两倍是至关重要的。设备的1200像素屏幕宽度通常被视为600像素宽。这意味着在编写CSS文件时,大模型中的32像素高文本应该被编码为16像素高度,并且在网页上的300像素宽图像具有150像素的宽度(该设备的屏幕)。有效地应该将Photoshop Mockup的每个两个像素平方视为设备上的单个像素。

当您在网站上嵌入自托管视频时,您会使用什么格式?

使用HTML5视频元素在网站上使用视频(而不是嵌入 Youtube,Vimeo. 或其他视频托管服务)本网站有责任为每个浏览器提供浏览器可以播放的格式的视频。

As of recently, major browsers, OS and devices support the MP4 video format (using MPEG4 or h.264 compression). To assure compatibility with Firefox clients and certain Android devices that can’t play an MP4 video, it’s good to have copies of the video in OGV and WebM formats. When multiple copies are available, all files should be listed as source elements of the VIDEO tag.

名称一些简单的方法来优化一个网站。你会在哪里开始?

有很多方法可以改善网站的性能,开发人员可能有特定于每个项目的性质的想法。一些更常见且易于实施的优化是:

  • 最大限度地减少CSS和JS代码以节省几百千字节的每个页面加载。
  • 所有资产以最合适的格式和最佳设置(在高质量损失和速度增益之间的良好平衡中)。
  • 启用服务器侧缓存机制(MEMCACHED,REDIS,GZIP压缩,APC等)。
  • 根据器件屏幕尺寸和像素密度为响应图像提供服务,并且仅为用户的情况加载适当的那些。
  • 写入清洁和简洁的HTML,不包括编译框架,停止加载未使用的脚本或CSS模块。

您可以在单个网页上有多少H1标签?甚至很重要吗?

The page should only have one H1 element, unless there are ARTICLE 或者 SECTION elements, in which case each of those can have a single H1 of its own.

H1标签对于读取网页代码并解释其内容的搜索引擎和其他机器很重要。文档,文章或部分的H1被认为是其主要标题或标题。不正确使用H1元素可以影响网站的SEO性能。

When do you use the following HTML5 tags: STRONG, EM, SMALL?

Although these tags create specific visual treatment (STRONG makes the text bold, EM makes it italicised and SMALL makes it smaller), this is not their purpose and they should not be used simply to style a piece of content in a specific way.

三种中的每一个都具有语义目的,只能用来标记文本,如下:

  • EM - 强调文本。这是应该强调的文本,从而改变其上下文的含义。
  • STRONG - 强烈重要。可以用于标题,标题或段落中,强调判决中最为意义的单词或短语。它也可以用来强调一个词或短语的重要性或严重性。
  • SMALL - 小字。用于免责声明,澄清和一般解除标记文本。

将文本作为粗体,斜体或更小的字体,可以使用通用标记,并且使用CSS代码应用的样式而不是滥用语义HTML5元素。

为什么 would you bother marking up elements as ARTICLE, FIGURE, ASIDE?

HTML5提供了许多新元素类型,因此可以正确地标记更复杂的内容。这有助于机器(例如搜索引擎,解析器,屏幕阅读器等)读取网页并理解其内容结构。

  • ARTICLE 定义一块独立的内容,其标题为自己的标题,可以在其网页的上下文之外存在。有用于新闻部件,一篇产品,产品。
  • FIGURE designates an image as a figure related to the content such as a schematic, blueprint or chart. With FIGCAPTION, a visual description of the image can be added too.
  • ASIDE 表示与页面上的主要内容有关的信息,但不是实际内容的一部分。示例用法将是与主要文章相同主题的相关文章列表。

使用Bootstrap或Foundation等CSS框架的优缺点是什么?在工作流程中包含框架的正确方法是什么?

  • 好处: 框架允许用于布局,元素和页面的快速原型设计,并促进整个项目中一致元素的可重用性。这通常消除了死胡同可交付成果,如Photoshop样机或其他高保真静态草图。相比之下,由框架提供支持的HTML原型稍后将演变为新站点使用的实际生产模板代码。另一个优势是具有更好框架的多数开发工具:较少/ sass预处理器,设计中的键值的变量,像grunt / gulp等的构建器工具,准备使用js脚本进行常用的交互(模数,转盘和崩溃盒子,等)。最后,框架具有良好的做法和常用的标准化,记录的代码内置,并且在出现问题时转向大型社区。

  • 缺点: 虽然框架提供了大量内置功能并消除了写入重复码的需要,但它们也倾向于概括共同的元素,并且通常会导致寻常的设计。另一个警告是,当使用具有更复杂网格的复杂或非传统设计的框架或具有更复杂的网格的布局时,与简单地从头写入代码相比,框架的“战斗”涉及更多努力。有时,框架具有太多的东西,即从未被使用的东西,或者如果没有正确使用,或者覆盖的冗余风格,导致加载时间较慢,与从头开始写的干净代码相比。

要正确利用CSS框架,开发人员不应包含框架的编译CSS,然后写自己的覆盖。要充分利用框架,应使用内置的开发工具:要设置的变量,要使用少/ SASS混合器,以及要排除的未使用的组件。另一个频繁的错误是对布局和造型框架标记的繁重依赖,这使得内容和风格的分离更加困难,并导致设计更改,要求编辑HTML而不是CSS。

谈论响应式网页设计时,差异是什么 移动第一桌面第一 方法?每个Excel在哪里以及它导致的一些问题是什么?

移动第一 是用于创建响应性CSS代码的方法,其中首先写入移动设备的样式,没有媒体查询,并且对于每个屏幕尺寸加入,添加了一个新的媒体查询,扩展,修改和覆盖了上一个(较小)的现有样式步。

  • 好处 - 最简单的是在较小的设备上优化负载时间,因为没有应用额外的资产和样式(以下媒体查询中链接的资产不会被加载)。对于更简单的设计非常有效,其中较大的屏幕样式是较小的较小版本的升级版本,当添加装饰或新元素时,在较大的屏幕上进行更丰富的体验。

  • 缺点 - 如果手机和桌面版本的布局具有显着差异,或者对于大多数Web应用程序,此技术在移动和桌面版本具有显着差异和大多数Web应用程序的情况下并不有效。在这种情况下, 移动第一 代码比太多覆盖更加复杂。

桌面第一 是编写CSS的经典方式;桌面版本的样式不在媒体查询中或以最小宽度要求启动,并且对于每个屏幕尺寸小于初始尺寸,从最大到最小的最大值开始添加新的媒体查询。通过每个后续媒体查询,元素都被隐藏,重新排列或重新设计。

  • 好处 - 与 移动第一 方法, 桌面第一 在屏幕尺寸之间显着差异的设计中卓越,例如当屏幕变小时删除元素时。这也是将响应能力添加到现有旧网站的唯一方法,而无需重写其代码。

  • 缺点 - 如果没有正确实施,它可能导致未使用或覆盖的代码,并在较小的设备上加载资产,从而在智能手机上更重。这导致不必要的样式覆盖,并为更简单的设计编写额外的代码 移动第一 可以更容易地实施。

对于移动和桌面版本略有不同的网站,它通常是基于屏幕尺寸的单独样式表服务的更好的做法,或者将两个布局隔离在非重叠媒体查询中,每个都是强烈特定于其目标设备的。

有更多的采访,而不是棘手的技术问题,因此这些是仅作为指导。不是每个值得招聘的“A”候选人将能够回答他们所有人,也不回答他们所有保证“A”候选人。在一天结束时, 招聘仍然是艺术,科学 - 以及很多工作.

提交面试问题

提交的问题和答案可能需要审查和编辑,可能会或可能不会被选中以在Toptal,LLC的唯一自行决定酌情选择。

* 各个领域都需要

马修曼陀罗斯

Web未定义草图介绍设计iOS.桨甲板安卓快速原型设计线框Adobe Photoshop.用户研究UI设计用户人物UX设计 + 0更多

美国最佳tal.成员自2016年3月23日以来

Matthew是30倍,获奖,奖励,铅产品UX / UI设计师,顾问和创意总监,拥有超过12年的动手体验。他'S致力于领先的财富500强品牌和初创公司,包括迪士尼,三星,索尼,阿迪达斯,BMW,汉莎航空,通过创新带来影响。马修'S使命是提供最有效,有吸引力,创新,高质量的体验,重点是用户体验。

展示更多

Mirko Lazarevic.

Web未定义Web App UI.移动应用设计萨斯设计线框仪表板设计数据可视化UI设计用户界面(UI)Web App UX.移动UI高保真大模型高保真原型 + 0更多

黑山自2017年8月12日以来的Toptal会员

Mirko是一个UX / UI设计师,拥有十多岁的经验,其中大部分都花了设计和重新设计跨平台应用程序,SaaS和企业产品和登陆页面。 Mirko专注于研究,战略,原型,UI设计和品牌。除此之外,很多mirko 'S设计工作一直是关于音乐和青年相关的行业,他的一些项目赢得了奖项,并以各地的设计书籍,杂志和博客为特色。

展示更多

Alexandre Brito

Web未定义用户体验(UX)移动原型UI设计用户研究可用性测试草图Axure RP Pro响应网页设计(RWD)移动应用设计UX战略电子商务设计电子商务UI. + 0更多

葡萄牙自2016年5月3日以来Toptal会员

Alexandre是一个用户体验设计师和战略家,为Deutsche Bank,Philips,Vodafone,KLM,英特尔,Pernod Ricard,Asics和Toyota等公司工作12年以上的经验。他为客户设计了更好的方式,以体验改善他们的生活和业务的产品和服务'底线。驱动器亚历山大是简化复杂的东西,了解行为,创造真实,创新体验的东西。

展示更多

寻找网页设计师专家?

寻找 网页设计师专家?查看Toptal的网页设计师。

toptal连接 最佳 3% 世界各地的自由人才。

加入Toptal社区。

了解更多