Session 3

Information Architecture: Information architecture (IA) is the practice of deciding how to arrange the parts of something to be understandable (11).  In UI, information architecture is “the art and science of organizing and labeling websites, intranets, online communities and software to support usability and findability” (12).  A good IA helps people to understand their surroundings and easily find what they’re looking for.

Wireframe: Wireframe is the skeletal framework of a website.  The wireframe shows the page layout or arrangement of the website’s content (1).  In fact, a wireframe is a visual representation of a user interface, stripped of any visual design (2). For its usability and attraction, UX designers represent wireframe as a “hierarchy of items on a screen and communicate what the items on that page should be based on user needs.” (2)  Early in website creation, designers create basic wireframes utilizing codes to lay down tables, pictures, and texts.  Nowadays, wireframes are usually preset, and there are softwares for people to design wireframes faster and easier.  WordPress.com are pre-designed wireframes.

Site Map: A site map is a list of pages of a web site accessible to users.  Simply say, it’s a web page that lists the pages on a website.  It’s typically organized in hierarchical fashion (3).  Bellows is a simple example of the site map which URL is http://accounting-taxsolution.com.  This is operated by Sitemap Generator https://www.xml-sitemaps.com/

site map

Web Page Header: A website header is the area that runs across the top of the page and usually appears on every page of the website.  The header is the perfect place to convey what your site is about and what your business does (6).   The components in the page header differ from site to site, but usually included some or all the elements as follows:

  • A logo
  • A photo
  • Site, person, or company name
  • Navigation menu
  • Contact info such as a phone number or email
  • Slogan or quote (7)

Web Page Footer: A web page footer contains information listed at the bottom of the page. The footer is also treated as its own section of the web page, separate from the header, content and sidebars. The footer is coded in either CSS (Cascading Style Sheets) or HTML (Hypertext Markup Language) (8).  The CSS is preferred because it is applied for the whole website; therefore, the footer will appear on all pages of the website.

Webfonts: Computers come with standard fonts locally installed such as Arial, Times New Roman, etc.  They are called “system fonts” because they are computer “system fonts.”   These fonts work well in all created web pages; therefore, they are also called “web safe” fonts (4).  However, when a designer wants to create a design with a custom or lesser-known font that’s not locally installed, e.g. a font that is available only on Google Fonts, there’s a chance it won’t display!  In this case, designers utilize CSS to “tell a browser how to display all the visual elements like spacing, colors, textures, and shapes” of that font (4).  The web fonts would be “downloaded by the user’s browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site’s load time.” (5)

Creative Commons: Creative Commons is the global community that breaks down the walls that keep people from sharing their knowledge.  This community works based on Creative Commons (CC) licenses.   A CC license is one of several public copyright licenses that enable the free distribution of an otherwise copyrighted work. A CC license is used when an author wants to give people the right to share, use, and build upon a work that he/she has created (17).

Skeuomorphism is the design concept of making items represented resemble their real-world counterparts (9).  For example, the email icon on many smartphones is represented with the image of an envelope.  The email icon of Android Samsung phones is even more fanciful with an envelope and a red wax seal (10).  In UI and Web design, skeuomorphism attempts to create 3-D effects on a 2-D (flat) surface (9).  By doing this, Apple has announced it would scrap the “traditional” look of its mobile apps which mimicked real world objects (10).

Web-Safe Color:  Web Safe Color is any color that is listed in the color palette that consists of “216 colors that display solid, non-dithered, and consistent on any computer monitor, or web browser (13).  Web Safe Color is written in html codes as ‘color hex,’ i.e. a set of 6 numbers, or letters, or a combination between letters and numbers, each set represents a specific color.  For example, 000000 represents ‘black’ color and FFFFFF represents ‘white’ color (14).

UI Design Patterns:  User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced UI designer (15).  An example of User Interface Design pattern is the design pattern for navigation tabs that designers apply as follows:

– Use when there are between 2 – 9 sections of content that need a flat navigation mode.

– Use when section names are relatively short

– Use when you want the navigation to fill the entire width of a page

– Use when you want to provide a list of the highest available sections/subsections of the website

– Do not use when wanting to show content-specific data. For instance for showing latest articles

– Do not use when there is no need to single-out the currently selected option

– Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern (16).

References:

  1. Website Wireframe – https://en.wikipedia.org/wiki/Website_wireframe
  2. Wireframe – The Beginner’s Guide – http://theuxreview.co.uk/wireframes-beginners-guide/
  3. Site map – https://en.wikipedia.org/wiki/Site_map
  4. What Are Web Fonts and Why Are They Important? – https://www.upwork.com/hiring/design/what-are-web-fonts-and-why-are-they-important/
  5. Easy To Use, All in One, CRM. – https://www.cssfontstack.com/Web-Fonts

6. How To Design A Website Header (And What Should Go In It) – http://www.bourncreative.com/how-to-design-a-website-header/

  1. Building Responsive Web Page Headers – http://www.htmlgoodies.com/beyond/css/css-ref/building-responsive-web-page-headers.html
  2. What is a Web Page Footer? – http://smallbusiness.chron.com/footer-26625.html

9. skeuomorphism – http://whatis.techtarget.com/definition/skeuomorphism

  1. What is skeuomorphism? – http://www.bbc.com/news/magazine-22840833

11. What is Information Architecture? – http://www.iainstitute.org/what-is-ia

  1. Information architecture – https://en.wikipedia.org/wiki/Information_architecture

13. Consistent Colors For Your Site – All You Need To Know About Web Safe Colors – http://www.htmlgoodies.com/tutorials/web_graphics/consistent-colors-for-your-site-all-you-need-to-know-about-web-safe-colors.html

  1. Websafe colors – https://html-color-codes.info/web-safe-colors/
  2. User Interface Design Patterns – http://ui-patterns.com/patterns
  3. Navigation Tabs Design Pattern – http://ui-patterns.com/patterns/NavigationTabs
  4. Creative Commons license – https://en.wikipedia.org/wiki/Creative_Commons_license
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s