Website Design

Creekside's Website Design and Best Practices

What is a website?

Nowadays, a website is one of many communications platforms used to interact with a church congregation. However, while churchgoers can get notified of a variety of information from a post in their social feed, a website is where they go to find specific information. That's why it is important for a website to be easy to both digest information from and interact with.

Creekside_Logo_Blue

Content

Content Formatting

Design

Design Languages

Much of the Creekside website is based off of Material Design 2 and the newly released Material Design 3 design languages by Google. A design language is just a set of rules or principles that keep a project consistent and ensures that designs created for it have a sense of continuity. This page goes over the elements of Material Design that Creekside uses to help you understand our personal design language better.

You can read more about Material Design on their website.

Material Design 3 UI Components - 9to5google.com
Material Design 3 UI Components - 9to5google.com

Layout

There are two basic page layouts, one for main pages, another for normal pages.

Main Pages

Main Pages

Main pages include almost every page that can be accessed from our header menu. These are also known as second-level pages. They aren't the home page, but they're not just a content page either.

These pages consist usually of a hero image that dominates the top of the page. Users will need to scroll to get to the rest of the content placed below the hero image. If a hero image is set to full screen height, a downward facing chevron is used to indicate there is content below the fold.

Main Page Layout
Main Page Layout

Content Pages

Content Pages

Content pages are primarily providing information related to a main page that does not have room for all the content related to it. This page is a content page.

For example, Student Ministries might have a content page just for their student life groups containing group information and registration.

Content Page Layout
Content Page Layout

Color

The website uses a combination of neutral colors and brand colors to achieve a clean look. Neutral colors were derived from Brand colors using Material Design 3's color extraction algorithm called Monette.

Background

#f0f1f2

CMYK 82, 42, 21, 0

RGB 46, 128, 167

Pantone 646

Card

#fbfafd

CMYK 82, 42, 21, 0

RGB 46, 128, 167

Pantone 646

Text & Fonts

Web

We use the Nunito Sans type family for web.

Below is the current font scaling for the Creekside website. When creating on the website, please do not change the default font sizes, default font weight, or use any bold text for Heading and Text Editor modules.

Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Heading 5 - Caption Text

Iconography

Icons are used a primarily in application design. There, they signify familiar actions a user can do. On a website, we can use that familiarity to place a download icon or an event date next to a calendar icon. Icons help users pick out key information at a glance.

Shape

Rounded Corners

Motion