uxblogNCI

My learning in UX & HTML


Leave a comment

My CV – CSS

JUST DOWNLOAD PICS

CSS determines how the elements of the page (HTML) appear so control the presentation of HTML.

CSS3 is the latest version of CSS.

Here goes my CV – the result based on he code:

20170328_205550

The <head> part:

20170328_205640

CV at a glance:

20170328_205606

Implementing all right received:

20170328_205629

 

 

 

Advertisements


Leave a comment

Balsamiq Mockups – Wireframe App

During the class, We 4 classmates agreed to design an App for Diabetics, an app designed for Mobile and Tablets.

This App will be able to monitor what they eat, how much they sleep, set up alarms for insulin and in general find suggestions for healthy meals.

As something more advanced within the App, there are a bottom where you can browser through to find closest pharmacies and Hospitals and a small Emergency button to make an emergency call either to a family, friend or the Hospital near by.

Here go a few Mock-ups we as a team did in class:

 

 

 


Leave a comment

Nielsen’s Design and Usability Principles

  1. Consistency and standards

Airbnb homepage follows platform conventions. It is the common format in any website – the typical menu bar located at the top down of the screen, which make it be familiar and easily identify for hosts and guests but Airbnb has its specific read and easy layout to be recognized by itself.

3

      2. Recognition rather than recall

Outlook Mail login page makes a common mistake, as the placeholder text (“Password”) is used instead of a Label. it would be quicker for the user if the label and he hint are placed outside the form field and are always visible to the user.

1

      3. Error prevention

We are asked for confirmation before sending the email without a subject.

I personally appreciate that because I forget it most of the time and it is not good in the work environment!

4.PNG

      4. Visibility of system status

Immediately confirmation and an email afterwards to make sure your registration has been succeed.

5.PNG

     5. Aesthetic and minimalist design

Simple at minimalist at glance!

2

 

 

 

 

 

 

 


Leave a comment

My HTML Journey

HTML (HyperText Markup Language), is a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on web pages.

STEPS

  • I downloaded Sublime, tool where we will be typing the cod, saved “Sub” folder.
  • I created another folder called “html” where I will be able to see the code on real virtual life in the google browser, by clicking the site or dragging the html document to google browser.

Here goes a few exercise from the SECOND VIMEO VIDEO uploaded by Robert;

I have learnt how to use:

  • Lists – order <ol> & unorder <ul>
  • Nesting
  • Images as Links
  • Commenting
  • Audio
  • Video

1) Lists & Nesting

ALL_lists

2) TEXT as a Link

text to link.jpg

3) IMAGE into a LINK

ALL image list.jpg

4) LINK which takes my to my website by clicking the image

ALL image list WEB.jpg

5) Commenting the code – explain part of the code for yourself later on or because of working with other people in a project.

whatever we write between <!– & –> will not show up on Google browser.

 

6) 3wc, tool used to check the code. There were a few errors until getting the checking completed:

 

 

7) VIDEO

 


Leave a comment

HTML – Beginner Exercises

HTML (HyperText Markup Language), is a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on web pages.

STEPS

  • I downloaded Sublime, tool where we will be typing the cod, saved “Sub” folder.
  • I created another folder called “html” where I will be able to see the code on real virtual life in the google browser, by clicking the site or dragging the html document to google browser.

Here goes a few exercise from the FIRST VIMEO VIDEO uploaded by Robert;

1) “Visual_PICTURE”

I have learnt how to use:

  • Line brakes
  • link to websites
  • post pictures – size
  • WhiteSpace

test

testHTML

2) Playing with the layout

test1test1HTML