网站品牌指南
对外关系办公室为皮马社区学院所有面向公众的网站制定了网络品牌指南，以确保设计的一致性和品牌识别.
遵循一致的标准, 我们在学院和品牌中散发着专业和成熟, 为我们现在和未来的学生创造积极的影响, 工作人员, 教师, 父母, 利益相关者和所有体验过皮玛存在的人.
本指南为所有网站设计领域提供了指导. 如果您对本指南中未列出的设计决策有疑问或不确定, 请直接联系 网络系统.
主要设计元素
颜色
以下颜色是我们的品牌颜色，支持HEX, RGB和HSB值.
如果可能的话，利用 主要的 颜色选项首先使用 二次 作为另一种选择. 使用辅助色 二次 在需要的时候上色.
我们的调色板也应该利用相关的文本颜色，当当前的颜色被用作背景时.
一个典型的例子是皮马岛.Edu的导航栏是 支持黑人 与 支持青色 作为字体颜色.
主要的
- 十六进制:# 045594
- Rgb: 4,85,148
- Hsb: 206°97% 58%
二次
- 十六进制:# f7902d
- Rgb: 247,144,45
- Hsb: 29°82% 97%
支持青色
- 十六进制:# 00 aeef
- Rgb: 0,174,239
- Hsb: 196°100% 94%
主要徘徊
- 十六进制:# 03406 f
- Rgb: 3,64,111
- Hsb: 206°97% 44%
二次徘徊
- 十六进制:# ec7709
- Rgb: 236,119,9
- Hsb: 29°96% 93%
支持徘徊
- 十六进制:# 0092 c7
- Rgb: 0,146,199
- Hsb: 196°100% 78%
支持黑人
- 十六进制:# 000000
- Rgb: 0,0,0
- Hsb: 0°0% 0%
配套深灰色
- 十六进制:# 808080
- Rgb: 128,128,128
- Hsb: 0°0% 50%
配套浅灰色
- 十六进制:# E3E3E3
- Rgb: 227,227,227
- Hsb: 0°0% 89%
字体
皮马的主要印刷字体是 阉割过的雄鹿. 这种字体包括在我们所有的营销材料作为字体选择我们的口号和支持短语.
在我们的网络平台上, 然而, 在支持我们品牌的领域，我们为了易读性的原因，很少使用这种方法. 的 阉割过的雄鹿 字体只应用于标题，并且总是以标题大小写书写.
为了在网络上建立Pima的独特外观，我们只使用下面列出的字体.
字体选项
的 阉割过的雄鹿 字体应该只用于网站的标题，它也需要许可证才能使用. 对外关系办公室不负责提供授权字体. 的 Helvetica Neue 目前可以作为免费的网页字体使用和下载 谷歌字体.
如果无法使用这些字体，请联系 网络系统 直接询问如何进行的方向.
字体样式指南
下面是一些如何在整个web平台上正确处理这些字体的指导方针, 包括标题样式, 重量和尺寸.
显示了样式的颜色选择，文本的可选颜色选项可以在 color 节，上面列出.
h1
首页页眉
字体大小: 44px 字体重量: 700
h2
支持页眉
字体大小: 32px 字体重量: 600
h3
内部内容标头
字体大小: 22px 字体重量: 700
h4
内部内容子标题
字体大小: 19px 字体重量: 600
h5
内部内容子标题
字体大小: 17px 字体重量: 500
p
广告正文
字体大小: 17px 字体重量: 400
Alt
另类风格A
字体大小: 25px 字体重量: 300
Alt
另类风格B
字体大小: 17px + 字体重量: 700
标志的使用
皮马社区学院的标志是学院最直接的代表. 这是一项宝贵的资产，必须以适当的、经批准的形式持续使用. 品牌识别系统中最重要的元素是一个独特的标志, 这为我们的组织创造了一个强烈的视觉表达.
在皮马网区域内, 徽标目前只需要在页眉和页脚适当使用. 这提供了一个清楚的认识，该网页是一个皮马社区学院实体.
Pima徽标的任何其他用例都应该引起Web系统团队的注意，以获得适当的指导.
页面布局
在我们的Pima网页, 我们充分利用元素之间的空白来容纳文本的所有区域, 图像和图形为我们的用户提供了消化整个内容的空间. 这也使我们有能力使用大尺寸, 品牌元素和图形的重量和颜色.
网页布局应该始终通过响应式网格或柔性系统来处理. 旧的固定宽度网格和布局方法不应该再使用，因为它们不能在不同的屏幕尺寸和设备上很好地显示.
布局的内容
我们的页面通常在布局上非常一致，这有助于在看到新内容时提供熟悉感.
首先，我们的内部内容页面包括一个左边的内部页面导航，一个 面包屑区域，支持图像和页面标题，然后是相关内容. 在相关内容中, 我们允许一个细的内部右列的重要信息, 例如联系信息或办公时间或支持项目的快速链接.
在更高级别的页面中使用, 我们放弃了左侧导航，因为这些页面中的内容通常表示要遵循的连接页面的导航.
最后，所有的皮马页面包括皮马页眉和皮马页脚，如图所示. 如果您对页面布局有疑问或担忧，请联系 网络系统 为方向.
图形元素
支持图形
与整个匹马的品牌元素一致, 我们将辅助图形添加到最适合附加品牌支持的区域.
这些辅助图形很少使用，通常用作图像中的页脚支持元素或辅助元素.
如果有一个适用的区域添加这样的图形，请咨询网页设计师在 网络系统.
链接样式
对于不同的用例，Pima有一些不同风格的链接. 如果您不确定要使用哪个用例，请联系Web设计师 网络系统.
内嵌链接
内联链接，比如 这个链接，原色:#1A0DAB，颜色:#03406f，作为悬停动作. 当前所有链接都加了下划线, 除非在特殊情况下，如导航和按钮，其中内容的理解是一个链接.
访问过的链接应该有一个十六进制紫色，#660099.
块的链接
关联段落之外的链接可以具有相似的特征，也可以不同. 这些样式示例包括列表、边列和导航区域中的链接. 这不包括已被样式化为按钮的链接.
按钮
在某些情况下，按钮是比链接更好的选择. 它提供了一个清晰的行动号召，用户可以毫不费力地访问.
我们网络平台上的所有按钮在大小和颜色调整方面都有相似的样式, 如列表所示. 按钮的代码, 控件中按钮示例的文本和悬停颜色 颜色部分 以上.
按钮CSS样式
边界: 1 px固体 按钮的颜色
margin-bottom: 16px;
填充: 9.6 px 12 px;
宽度: 230px;
主要按钮选项
辅助按钮选项
面包屑
作为一种快速导航和页面定位的形式，Pima.Edu有一个链接的快速导航路径，被称为“面包屑”. 这是导航的必要部分，可以帮助传达信息体系结构，如果可能的话，应该添加到适当的区域.
下面是皮马面包屑标准的一个例子.
呼出样式
通过我们学院网络平台上的许多页面, 内容区域由称为对话框的风格化区域分隔. 这些呼出的目的是引起人们对重要信息或相关内容的注意.
下面是一些例子，说明这些呼叫区域应该如何风格化，以保持皮马品牌的形象
呼出标头
这是一个呼出的例子.
呼出标头
这是一个呼出的例子.
您 & 统计数据
支持长区域的内容, 大声说出重要的信息和引人入胜的引语是很好的. 这些样式通常漂浮在内容的一侧(移动设备除外)。. 下面你会看到一些例子，我们是如何设计的，以适应我们的品牌参数.
“我相信，我在这个项目中接受的教育将再次让我实现我的目标."
35% 更高的平均每周收入*