Grace Buckley
Design For Web
#cb0032
#000000
Concept, Type and Colour
#ffffff
#4ebcc2
#ff9832
#1f3c89
#329865
Ancient Egypt: Quicksand Regular Ancient Egypt: Quicksand Bold Font family: Quicksand, Arial, Helvetica, sans-serif
Concept
Colour and Type
There a a lot of existing educational websites for children about Ancient Egypt but they are hard to navigate, have out dated graphics and need an update.
Quicksand Regular is the main font because it looks friendly and approachable. It is also easly readable so is ideal for my target audience: teenage children. The colours chosen for the website have a significance to Ancient Egypt and not just random colours without meaning. All of these colours had a meaning in Ancient Egypt and were considered an integral part of an item or person’s nature.
The website will be a homework tool for high school students that is easy to navigate by only needing one click to get back to where you started. It has hand drawn illustrations to make the websites look child friendly but not childish.
Grace Buckley
Design For Web
Scamps/Sitemap
Pharaohs
Mummies
Hieroglyphics
Initial Ideas Originally the links to the different pages were in the centre of the homepage but for practical reasons the design was revised and all the links now go along the top which is a classic design for a website. It is more functional and means that every page will be consistent. The imagery above were the intitial sketches for the link buttons just in line form to make the website look playful and child friendly.
Pyramids
Home (Ancient Egypt)
Gods
Quiz
Sitemap The sitemap consists of seven links which all link back to each other through the navigation bar at the top of each page. This is so that each page is easy to use and get back to where you started with one click, which is suitable for the target audience who tend to be quite lazy.
Grace Buckley
50px
160px
160px
Design For Web
160px
200px
160px
160px
160px
50px
50px
Wireframes
160px
160px
160px
200px
160px
160px
160px
50px
10px
10px
132px
132px
54px
54px
108px
84px 276px
80px
40px
120px
300px 414px
400px
Homepage wireframe 525px
The homepage has its own wireframe for its body content (above) and each page follows the same layout of navigation buttons to keep it consistent.
Content pages wireframe The content page (right) is the same for all of the other pages. The boxes containing pictures are extended depending on the content of each page.
Grace Buckley
Design For Web
Illustrations The original drawings for the illustrations are shown above as scanned images which were then traced and coloured according to the five coloured swatches. The hand drawn nature of them carries on the theme of the navigation buttons and home page illustration.
Drawing Development
Grace Buckley
Design For Web
Digital mockups/Rollover buttons
Digital mockups The mocked up versions of the layout of the homepage and one of the content pages (above) is to make designing the layout in Dreamweaver easier. It also helped with measuring it out because of the grid guidelines. The mockups on Illustrator were used as images in the website eventually after alignment issues arose.
M UMM I E S
HI
ER
O GLY P HI C
S
P HA
R AO H S
G ODS
NC
PT
IE N T E G Y
A
A
NC
PT
Rollover buttons IE N T E G Y
G ODS
The buttons on the left above turn into negatives when you move the mouse over them. This makes the colours more obvious and adds a bit of fun and interactivity to the website.
Q UI Z
HI
ER
O GLY P HI C
S
Grace Buckley
Design For Web
Format mockups This shows how the website would look on three different screen sizes. The large simple illustrations and text lend themselves well to different formats.
Website in context