:::: MENU ::::

UX and UI

Task: Find 10 articles about the difference of UX and UI and summarize it













The main idea


- The over all experience of the user on the website.(since we are talking about UX and UI in terms of web development)


- The combination of the look and feel of the design and how the design works.

HCI A1: Needfinding

Step 1:

-Read three design briefs

-Apply one of the three design briefs to anything in your daily life.

Step 2:

Pick an activity; Make an interview & observation plan

1. Observations & interviews through:

  • email
  • phone
  • skype
  • diary studies

2. List types of people you might interview & situations to come out w/ insights.

Different types of users:

  • everyday users
  • marginalized users
  • extreme users

Step 3:

Choose a design brief

  • what do you want to do w/ this info that you get
  • pick a ‘main’ brief that your work address

Step 4:

Select 3 individuals & observe

- Select three people who are not similar to yourself to observe

- Observe

  • Successes
  • Breakdowns
  • Latent opportunities

occured when

  • used
  • not used
  • could be used

Not need to be:

  • representative of the “general public”

Step 5:

Observe and interview

- tell the participants to perform the task as realistically as possibility

- Take valid notes  use digital photographs sketches to documents activities

- Dont use video camera

- Get only whats important


  • when
  • where
  • how

caption each photo

Step 6:

Identify user needs

Get at least 15 insights

-each idea should be able to become a basis for a design project. Needs a way to be able

What’s this for?

A UX Agency Perspective

by Mike Davison, Community TA & UX Project Manager


Needfinding is probably the most important and UX Designer’s arsenal.

Needfinding is a very powerful way to generate ideas.



  • An explanation of the design brief you chose and how it relates to the activity you observed.
  • Thorough descriptions of your observations for each of the three people observed.
  • Photos or sketches of a design breakdown or opportunity for each of the three people observed. Remember: Each photo must have a caption that fully conveys the breakdown or opportunity.
  • A list of insightful user needs inspired by what you observed (at least 15). If you brainstormed with others, please include their names in your submission to recognize their contribution.

Thank you, Harvard.

Screenshot 2014-07-10 11.00.25


YES! :)

I’m out of words. When I saw the certificate, I was just speechless. :)


After cs50.

What’s next?

Finishing cs50 is such a great achieve for me as I feel like it is a big step for being a developer/programmer and many people doesn’t even make it through the course. I remember reading once in a blog that it is the real deal. I agreed with it when I’m still just solving greedy.c. Its got hard as problems is what I always read in blogs. And by experience, cs50 is no joke. I didn’t think I’d make it. It was kind of a make or break for me as I am just trying to figure out if I can do web development or not. A little background check to understand what I’m saying? I was an art student before I decided I want to learn how to code.

CS50 is a good start for learning a programming language and “getting your hands dirty” as they would say. But if I wouldn’t make it from there it will only mean one thing to me, that I’m not fit for it. But I did and I’m grateful about it. Honestly, after I got my final project grade I was excited of what will happen next. I mean, after cs50 I became excited to learn more.

But after reading some few blogs, tips, suggestions of what to take next after theHarvard’s Introduction to Computer Science, what’s next? I’m posting this up because I’m really hoping someone can point me in the right direction. I wanted cs75 but I think its not offered so I’m really looking forward for the same thing as the content of it. CS75 is all about building dynamic websites. I think I really need this one or something like it. But if you have any suggestions, I’m open to it.

Right now I’m enrolled to courses about database, terminal,and git for review, revising my codes from cs50 psets just so I would keep coding, installing stuff, OOP, OOD, finishing my cs50 blog and other small stuff but still with my computer upgraded and more time in my hands i feel like I’m underload. And as you can see, this blog site is also still a work in progress because I’m still learning about WordPress. So if you have anything in mind, you can put it in the comments below. I would really appreciate it.

Thanks! :)

Protected: Love, Rachelle.

This content is password protected. To view it please enter your password below:

I took cs50


Yep! I did it! Finally I can say I took cs50. :)

I still can’t believe that I made it through because I have not programmed in my life before cs50. I didn’t know what I was doing in PSet0 but hey, you’ll always get something positive from hardwork. Thats foh sure! BTW, PSet0-PSet7 are complete pain in the ass for me because of the computer that I am using. Thats why I’d like to thank Teamviewer, Giolliano, Reddit, Facebook cs50 group, dropbox, Robert Bowden, the assembled computer in a cupboard and many more for making it possible for me to pass cs50.

I did pset8 in Boracay Philippines and spent sleepless nights for final project while on vacation. Totally worth it! :)

I’m going to blog about my experience from pset0-pset8 and final project soon. So, watch out! :) I’m really Excited blogging about them because I’m hoping somebody would learn from them or inspire them. I’m soo excited. :)




Protected: Itsa Mario

This content is password protected. To view it please enter your password below:

Pset 0

If you don’t have any idea how programming works, scratch is a good place to start. Don’t worry, five years old kids use this.

Well, I spent more than 20 hours on  it. But that was me. I don’t know what I am doing at first. I had 5 tries before i finally knew what i wanted to do. I wanted to do something more but I was restricted with time limit as I am doing it for cs50.

I didn’t really know what I was doing on the first try. Just trying to figure out the loops, conditions, etc. They’re like puzzle pieces for me. The loops/conditions/statements should  have to be implemented on the right timing and the right places.

For the no coding experience like me, scratch is like something thats from heavens above. No, I’m not exaggerating. At least for me, as without technical background or anything like that. I really see it as the best way to start my way to programming. Plus it’s fun.

Lets divide them into 4 parts so I can explain them better. The planning,  sprites,  scripts and the final product.


I was just starting to know about programming, so what I did is something that I can easily implement. I am a 90′s kid so I picked something out of what i played in the family computer. I tried the hard ones. I ended up not finishing the projects. So I went easy on myself and went with something I can finish.


All the objects that you can see in a scratch project is called sprite. You can make your own, upload it, or you can use the sprites provided by scratch. There’s a lot if you only look into it. You can edit them or resize them. You can change their colors as well. Just name your sprites relative to how it looks or how it functions as and simple as possible. You’ll thank yourself when you’re doing the scripts. Make the sizes of the sprites base on how many sprites you wanted to put in the stage at one point.

What I did at first was, i tried to use the sprites that’s in scratch library. I didn’t edit them, i just put them in the stage. They are so big though that I can only fit in a lot less than what I was planning. I wanna get rid of them as quick as possible so I just abandoned the project and then just tried again.

I know now that i have to edit the sprites first. And so i tried to learn how to resize the sprites, change the colors, how to make it look like the cat  is walking and stuff like that. Until I realized that i have to set up the sprites first on the stage before I put in the scripts.


After setting up the sprites in the stage, i know now when i want the ball to move, which direction I wanted it to go and what happens when it encounters other sprites and when it hits the edge of the stage. Although this part is time consuming, its easy because i planned my project properly and setting up the sprites first helped a lot because it became easier for me to see and identify what each of the sprite does.

You can also put in sound effects or make the sprites say something through texts or actual sounds.

Final Product

This is the link to my scratch project.

My project isn’t the best. It has bugs that I don’t know how to fix. I tried to fix it but its ruining my project more. So I let it be. Although I’m worried that It might not pass because of the bugs that I don’t know how to fix yet at that time. I shared it and I still submitted it. I’m not that confident about the product of my problem set 0 but it is better than what I am expecting.

It was graded after 2 weeks with 1.0. I can’t explain how happy I was. Although I didn’t post it on cs50 group on Facebook because I am too shy, I showed it to Julian and he was happy with it and showed it to his friend. It feels so good to know that he is proud of what I did.

Well, its just the start of cs50. And I’m about to write actual codes soon after it. I’m excited and nervous at the same time. :D


Btw, this could be a helpful video link of scratch tutorials.



Introduction to PHP

What is PHP in programming?

In the beginning, PHP simply means “Personal Home Page”. Now it stands for “Hypertext Processor”. It can be used as a general scripting language,  but typically made as a server-side scripting language used to create dynamic web pages.

You can see on the articles that PHP code can be embedded within HTML. But my partner usually put HTML code within PHP file so I  kind of adapted it.

Why PHP?

For me, the very relative answer is to connect the website to the database. Well I had to learn it because I have to print out the data from a certain database to a web page.
It is faster to learn PHP if you have even a little bit of knowledge in  C, Java and Perl languages as it is a combination of syntax of them. As of the moment, Harvard is providing a free course on Programming in C called CS50. Which is very helpful because they provide very reliable sources although the problem sets are pretty hard to accomplish. Advice? Just try to never give up. Because you will appreciate its profit as many languages are based in C.

What can Server scripts do:

  • Dynamically edit, change or add any content to a Web page
  • Respond to user queries or data submitted from HTML forms
  • Access any data or databases and return the result to a browser
  • Customize a Web page to make it more useful for individual users
  • Provide security since your server code cannot be viewed from a browser







You may also want to read:

What you need to learn PHP scripting language.







All about PHP


What is PHP?

PHP meant “Personal Home Page” when it was just beginning. Now it  stands for “Hypertext Processor”, a server-side scripting language that fits with HTML. This simply mean that HTML code can be inserted in a PHP file.

Why PHP?

For me, the very relative answer is to connect the design to the database.

What you would need:

Server or wampserver.

Text editor.




Also, most of the tutorials that i encountered was using Laravel. A fresh and handy framework for PHP. Sadly, I am using Windows7. Yes, I don’t have the machine yet but it doesn’t stop me from learning how to code.

Also, there are lots of tutorials on line for those who are really willing.

Here are some helpful links:

See also:

Learn PHP Fundamentals From Scratch

PHP for Absolute Beginners

Easy PHPeasy 2 – Objects, Frameworks & Apps

Learn to code while building a real project

See also:

Beginners PHP

Here are some of the things that I learned. I will tackle them one at a time. I will make a list for now as It was pretty time consuming blogging about them while learning, plus, side projects, plus learning how to program in c.

Here are the links of the codes and github. I’ll update the article link when i managed to do one.

Introduction to PHP
-No github

What is PHP
-No github

Setting up a server.
-No github but will make an article on how to set up a server.

First PHP file
-github to be follow

-github to be followed

-github to be followed

Commenting code

If statement


Switch statement


Arithmetic operations


Comparison operatiors


Logical operators


Triple equals


Switch statement


Basic Arrays




Explode (String to array)


Implode (Array to string)


Outputting to a page


Heredoc Syntax


The github link for the PHP stuff that I learned. Most of them might seem senseless in a browser but it is actually about the code. I hope you can learn from them as well even if my purpose is just to compile and be able to explain them (I learn better this way). The articles that I will make are from a beginners point-of-view. In others words, from me. So it will relate to the ones who are just starting to learn PHP.