Wisq - Wangi Stock Quote

About Wisq

Wisq was designed and hand-coded by Isaac Wang as part of the CSC 3221 Netcentric Computing class at Seattle Pacific University, Spring Quarter 2014. This page describes some of the thought and deliberations behind the design and implementation of Wisq.

UI Design

Features of Wisq's user interface were inspired by the current push toward minimalistic, clutter-free designs. Current UI designs, such as ones by Microsoft and Google, were largely influential on the layout and appearance of Wisq.

For instance, the fonts used are modern sans serif fonts, provided by Google Web Fonts. The menu items are similar to the Windows 8 interface, utilizing the flat design that is so prominent today.

Originally, Wisq featured a design that used a lot of gradients and shading. This, unfortunately, gave the site a look that resembled most sites from the mid-2000s. However, through the progression of the site's design, the gradient look was dropped, forming the basis for the current site's look.

Implementation

Wisq is written in HTML, CSS, and PHP. Coding was done using the Adobe Brackets IDE, which allowed for easy editing, due to the live preview feature of Brackets. The graphics on the site were created using Adobe Photoshop.

An interesting fact is that, originally, I learned HTML in the style of frames and tables. Apparently, such designs are no longer acceptable in the web community. So, over the course of a weekend, I set out to learn CSS, as was expected of me for the purposes of this class. This was a large endeavor, but I managed to get the hang of things, and I am pleased with the result.

Originally, I prototyped a mockup of the site design using Photoshop. This allowed me to get a grasp on how things would align up in the final product. As it can sometimes be hard to position elements exactly using CSS, the mockup helped me greatly by helping me figure out where things would go without writing any code.

Ugh, Tables!

I ended up having a fearsome bout with tables. To implement the scrolling tables (with fixed header) feature, it required that, essentially, the columns would need a fixed width. I was not able to come up with a dynamic solution; however, the end result looks rather pleasing, and is done with CSS only. Still, the fact that tables like to resize themselves when you set certain width values is annoying. I ended up rewriting the code several times, as my table layouts would end up breaking the rest of the site. I pulled a couple of all-nighters over the course of the project...

Humor Me This