返回作品集
首页：深墨蓝色背景上依次是一行小字“Byzantine chant · Greek traditional music”、标题“A living voice. A timeless tradition.”、一段简短介绍、金色的名字 Petros G. Nikitas、一个金色的“Explore online lessons”按钮和一个“Listen on YouTube”链接；右侧是 Petros Nikitas 身穿黑色长袍、双手交握的肖像。顶部是导航栏。
在新标签页中打开 petrosnikitas.gr

Petros G. Nikitas — 拜占庭圣咏、唱片与在线课程

项目概述

Petros G. Nikitas 是塞雷斯圣尼基塔斯教堂的首席领唱（protopsaltes）。他教授拜占庭音乐，指挥一个 25 人以上的合唱团，发行过四张拜占庭音乐 CD，并连续 15 年制作和主持电台节目《Psaltirion Terpnon》。新网站取代了他原来的网站，为他工作的每个方面都提供了独立页面：个人经历、唱片、照片、报刊与书信，以及在线课程。

网站以希腊语为主，每个页面都有完整的英语版本。在线课程页面介绍可以学习的内容、适合的程度以及如何开始；常见问题如实说明，学费、时间和授课语言都通过电子邮件商定。照片在也可用键盘操作的查看器中打开，每一篇扫描的文章和书信都附有两种语言的文字说明。

挑战

网站只能陈述客户确认过的内容。学费、课表、上课平台、授课语言和文凭都尚未确定，因此课程页面既要吸引咨询，又不能对其中任何一项作出承诺。照片和唱片封面来自他的旧网站，分辨率很低，而旧网址仍需能正确跳转。档案是一批扫描的希腊语文件，英语访客无法阅读。此外，受众从当地教会信众到海外学习者都有，使用各种尺寸的屏幕。

解决方案

每个页面都由共用模板和每种语言一个内容文件生成，因此希腊语和英语始终一致，而且即使不运行 JavaScript 也能完整阅读。课程页面先介绍学习内容、程度和三个入门步骤，并把有关学费和语言的问题引向电子邮件咨询。旧图片在不改变尺寸的情况下重新压缩到每张 100 KB 以下，图片总体积减少近一半；旧网址则重定向到新页面。档案中的每份扫描件都有两种语言的说明。字体、照片和脚本都由网站自身提供，不使用 Cookie、统计分析或嵌入式播放器；在四种屏幕宽度下对所有页面进行的 axe-core 自动检测未发现任何 WCAG A 或 AA 级问题。

图片集

  • 首页：深墨蓝色背景上依次是一行小字“Byzantine chant · Greek traditional music”、标题“A living voice. A timeless tradition.”、一段简短介绍、金色的名字 Petros G. Nikitas、一个金色的“Explore online lessons”按钮和一个“Listen on YouTube”链接；右侧是 Petros Nikitas 身穿黑色长袍、双手交握的肖像。顶部是导航栏。

    首页以声音开篇

  • “Rooted in tradition. Dedicated to its future.”板块：左侧是 Petros Nikitas 站在教堂木制诵经台前的照片，面前摊开一本书；右侧是两段文字、一个“Discover his story”链接和三组数字：4 张拜占庭音乐唱片、15 年电台节目、合唱团 25 人以上。

    三个数字，概括艺术家与教师

  • “Music that carries a heritage forward.”板块并排两张照片：几位领唱在吊灯下借着烛光看乐谱，标题为“Byzantine chant”；一群身穿白色上衣、系薄荷绿围巾的女士与身着西装的 Petros Nikitas 合影，标题为“Greek traditional music”；每张照片下各有一段简短文字。

    两种传统，一段音乐旅程

  • 个人经历页面向下滚动后：左栏是他的名字和六个章节链接，其中“Learning the psaltic tradition”为粗体；右侧依次是这一章、带有“Explore online lessons”链接的“Teaching the next generation”和“Choir, traditional song, and international presence”，每章各有标题和一段文字。

    个人经历 — 滚动时自动标出正在阅读的章节

  • 唱片《The Compunctionate Triodion》的页面：一个“All recordings”返回链接、CD 封面（一幅带希腊文字、以浅绿色为框的基督圣像），旁边是标注“Byzantine music · CD release”、标题、一句简介、名字 Petros G. Nikitas、一个金色的“Listen on YouTube”按钮和一个“Enquire about this recording”链接。

    唱片 — 每张专辑都有独立页面

  • 在线课程页面的“What your studies can explore”板块：四栏，每栏有一个金色小图标、一个标题（Notation & foundations、The eight modes、Voice & interpretation、Repertoire & psaltic practice）和一段简短说明；下方是标题“A starting point for your journey”。

    在线课程 — 学习内容一目了然

  • 照片查看器在变暗的图库页面上打开：Petros Nikitas 坐在麦克风旁、头顶一盏明亮灯光的照片，右上角是关闭按钮，下方是上一张和下一张箭头，中间是说明“Music, text, and interpretation”和“Photograph 6 of 6”。

    图库 — 也可用键盘浏览的照片查看器

  • 报刊与书信页面的“Correspondence & greetings”板块：三封扫描的希腊语书信放在浅色底板上，每封都标有“Original Greek scan”、寄信的都主教区（Polyani, Kilkis & Saint Athanasios；Ierissos, Mount Athos & Ardameri；Monemvasia & Sparta）、一段简短说明和一个“View original document”链接。

    报刊与书信 — 原件扫描，附双语说明

  • 平板上的首页：标题“A living voice. A timeless tradition.”叠在 Petros Nikitas 身穿黑色长袍的肖像上，下面是一段简短介绍、金色的名字、一个“Explore online lessons”按钮和一个“Listen on YouTube”链接；再往下是“Rooted in tradition. Dedicated to its future.”板块的开头。

    平板上同样的欢迎页

  • 平板上的“The voice. The lasting imprint.”板块：一段简短文字和一个“Explore the recordings”链接，下方两排共四张 CD 封面：带标题的 Saint Athanasios of Mount Athos 和 The Compunctionate Triodion，下面是 Saint Spyridon Church 的红金色圆形圣像封面和紫色的 Small Paraklesis to the Theotokos 封面。

    四张唱片并排呈现

  • 平板上的图库页面，在“All photographs”和“Choir”之间选中了“Byzantine chant”筛选：两栏照片分别是烛光下的领唱们、站在诵经台前的 Petros Nikitas、并肩吟唱的领唱们，以及礼拜中的一组领唱，每张都配有简短说明。

    图库 — 按圣咏或合唱筛选

  • 平板上课程页面的“Start with a conversation”板块：一个金色的“Enquire about lessons”按钮，下方是电子邮件地址；接着是三个编号步骤（Share your experience、Discuss your studies、Agree on the next step），每步各有一行简短说明；再往下是问题板块的开头。

    在线课程 — 三步开始

  • 平板上的“Questions before you begin”板块：五个问题，前两个已展开（初学者能否咨询，以及上在线课程需要什么），每个回答一小段；下方是联系板块，有电子邮件地址和一个“Email Petros”按钮。

    咨询之前，先看清楚答案

  • 手机上的首页：Petros Nikitas 身穿黑色长袍的肖像占据上半部分，标题“A living voice. A timeless tradition.”压在肖像下缘；下方是一段简短介绍、金色的名字、一个“Explore online lessons”按钮和一个“Listen on YouTube”链接。

    手机上依然以肖像开篇

  • 手机上展开的菜单，深色背景：金色的 Home，接着是 Biography、Recordings、Gallery、Online lessons、Press & letters 和 Contact，每项右侧有一个箭头，底部是 YouTube 和 Instagram 链接；页头的菜单按钮变成了关闭按钮。

    一个菜单，通达全站

  • 手机上的“Learn a tradition. Find your voice.”板块：标注“Online Byzantine music lessons”、一段简短文字、三条带勾选标记的要点、一个金色的“Discover the lessons”按钮，以及一张烛光下领唱们照片的上半部分。

    从首页一点即达在线课程

  • 手机上的唱片页面：四张 CD 封面分两栏排列并附标题（Saint Athanasios of Mount Athos、The Compunctionate Triodion、Saint Spyridon Church、Small Paraklesis to the Theotokos），下方是一条关于官方 YouTube 频道的说明和一个“Listen on YouTube”按钮。

    手机上两栏展示的唱片

  • 手机上的照片查看器：一张领唱们在吊灯下借着烛光看乐谱的照片，上方是关闭按钮，下方是上一张和下一张箭头，中间是说明“At the heart of the chant”和“Photograph 1 of 6”。

    在手机上细看照片

  • 手机上的个人经历页面：“Beginnings in Serres”和“A foundation in musical knowledge”两章，以及“Learning the psaltic tradition”的开头，每章各有标题和一段文字。

    他的故事，一章一章读

  • 手机上的联系板块：标题“Let music be our meeting point.”、一段简短文字、带复制按钮的地址 info@petrosnikitas.gr、一个金色的“Email Petros”按钮、提示“Your email application will open.”以及一行“Serres, Greece”；下方是页脚的开头。

    联系 — 一点即可复制邮箱地址