中国海洋大学融媒体建设与新闻网紧密联合，且与学校办学性质相呼应，围绕“海纳百川，观海听涛”打造。中国海洋大学新闻网以“观海听涛”为名，既取“观海大事，听海大观点”之意，又极具学校“海洋学科高等学府”的办学特色。除此之外，网页的设计也处处体现着“海洋元素”。
海之韵——海洋元素打造个性海大印象
首先，网页采用蓝色作为基准色，与“海洋”相得益彰，大气庄重；banner下分割线的流动海波纹设计，新颖而灵动，让人眼前一亮。
banner海浪动态效果图
鼠标悬停触发字体变成“海大蓝”变色效果。
字体变蓝动态效果图
文章栏目聚合版块亦采用了蓝色为底色，辅以海浪礁石背景的蒙版效果，海大之声犹如急涛怒雪拍岸而来，振聋发聩。文章内容页也体现着海洋和蓝色元素，可谓处处匠心。
图：海浪礁石蒙版效果
海之声——深度聚焦前沿观点，新媒体矩阵协同发声
“观海听涛”导航栏简洁提炼“资讯、校园、深度、聚焦、全媒体”五项关键词，既有校园快讯、资讯共享，也有“回澜阁、记者眼、人物”等聚焦学术前沿观点的深度剖析、人物专访，更有应“1·25讲话”推进全媒体传播格局所设的“全媒体”专栏，微信、微博、图片、视频、校报……多端媒体协同发声，汇聚最强海大声音。
融媒体协同发声
“观海听涛”新闻采编系统提供“我要投稿”、“投稿须知”入口在整个新闻网页面浮动。为专业及非专业采编人员提供新闻线索提供了便捷通道，既能“观海”，亦可“听涛”。全端媒体融合、全员采编融合，海大新闻网为“加快构建融为一体、合而为一的融媒体传播格局”进行了有益的实践。
海之澜——分屏设计响应式布局，提升优质阅读体验
中国海洋大学“观海听涛”新闻网主体部分以海浪涛声为衬，模块分布错落有致、蓝（“海”）白（“涛”）两色交替出现的分屏式设计搭配响应式布局，自动适应PC、手机、PAD等多种终端屏幕尺寸，力求给大家最优质的阅读体验。“回澜阁”的滚动轮播、“微言海大”的跳跃式切换交互图标……流畅精致的微交互同样赋予了新闻网别具一格的精巧心思。
