User Experience Design – The importance of wireframe

by Esmund Koh.

Do you remember what websites used to look like? I do, plain boring tables and a link dump for your navigation needs.


Src :

As technology evolves, complex design became possible and the industry looked towards providing pleasing user interfaces to attract customers. Nowadays when we surf the web, we are greeted by a visually pleasing layout with organised and intuitive navigation. Moving beyond simply providing attractive visual design, there is a greater emphasis in user interaction and experience. The term user experience design (UXD) is used to define this design field.

So, how does designer build great user experience designs?

One critical step of the design process is the wireframe.

Wireframe is a pivotal component of the design process. It serves as a visual framework that depicts the general layout of a webpage allowing designers to brainstorm and experiment concepts for the page.



An example of wireframe of Facebook’s timeline page.

Wireframe can range from being a rough sketch or low fidelity to realistic or high fidelity


Src :

As shown above, low fidelity wireframes are more abstract and contain only the basic layout of elements in a page. This is preferred during brain storming or experimenting before a design is finalised. High fidelity wireframes, on the other hand, is a representative of the actual webpage with detailed content and styling.

This begs the question, how much detail should be included?

It depends.

When designing a webpage, it is often the case where requirement or plans change over time- resulting in frequent edits to the web design. Therefore, a rule of thumb by designers is to build a concrete concept and slowly build from it. However keep in mind that there is no “right” way as different teams and project may affect the design process depending on the complexity or time constrains.


Src :

A guideline to follow when balancing fidelity and concept.

A website or application usually contents multiple pages or screen layout. Multiple wireframes are often placed together to represent how the website will flow.


Src :

This example shows how different wireframes are integrated to form a cohesive navigation experience for the final product.

Wireframes can also be used in usability testing before the concept is developed further. This can save the agony; not to mention time and resources, of developing a potentially bad designed wireframe into a full-fledged website before realising.

As mentioned in this week’s lecture on usability testing, there are certain experimental biases skew the test results.


Src :

Some of the biases we must take note of when making decision, including deciding the choices of changes to design based on user feedback.

As the saying goes “Well begun is half done”, building a great user experience begins with a solid design.

Reference :


AY1516 Semester 1

This blog serves as a writing platform for current CS2024 students (if you’ve been unceremoniously kicked off, I apologize). I’ll be reading through anything posted up here and keeping track of interactions; online interaction on this blog will contribute to your Attendance and Participation grade. Welcome to the new semester.

Importance of Fold(ing)

Importance of Fold(ing)

I should have brought this up a lot sooner, but since you’ve still got a while left before you’re done with your projects, here it goes:

When designing your pages, Laubheimer ( points out that it’s always important to be mindful of what goes into the “fold” of your web page. That is to say, it’s important to know what occupies your users’ screens when they first load your web page.

Laubheimer points out several resources that you can draw on when explaining how important keeping content in the fold is (tl;dr: Important, but not that important), and what should and should not go into the fold. If in doubt, always return to NN’s 10 Usability Heuristics that were brought up in the Dark Design Patterns e-learning session.


Course Content Page

I’ve put up a new “Course Content” page that will carry each week’s readings, in lieu of posting on NTU Learn (for accessibility reasons). You are, in the spirit of how this course is run, encouraged to propose course material that you think would add value to the course. Material that is unmarked (i.e. there are no extraneous comments added on other than reference information) should be considered course material and potential exam fodder. Content that I specifically mark as non-examinable should be considered as such.

RE: Pitch submission next week

RE: Pitch submission next week

Hi guys,

You have your pitch submission coming up next week. I know I said in lecture that you’d have to submit the pitches on Monday, but I realised that I’ve stated in the syllabus that the submission should be due at the end of the week.

As such, you guys should be submitting a digital document that contains your pitch at the end of week 4 (i.e. 6th February 11:59pm) to me via email (check syllabus for it). Submissions that don’t reach me by then are considered non-submissions.

Requirements for this assignment are laid out in Appendix C of the syllabus (as are the requirements for all other assessed components in this course.)

Any questions regarding the pitch submission should be directed to me (Zed).

Also, do remember to update your groups (here: and pick your post topics (here: