Webpage Layout Sketches

Here is my first webpage idea.

The heading/title will be made out of buttons, when clicked they will be linked to either the next page ----->
or to the same page itself.

Below the heading will be some information about what binary code is and lastly, at the bottom there is a hyperlink which will take you to the 'binary translator' page.

My second webpage idea..

I've kept the idea of the buttons as the title the same. Below the title are headings that will be hyper-linked to different conversions, e.g, Binary to Decimal, binary to text..

When the user inserts their text or binary and click the 'convert' button a new webpage opens with an alert box giving the conversion.

On this page, the heading/title will be made from radio buttons, where when clicked will take you to the previous page or to the same page. Here you are able to click on two radio buttons at a time, once clicked you can convert text or code between the two. With the last box you can then click on the text box that you'd like to copy. The user will be restricted to only ticking one box at a time.

This page is simlar to the previous page however this has hyperlinks with radio buttons that show the different type of conversions that you can make. Once the the radio button is clicked you will be navigated to the previous page however the 'text to binary' 'binary to text' will be changed to whatever the user has chosen.

My third webpage idea..

Unlike the previous two, here I will create a homepage header in a 'digital' theme. Below the header there will be a table with text as links. These links will take the user to the different pages of the webpage. Lastly there will be information about what binary code is and also what the webpage is about.

Here the user is asked to register their detials, once they submit their details they will be navigated to a new page and welcomed to the site with an alert box..

After registering you will be navigate to this page. The user will then be able to click on any buttons a-z. Once they buttons are clicked, an alert box will appear giving you the binary code of that letter. Using the hyperlinks you will then be able to go onto the other pages.

The 4 sketches above are fairly similar however they will convert different things. The user has to insert letters, numbers or punctuation then hit the convert button to convert their desired input to binary.

Using the radio buttons at the bottom of the page they can go back and forth to whichever page they desire.

This is the last page which is a text box that converts your characters into ASCCII art. Below this is an embedded webpage of ASCCI table.

Computer Sketches

Module: Authorship & Interaction
Ba (Hons) Graphic Communication Design
University of Westminster

Bhavika Gajipra