Website assignment

the process of making the website in photoshop

Firstly, I decided to place a sky background to make the design look more like its full of life and energy

Then, navigation buttons were placed on the top of the page so that users can easily navigate through the website. 
The fonts which are used  are called century gothic. 

Here i placed the title of the page

After that, the contents were added into the website

Lastly, the footer was placed at the bottom of the page

Home 

Education background and skills

Portfolio

Contact me

the process of making the website in fireworks

this is where I slice my navigation buttons using the slice tool

the process of making the website in dreamweaver

This is where I link my navigation buttons to one another

later, I went to page properties and to the appearance(HTML) to select the backgorund colour of my website

The final results 

mobile apps icons

week 5

the sketching process of the mobile apps icons

chose to make the design simple so that users can easily understand the icons and used vibrant colours to attract the users attention

icons are clear and simple so that it can be more user friendly 

Class exercise

Week 7

• What is the interface design principles?

The structure principle

The interface design should be well -organized and functional based on clear models that are visible to users. The design should be methodically displayed like putting things that are related together and separating things that are not related.

The simplicity principle

The simple design makes the common tasks easy for users and communication also becomes clearer. 

The visibility principle

The options and materials for a specific task should be clearly visible to users without any interruption of unnecessary information.

The feedback principle
Any actions, changes of state and errors that are related should be informed to users by giving precise and clear language accustomed to users.

The tolerance principle
The design should be adaptable thus decreasing the cost of faults and misuse. It also avoids any  errors by allowing mixed inputs and sequences and by interpreting all reasonable actions.

The reuse principle
Internal and external components in the design should be reused to to maintain stability with purpose instead of arbitrary consistency. This lessens the need for users to retrace and remember.

• What is the elements of the interface design?

Windows

Windows is a section on the screen where information are displayed and its contents being showed independently from the rest of the screen. It is easy to use a window because it is adjustable. For example, it can be shown and hidden by clicking on an icon, and it can be shifted to any section by dragging it. Furthermore, it can be placed in front or behind another window and its size can be changed. This makes it convenient in a multitasking environment.

Menus

Menus help users to preform commands by choosing from a list of choices. A mouse can be used to choose options and a keyboard may be used. Menus are able to display what commands are available within the software.   

Icons

Icon is a small picture that stand for objects such as a file, program, web page, or command. Icons are handy because they are a fast way to execute commands, open documents and run programs. Other than that, it provides convenience when searching for an object in a browser list.

Controls

Controls are software components that a computer user interacts with through direct manipulation to read or change about an application. Every widget provides help with a specific user- computer interaction. 

Tabs

Tabs are typically a rectangular small box which has a text label with a view pane. Group of  tabs helps users to change quickly between different widgets when the view pane is activated. This provides many web pages open at once in one window and rapidly navigate between them by clicking on the tabs that are related to the pages. Most applications have tabs in the settings panes . 

Class exercise

Review on the existing website on Mc Donald. List out the pro & cons of the interface design layout, the navigation buttons and is the information clear enough for the user to understand to navigate the page?

Pros

The interface design layout looks more interesting and outstanding compared to other websites. The navigation buttons are convenient and is clearly displayed by users.

Cons

The interface design layout seems quite complicated and confusing. This makes it less user friendly. 

Review

The navigation buttons has been neatly and methodically arranged for the convenience of the users. It directly shows the users to the page that they want. Overall, the information is clear and understandable for users to navigate through the page.

Introduction about Digital Interface Design

Week 1

• What is Interface Design?

The definition of user interface design is by which the process of developing a procedure for two or more modules which are able to apply to hardware, software or the interface between a user and a machine.

• What is Navigation Button?

A navigation button is a button which is used to navigate through a webpage. In other words, it serves as a control point to link the user to sections on a Web site.

• What is Mobile Apps? Why we need it?

Mobile apps are software programs which can be directly downloaded and accessed by users using their mobile device. Examples of devices are like a tablet, music player, smartphones and other mobile devices.  The reason why we need it is because most users now browse the Internet using mobile phones or tablets. The other main reason is that it is a well-made app which can provide advanced user experience.

Navigation button

Week 6

Research on Navigation Button.

"How" they display the navigation button?

• The navigation buttons should appear along the left-side of pages. Other than that, display of the navigation button is placing it horizontally along the top of the pages.

"Why" they need the navigation button? 

• The navigation button is to help the users find their way around or navigate through a site to find what they want.

"When" they need navigation button?

•  The navigation button is needed when users use it for directly linking to a page or website rather than typing it in the address bar.

2.  Can navigation button to be complicated or simple design?

The design of navigation buttons should be simple because simplicity is a good thing. Navigation is one of the most important aspects of a web design but it doesn't mean it needs to be complicated or overly designed. Simplicity helps to better website readability and  make navigation faster and easier. It can be confusing for users when the navigation button are too complicated. Furthermore, it is also more user friendly and convenient.

Visual usability

Week 3

1. What is the visibility space in the interface  

The meaning of the visibility space in the interface is to guide users through an interface and a series of tasks. Visibility is the clarity of the vision for a user to see the state of the interface and other possible actions. Furthermore, it is to tell users what interactions which are available and that can be used. 

2. Percentage of the usability interface

Many change requests on the usability interface has slowed down development time due to user interface and user experience. Approximately half of the developers believe that 25 to 75 percent of their work receive change requests that effect the user interface. At least 40 percent of developers said that 25 to 50 percent of additional development effort to tackle change requests. Other than that, a third believe it needs 50 to 100 percent more more attempt for development projects. Lastly, almost 5 percent said change requests more than double the original development effort needed.

Moreover, according to a survey 70 percent users supports the use of bitmap screens and 16 percent supported character terminals. Another 13 percent supported both. Furthermore, 73 percent of the applications used multiple windows in their interface and 57 percent used only overlapping windows. Another 20 percent used only tiled windows  and 22 percent used both kinds. 84 percent of the applications used menus that were popular even with applications not using a mouse.

3. How many users prefer the navigation icons on the right top/left top/center/bottom?

According to a survey, approximately 2.55% users prefer the navigation icons on the right top while there is around 2.04% of users who prefer using the left bottom  navigation icons. Other than that, 0.43 percent of users prefer it in the center of the display screen and 0.16 percent of the users prefer the navigation buttons at the bottom of the display screen.

Definition of icons, pictorial and signage

Week 2

Icons
The definition of icons is that its a symbol on a graphical user interface(GUI), small picture and representative of a software tool, function or a data file. It is shown on a computer screen used to help users to  easily interact and navigate a computer system or mobile device. This word is from the Greek word eikon, which means likeness, image and portrait.

 Icons come in a standard size about a thumbnail for computer systems and mobile devices. Other than that, it is often scalable because it is displayed in different positions in the software. Due to the flexibility of the icons, it is now mainly used as a user interaction for electronic media.

For example:

Pictorial
The definition of pictorial is having to use pictures. For example, books and newspapers which has pictures. It also means to show visual images. Another definition of this word is that it is illustrated by pictures.

Furthermore, pictorial can be associated to the art of painting and drawing pictures. The origin of the pictorial is from the late latin pictorius, from Latin pictor painter. It was first known to be used from the 1646.

Signage
The definition of signage means using signs or symbols to convey a message and communicate to a specific group. This is usually used for  marketing. The word signage was popularized between 1975 to 1980. The signs come in many different form and size which is based on location and purpose. For example, it is used on banners, billboards and murals. Signs which are more new uses the digital or electronic displays.

Moreover, the four main  functions of signs is to show information  about services and facilities like maps and directories. It is also for displaying the location of services and facilities like signposts or directional arrows. Signs are used for the identification of services and facilities like restroom signs.Lastly, it is used to give warning signs or safety instruction like the traffic signs and exit signs.


For example:


Signs for information:

Signs for direction:



Signs for identification:



Signs for safety and regulatory: