Brighton School: Web Design Phase 1


screenshot from the teacher's website
screenshot from the teacher’s website

Today was the first day of website design and production class. I don’t know if there’s an official class name and to confuse it a little, it’s a split class where both sections take turns with the teachers and so this session is split with Marc for his business class. I’m opting for option 1 track 2 and build a responsive website with working homepage and designs (and mock-ups in photoshop) for 2 sub-pages for my branding project from last quarter, Brighton School.

Current solution for Brighton School's Website
Current solution for Brighton School’s Website

Phase 1 of Web Design

1. structure information with user-centered considerations (Site Map) *Research the competitors (Links) and content (html)

Brighton School | Private Preschool Through 8th Grade. I have started my Wordpress build. I’m going to continue to gather content. I’m using wordpress because this site is going to need up to date posts for community events and mentions in the press, etc. WordPress offers an easy to use interface that the client can use to update and add new information.

site map v.1
site map v.1

Holy Rosary School | Homepage.
Bright Water School | A Waldorf School in Seattle, WA.
The Bush School, a K-12 independent, coeducational day school in Seattle, Washington.
Lakeside School – an independent school in Seattle, WA. (I like this one especially)
Westside School | Westside School.

2. communicate style and function Branding (style Tile) Version 1, very basic. Typography not fully solved, though I really like this Noto Sans.


3.wire-framing explore more efficient layouts (Don’t forget Advertisements if necessary!)

See Brighton School: Wireframes | Katablog.

4. understand mobile strategy and other media requirements Client wants 3 layouts– mobile, tablet (landscape), and desktop. I think that teachers’ tool is the tablet. Great for on the go teaching, taking attendance, I think it would be a nice thing for the teachers to look at the website on their tablets and have a great experience.

3 layouts responsive

5. Users: audience, demographic. Who is this for? How should that influence the website? I realized that I wanted the website to appeal to the students at the school as well as the teacher. A school. It’s an organization for kids after all. So I’m looking at media that relates to that demographic and taking visual cues.

PBS KIDS: Educational Games, Videos and Activities For Kids!.


siteInspire – Web Design Inspiration.



  1. […] I think your design will work great for a brochure.  I assume the the tiles on the homepage act as the navigation to the different informational sections of the site? Here are some thoughts/notes: i.  you may want to consider keeping the admissions/summer camp tiles the same size as academics and school life.  That way there isn’t image cropping happening when its shrunk down to mobile.   This could free up some real estate to expand the slideshow perhaps? ii. when you move to PSD’s, think about interesting ways of hiding/showing the search bar. iii.  I think its a great start! Everything is modular and works well folding down to mobile.  Looking forward to seeing more progress next week.” (Earlier Blog Relating to this Post) […]

  2. Hey There. I found your blog using msn. This is a very well written article.
    I’ll be sure to bookmark it and come back to read more of your useful info.
    Thanks for the post. I’ll definitely return.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s