1. Web and user interface design –
Submission 1
Name: Kate Godinho
Contents
Website idea ...........................................................................................................................................2
Design guidelines ....................................................................................................................................2
Mental model......................................................................................................................................2
Metaphors...........................................................................................................................................2
Learning theories ................................................................................................................................3
Sitemap...................................................................................................................................................3
Wireframe...............................................................................................................................................4
Homepage...........................................................................................................................................4
Content page.......................................................................................................................................4
RSVP page ...........................................................................................................................................5
Prototype ................................................................................................................................................6
Desktop...............................................................................................................................................6
Homepage.......................................................................................................................................6
Content page...................................................................................................................................6
RSVP page .......................................................................................................................................7
Tablet version......................................................................................................................................8
Mobile version ....................................................................................................................................8
Grid..........................................................................................................................................................9

2. Website idea
The website I am designing is a wedding website used to provide information to guests for my
wedding in May 2016. The website will provide details about the ceremony and reception venues,
directions, accommodation, and contact details. I have already build a wedding website at
https://www.theknot.com/ and will use the content of this site as a starting point in my design. I will
not use any of the code from this site but the content will be along similar lines.
Design guidelines
Mental model
The mental model I am using is based around websites I have used as a guest for other people’s
weddings and websites created using templates such as those on https://www.theknot.com/ or on
http://www.mywedding.com/free-wedding-websites (see Figure 1).
Figure 1 Some samples of website templates from www.theknot.com
The content included is based on the information I would expect to get as a wedding guest, often
included as a paper printout with the invitation. This includes time, date and location for the
ceremony and reception, maps and/or directions to venues, information about accommodation,
contact details for the bride and groom and how to RSVP for the wedding. I am designing the
website to be used to provide information before the wedding rather than as a means of sharing
photos and guest comments.
Metaphors
The colours and designs used on the website will be based on those used in traditional wedding
invitations. I plan on using light pastel colours, with creams, whites, silvers and golds which are
colours generally used in wedding invitations. I will also incorporate lace, ribbon and/or decorative
scroll lines within the borders and backgrounds of the website to give it a traditional appearance
(see Figure 2).

3. Figure 2 Samples of designs for wedding website
Keeping with the wedding invitation theme, I will use script fonts within the website, similar to those
used within wedding invitations (see Figure 3).
Figure 3 Sample of script font used in traditional wedding invitations
Learning theories
I will incorporate behaviourist learning within the website by using CSS to give a consistent layout
and colour scheme across the webpages. I will also incorporate association by using colours, designs
and fonts associated with traditional wedding invitations.
Cognitivist processes have been included by using similar structure and content to those used in
other wedding websites. I have based the content on the information that guests would traditionally
receive on paper alongside their wedding invitation. This should give the website good affordance as
it will be obvious to guests where to find different content.
Constructivist learning processes are also included by allowing guests to RSVP within the website
and by providing contact details for the wedding party. This provides some social interaction within
the website. Another potential way would be to include a guestbook within the website so that
guests can leave messages for the bride and groom. However, I have decided to use the website
primarily as a tool for guests to get information before the wedding so I have not included a
guestbook in my design.
The humanist learning style is also included by designing the site responsively, making it adaptable
for use on different devices (desktop, mobile and tablet). I will also test the website on different
browsers to ensure that there are no compatibility issues.
Sitemap
The sitemap is shown in Figure 4. The site will have six pages – the homepage, Wedding details,
Accommodation, Travel, Contact, and RSVP.
Figure 4 Website sitemap

4. Wireframe
Homepage
A wireframe for the homepage of the website is shown in Figure 5. It will have a header, a menu bar
below the header, some content in the middle, and a footer. I expect the homepage to differ slightly
from the content pages. It will contain a photo of the bride and groom along with the basic wedding
information (date and location).
Figure 5 Wireframe of homepage.
Content page
A wireframe for the content page of the website is shown in Figure 6. This will be the structure used
for the pages for Accommodation, Travel and Wedding Information. It will have two columns – a
narrow column on the left and a wider column on the right. The left hand side will contain a menu to
link within the webpage, while the righthand side will display the webpage content.

5. Figure 6 Wireframe of content page.
RSVP page
The wireframe for the RSVP page is shown in Figure 7. This will have two columns, the left one being
wider than the right. The left will contain the RSVP form, while the right will contain a picture.
Figure 7 Wireframe for RSVP page.

6. Prototype
Desktop
Homepage
The sketch of the homepage in Figure 8 shows the proposed structure.
Every page in the website will include the header Walshinho wedding. Some scroll images will be
added to the header to make it more visually striking. Below the header, there will be a menu bar
linking to different parts of the site. There will also be a footer at the bottom of each page which will
be an image using a fancy scroll to provide a definite end point to each page.
The homepage will include a large photo of the bride and groom in the middle with the wedding
date and location given below the photo.
Figure 8 Prototype of website homepage.
Content page
The content page is shown in Figure 9 for the Wedding Details page. The Accommodation, Travel
and Contact pages will have similar structures. The left-hand side menu will link to sections within
the page. The right-hand side will contain the main content, including some photos of the locations.

7. Figure 9 Prototype for content pages.
RSVP page
The RSVP page will include a form to allow guests to RSVP for the wedding (Figure 10). As the form
will not take up the entire page, a photo or design will be included on the right-hand side to make it
more visually appealing. The form will ask guests for their name, email address, number of guests
attending, whether they are attending on the 27th
and/or 28th
May and for any special requirements
such as allergies, or dietary requirements (vegetarian, vegan, halal, etc.).
Figure 10 Prototype of RSVP page

8. Tablet version
Figure 11 shows the prototype for the tablet version of the website. The homepage and RSVP page
will remain the same for the tablet site. The content pages will change as shown in the sketch. The
photos will be removed to allow more space for text.
Figure 11 Prototype of content page for tablet version of website
Mobile version
The prototype for the mobile website is shown in Figure 12. The homepage will remain similar,
except that the menubar will change to a hamburger menu to optimise space. The side menu and
pictures will disappear from the content pages to maximise space. The picture will be removed from
the RSVP page so that only the form will be presented.
Figure 12 Prototype for mobile version of website

9. Grid
I have created a grid framework for the website of 16 columns as shown in Figure 13 overlaid on the
content page.
I will be using a grid framework within my website design as it provides an easier way to position
content within the webpage. As I want my website to have quite a clean, symmetric design, a grid
should provide the regular framework within which I can organise my content more easily. A grid
framework makes positioning easier by providing predefined classes sized according to the grid
layout. Using a predesigned framework will also make responsive design easier when designing for
mobile and tablet devices by including media queries to adjust the grid size for different devices.
Figure 13 Proposed grid framework for website