Sketches and Wireframes

This is where all of the innovating begins! Sketching and requirement gathering might be slow and dull for some people, but I believe this phase is one of the most significant parts of the UX process, due to its playful nature with new, cool, and experimental ideas. Through this, we as UX designers can share and mold out our ideas into actual shapes. The following are examples of some quick sketches, notes, and requirement gathering I have done for my portfolio website.

Design and Prototypes

One of my favorite parts in the UX process is when we get to actually start building things. This is where our ideas which were gathered and sketched out during the previous phase become more solid and full of colors. While I am capable of using different tools when designing my websites (Photoshop/ Illustrator/ Fireworks), I most frequently use Photoshop. Furthermore, I love to use Axure when prototyping, while also using Microsoft Visio or Illustrator to wireframe pages. The following are screenshots of my mockups for this website.

Develop the Website

I cannot lie. Though most designers feel that this is a pain to go through, believe it or not I enjoy coding! My pursuance for web design started with my passion in design and my interest in computer science. The languages that I am familiar with are HTML5, CSS3, JavaScript, and a little bit of PHP. I would not say that I am a “pro” programmer who knows the ins and outs, but I have studied independently to get me through advanced knowledge of JavaScript. I am also fluent in the JQuery library and am currently taking up a JavaScript framework called Angular JS.

Test and Launch

This is probably the most exciting part of building a web app. When working on a website, I like to create a virtual host locally so I can view my website on my personal computer. The tool that I use is called XAMPP. While developing the website, I cross browser test in Internet Explorer (9 - 11), Firefox, and Chrome to make sure there are no severe errors going on with the website. After completing coding, I deploy to a hidden folder to test out my new page on a mobile and tablet device to make sure that it is close to being perfect. After launch, I quickly gather feedback on usability and make changes.