Prototyping Take #1

To create a prototype you must first take a visit to Photoshop!

Within Photoshop follow the following steps to begin an outline of a website;

1/ Create new file (1440px x 800px)

2/ Add white background (edit > fill > #f5f5f5)

3/ Label layer as “Black Background”

4/ Add guides creating grid format (two vertical, one horizontal)

5/ Add site header background

6/ Rectangle shape with white fill (#ffffff)

7/ Add two horizontal guides for header alignment (20px and 65px recommended)

For a basic website, you can start with something like this and customize from there.

I added a textual logo, menu bar + page titles as a base for a personal website.

We have a homepage, an about page, a services page and a contact page.

Therefore we have to save 4 varieties of jpegs to add into our prototype.

To save each page, hide the folders of text which you don't want to show in your layers box.

Take a look here;

After saving your jpegs, head over to Marvelapp and create a project. This is a prototyping software. IT allows you to design and create prototypes of your own websites and apps.

Upload them as below;

When you click into each page, you can create anchor areas that dictate where they the area is directed to. There are 4 anchors to create within each image. For example when you click ABOUT on the Home Page it will take you to the ABOUT PAGE.

Interact with my prototype below!