网站重新设计的基础-案例研究

本文概述

• 网站重新设计项目前研究的价值
• 步骤1：熟悉内容
• 步骤2：建立焦点。简化。组织。
• 步骤3：让客户参与
• 通过线框图创建视觉结构
• 为首页提供明确的目标
• 纳入品牌风格指南
• 尝试排版组合
• 抛光网站的外观
• 强势整理：注意细节
• Web重新设计建立在精心计划的基础上

完成网站重新设计项目只是回头思考并思考：”如果我知道我今天所知道的事情, 我会做不同的事情。”

我们都去过那里。我们对一个新项目感到兴奋, 与客户开玩笑, 签订合同, 并开始制作原型。生活看起来不错, 但项目基础不稳固。

不可避免的是, 一旦提出了第一个设计概念, 修订和范围爬虫便开始潜入, 并且从那里下坡。沟通破裂, 一切按计划进行, 最终, 新设计的网站类似于你受雇修复的怪兽。

不良的网站设计

世界一流的设计和用户体验并不是从一个漂亮的模型开始的, 它是建立在战略规划和专注于公司目标的设计愿景之上的。主要目标不能是”让我们创建一个更漂亮的网站”。

网站设计人员负责用户体验(UX)和用户界面(UI)。确保用户具有与我们设计的界面进行交互的最佳体验是我们的工作。这需要从项目的概念出发就进行彻底的计划。

本文概述了一个可靠的过程, 这将有助于确保你的下一个网站重新设计建立在坚实的基础上。

网站重新设计项目前研究的价值

为了演示该过程, 让我们逐步完成为西南考古公司(Archeology Southwest)重新设计的网站的各个阶段, 这是一个非营利组织, 致力于探索和保护美国西南部的考古遗址。

在对客户的领域和竞争进行初步调查之后, 请仔细检查每个可用的网站资产。该分析是单独计费的, 并且在撰写项目报价之前进行。以这种方式进行工作可以防止在Web设计人员尝试解决可能在项目后期爬到表面的问题时导致模棱两可或夸大的估计。

就西南考古而言, 我面临着一个迫切需要关注的站点, 即古老的CMS门户内的山脉和混乱的内容山脉。不好, 所以我着手创建订单。

步骤1：熟悉内容

装修房屋时, 重要的是在拆迁日之前, 尝试抢救有价值的材料。同样的原则适用于网站设计。你需要逐页浏览站点并提取所有内容。作为设计师, 我们必须弄清楚哪些内容应该是唯一的帖子类型, 哪些页面是静态的。

重新设计之前的西南考古学网站

完成此操作后, 请制定一种策略来组织所有内容, 但不要决定保留哪些内容以及应删除哪些内容。为什么不？

与现实世界中的企业和组织打交道时, 网站内容由许多不同的人负责, 而且内容的数量可能惊人。最好的方法是先对所有内容进行分类。

我通常从主要导航开始, 然后逐页浏览。这样, 在第一次客户见面之前, 我将掌握信息体系结构和站点地图。

不幸的是, 西南考古博物馆的网站并不典型。大多数链接无法通过顶部导航访问, 而是隐藏在内容中。如果我仅根据导航功能引用该项目, 就会感到很惊讶。

通过与客户团队中的各个人交谈, 我可以更好地了解该项目的范围, 与客户会面后, 我可以确定他们的网站重点, 工作流程, 内容和功能。从那里, 我们提出了以下核心内容类型(一些新内容, 一些现有内容)：

主要网站内容列表

步骤2：建立焦点。简化。组织。

将所有内容整理成带标签的框后, 就该为新结构制定蓝图了, 该蓝图将以最佳形式展示内容。但是首先, 我们需要建立焦点。

据西南考古公司称, 人们访问他们的网站来研究正在进行的项目的信息, 了解即将发生的事件, 并阅读月刊。这些活动回答了以下问题：”人们在网站上做什么？”但不要透露为什么人们首先访问该网站。

“为什么”是网站的重点。为了找到重点, 请查看组织的核心。

在这种情况下, 我确定”位置”是西南考古的核心。没有位置, 就不会有考古遗址, 废墟, 当然也没有博物馆或展览品。考古学中的一切都与位置有关。

通过确定重点, 我们可以简化和组织。对于西南考古, 我首先将内容分为与位置无关的类别, 例如团队页面和年度报告。经过一番整理后, 我得到了这张粗糙的地图：

两个核心内容领域–要做的事情和位置

上面的图像代表了出现的两个核心领域：要做的事情和位置。要做的事情(左)涵盖了网站访问者可以了解和做的活动。位置(右)侧重于与特定位置相关的网站内容。为什么要这样构造？

这个想法是, 普通用户可能不知道视频或项目的名称, 但可能会知道位置的名称。这样, 访问者可以找到与位置有关的内容。

此外, “位置”中的每个色块代表一个唯一的帖子类型。从组织的角度来看, 展览, 课堂和在线展览都是性质不同的事件。

在旧的西南考古遗址中, 杂志和在线商店有单独的静态页面, 访客可以在其中购买杂志。为了简化购买过程, 我在杂志模板中集成了购买选项。

其余的组织结构很简单：

• “关于”页面, 以了解有关组织的更多信息
• 指向”商店”页面的直接链接
• “捐赠”页面
• 新的”更新”页面

商店和捐赠页面都是赚钱的, 因此将它们包含在主导航中至关重要。

完成组织蓝图后, 就可以连接实际内容了。

步骤3：让客户参与

该站点地图包括页面类型, 但不包括内容映射。经验丰富的Web设计人员知道, 大多数问题是在客户开始向其网站添加内容时发生的。为避免此问题, 请从一开始就让客户端进入循环。

对于西南考古学院, 我创建了一个包含站点地图的Google文档, 并要求客户使用新结构映射其旧内容。

如果有什么不合适的地方, 我们稍后再解决。这是关键的一步。为什么？除了让客户参与流程之外, 它还可以在实施开始之前发现结构问题。

在这种情况下, 某些站点地图菜单项已更改, 并且由于客户端具有多个捐赠页面, 因此为此目的创建唯一的帖子类型是有意义的。

通过线框图创建视觉结构

在这一步中, 我开始为作品赋予视觉结构。为了使系统正常运行并成功整合”一切都与位置有关”的概念, 我在帖子类型之间创建了双向关系。

这是一个基本思路：当访问者访问西南考古遗址网站并选择大峡谷时, 他们将看到有关该位置的信息, 但是他们还将找到与项目, 活动, 展览以及网站管理员标记为位置的所有其他内容相关的信息-具体。

由于链接是双向的, 因此访问者还可以通过访问项目页面来到达大峡谷。最终, 我得出了以下结论：

网站页面布局概念

位置索引页面显示所有位置, 其中最新位置在顶部。搜索栏是用户到达页面后首先看到的内容。 Google地图将占据大约80％的屏幕。这使用户可以在地图上选择点, 并且在他们滚动或搜索时, 列表网格将显示在视图中。

在单个位置页面上, 主体位于左侧, 因为它是最重要的信息。相关的元信息是次要的, 因此它在右侧。为了获得平衡良好的布局, 至关重要的是, 在第一, 第二和第三元素块之间要有明确的层次结构。这使眼睛在各部分之间轻松移动。

在”西南考古学”布局中, 用户的视线始于标题, 然后移至内容块, 最后移至右侧栏。每条相关内容按相关性顺序显示。例如, 如果用户正在阅读有关大峡谷的信息, 那么此内容之后可能会附有照片和地图。

由于这主要是一个教育网站, 因此请务必提供”与此位置相关”选项。但是, 没有多少内容可以与每个位置唯一关联, 因此我将很少使用(但相关)的内容组合到了身体下方的单个块中。

在相关内容下放置杂志和视频缩略图会添加其他视觉元素, 并将用户引导至”购买”页面。该页面通过显示相关位置来完成。这是吸引用户进一步浏览该网站的好方法。下一步是对其他帖子类型继续使用此结构。

为首页提供明确的目标

有了适当的帖子类型模型, 我就可以专注于主页了。第一步是提出主页的目标-这是UI设计的重要组成部分。客户的研究表明, 许多用户在不完全了解网站内容的情况下偶然发现了该网站。因此, 引言和欢迎文字必须是用户首先看到的。

新的核心重点围绕次要位置。随后是archaeologysouthwest.org上发生的一切(当前的杂志, 博客, 事件, 新闻通讯等)。这是布局过程的迭代：

用于网站重新设计的线框迭代和最终设计(版本V1, V2, V3)

使用V1(左), 我设计了类似于原始主页的基本布局。层次结构不多。用户首先看到的是特色位置, 但是从那里, 他们很可能会迷失在列中。

对于V2(中间), 我创建了一个单独的列, 以使眼睛更容易理解。但是, 它仍然可以改进。这就是内容知识起主要作用的地方。我知道西南考古博物馆一次最多不会举办两个活动, 因此在首页上留出多个活动空间是没有意义的。

在V3(右)中, 我专注于即将发生的事件。如果由于某种原因有两个以上的事件, 则用户可以单击”更多”按钮并查看其余的事件。我还特别强调了当前杂志, 因为它是客户的摇钱树。用户从顶部开始, 然后以F模式向下移动。眼图为：

特色位置>欢迎>杂志>活动>新闻

有了可视的线框和网站的结构, 可以轻松整合功能和工作方式。在这一点上, 我将与客户举行另一次会议, 以讨论用户交互的功能和流程, 在此阶段, 这两者都更加清晰。

以后还会有修订吗？是的, 但是它们将进行调整, 而不是整个过程的更改。最重要的是, 不会有任何意外。

纳入品牌风格指南

现在是激动人心的部分-将线框转换为人们将使用和体验的东西。对于这个项目, 我的目标是通过实现品牌色彩和版式使文字内容易于理解。

样式指南–重新设计的网站的品牌颜色和版式

尝试排版组合

排版对于良好的网页设计必不可少, 因此我们必须尽早确定字体类型。西南考古界的大多数人都使用Univers Condensed Light和Adobe Caslon字体。没有何时使用Adobe Caslon的规则, 但是我注意到它的使用频率不及Univers。

我进行了一次小型字体研究, 以了解什么样的配对可以为专业的非营利组织带来最佳的感觉。但是, 我也不希望我的字体设计看起来与客户的营销抵押品相差太大。

重新设计网站的Adobe Caslon和Univers的字体研究

比较字体后, 很明显Adobe Caslon应该是标题字体, 而Univers将用作字幕。将主要标题设置为大写字母可以使品牌更具个人风格, 而所有大写字母都可以带来更多的公司氛围。

抛光网站的外观

我着手创造一个轻松开放的体验, 以便用户感觉西南考古学既平易近人又能胜任。根据分析数据, 大多数访问者使用桌面浏览器(可能是因为大多数人访问该网站进行研究)。因此, 我最初的重点是为台式机用户设计。

当我来自台式机时, 我希望访问者能立即看到精选的位置, 欢迎文本和即将发生的事件, 以及部分杂志标题。这样, 人们首先会看到公司的宗旨和所促进的事物。

桌面和移动设备的自适应Web布局

在移动设备上, 优先级略有不同。由于用户在旅途中访问信息, 因此事件更为重要, 因此它们在列表中的位置较高。

重新设计的网站的桌面和移动设计比较

我还将页脚中的捐赠按钮更新为更加友好, 方法是将捐赠按钮从按钮更改为句子。

强势整理：注意细节

用户进入详细信息页面有两个原因-他们想了解更多关于地标的信息, 或者他们已经知道某个位置并正在寻找其他信息(方向, 电话号码等)。因此, 立即显示两个选项非常重要, 这样用户就不必去搜索了。

西南考古最终网站的重新设计

我决定将详细信息列从内容区域中分离出来, 以赋予其更多的权重并使页面更有趣。这有助于创建组成层次结构, 因此, 当访客访问页面时, 他们将首先看到页面标题, 然后是一小幅图像画廊, 然后是详细信息列。

这种类型的设计可确保用户立即注意到该位置的其他详细信息。列周围有一些额外的填充物, 可以使眼睛集中注意力, 并使其更容易浏览信息。

移动视图崩溃了, 正如人们所期望的那样。首先擦除内容, 然后是元信息。我将视频和杂志放在移动页面的最后, 因为它们对移动用户而言最不重要。其他页面采用相同的结构来创建一致的流程和体验。

Web重新设计建立在精心计划的基础上

回顾网站的重新设计过程, 很明显, 大部分时间都花在组织和规划上。只有30％的项目花在了网站设计上。

通常, 当设计师展示他们的作品时, 他们无法传达多少时间专门用于交流的细节, 从而导致缺乏经验的设计师直接进入模型。结果？出轨的项目和不满意的客户。

为了使网站重新设计成功, 必须进行详细的计划。花时间进行项目前研究, 熟悉现有内容并吸引客户参与是至关重要的步骤。

最终, 没有办法解决它；通过有条不紊的项目组织方法, 可以实现惊人的网站重新设计和专业信心。