WK2: Resources for UI/UX Designers + HTML5 & CSS3 Revision

Articles, Blogs, Tutorials and Where to Learn

• SmashingMagazine.com – An online magazine for professional Web designers and developers, with a focus on useful techniques, best practices and valuable resources.  They also have an excellent collection of books.
• UXPIN – Paid prototyping tool but they also release many, many ebooks on UI / UX design.
• Codrops Tutorials and Codrops Playground – really cool UX/UI interactions, sometimes have tutorials. Great for inspiration.
• A List Apart – explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
• Web Designer Wall – a wall of design ideas, web trends, and tutorials.
• HTML5 Rocks – A resource for developers looking to put HTML5 to use today, including information on specific features and when to use them in your apps.
• 24 Ways – 24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

Prototyping / Mockups

When it comes to prototyping tools, there isn’t really an ‘industry standard’, as such. Tools come and go. What’s important is that you can learn to pick up and experiment with a range of tools and find one that best suits your workflow. Good prototyping tools might be considered those that allow you to work the quickest and turn ideas into testable prototypes rapidly so you can iterate with haste. You should also consider how your prototyping tools can be used to communicate and present your ideas to colleagues, clients and testers. Thus, at some stage you’ll want to move away from paper and make something that is clean and professional.

Here are a few prototyping tools that more-or-less have stood the test of time, inVision & sketch being notably popular.

• proto.io – (free trial) – Interactive, high-fidelity prototyping tool.
• inVision – (free for one project) – High-fidelity prototyping tool.
• sketch – (free trial) – Design and high-fidelity prototyping tool.
• Balsamic – (free trial) – An older, but still effective tool for wireframing and developing a flow for the website
• Azure – (free trial) – High-fidelity prototyping tool.
• Protoshare – (free trial) – Wireframing and Prototyping tool.

Training and Reference

• TeamTreeHouse – A paid option, but potentially the best of the list, contains a large library of online tutorials.
• Codecademy – Free online tutorials that will take you through each step of the way.
• WebPlatform.org – an open community of developers building resources for a better web, regardless of brand, browser or platform.
• W3Schools.org – web development tutorials, references and examples.
• http://learn.shayhowe.com/html-css/ – a higher level overview of the most important fundamentals of HTML & CSS that may be easier to digest.
• Mozilla Developer Network – Web standards documentation.

As a QUT student, you also have access to a number of valuable online resources through the library databases portal. Two particular ones of note are:

• Lynda.com – An online subscription library that teaches the latest software tools and skills through high-quality instructional videos taught by recognised industry experts. Log in with your QUT email address (for the username) and password.
• Safari Books Online – A collection of e-books covering information technology topics.

Code Editors

Prototypes might start with paper, but will eventually make it to the point of needing to be prototyped in a language that more closely resembles the final product. Consider these types of prototypes as being very high-fidelity and technically accurate. Often roles in UI/UX design will have skillsets and requirements that bleed into those of front-end developers. These technical skills include being able to create your concept in HTML, CSS and Javascript, of which almost always the code is written by hand in a simple text editor. Yes, you can even use notepad.

For the most part, code editors are all the same – they facilitate the ability to write and execute code. Below is a basic list of some of the more popular text editors. They provide great features that allow you to write your code faster than simple Notepad can.

• Komodo – (Mac, Windows, Linux)
• Brackets – (Mac, Windows) (free)
• Atom – (Mac, Windows, Linux) (free)
• Sublime – (Mac, Windows, Linux)

Unit Tutorial Outline*

* Subject to Change

HTML

The primary language of the web: HTML. Its original purpose was just to share information and reports between scholars. Today, the web takes the same simple language of language and adds other elements such as CSS and JS to make the web more interactive and a more effective interface for information and transactional exchanges.

It’s simple to get started. A basic HTML page can look like the code below. All you need is a DOCTYPE, and a pair of HTML tags. Inside your HTML tags you’ll need head tags (for where you will include most of your meta and external sources) and body tags (where you will include the body of your content for the page). Throw all that in a text file with a .html extension and you’re done.

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>Heading</h1>
        <p>Paragraph</p>
    </body>
</html>

That’s the basis of HTML. Lots and lots of pairs of tags. Sometimes you will have elements that only require a single tag, however, the majority of times they will come in pairs. Their content is nested inside the tags, for example, the content of the primary heading above (h1) is Heading.

Tags can also have attributes which, depending on the tags you apply them to, will have various outcomes. For example, for links (a tags) an href attribute will define where the link will go to. For images (img tags – an instance of a tag that does not require a closing tag), the src attribute defines where the source of the image comes from.

<a href="https://www.google.com">Google</a>
<img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="Cat">

Two very important attributes regularly used throughout all tags are the id and class attributes. These are used to identify individual, and classes of elements, often for styling, but also for browser functionality. The id tag also has an important rule, in that it may not be repeated. It represents a unique identifier for that one particular element.

<p id="my-very-first-paragraph">I am a paragraph with an id. My id should never be used again on another tag as its used to identify me and me alone.</p>
<p class="paragraph">I am a paragraph with a class.</p>

We also have HTML tags that do not necessarily represent anything on their own but are used to encase and group other HTML into logical sections, ideally for semantic reasoning, but also often for stylistic reasoning.

Two examples are div tags, and span tags. These tags serve no purpose other than to group other HTML tags into sections and also add the added benefit that they can be styled. The primary difference between the two tags is that div tags style as block elements, meaning they will take up as much of their parents’ width as possible. This means that they will force the content surrounding them above or below them. Span tags, however, are inline elements by default, meaning they will wrap around an element but only take as much space as needed. These properties are of course style properties, and therefore can be changed if needed.

<div>
    <p>Paragraph <span class="style-me">One</span></p>
    <p>Paragraph <span class="style-me">Two</span></p>
</div>

CSS

HTML on its own is just markup for content. Without CSS we have no style. There are roughly six or so categories of CSS rules that can give you the power to take your boring HTML and make it pretty.

And that’s just some of them. It can be pretty daunting at first, but as with everything, CSS becomes much simpler the more you know. It’s always ideal to try and get an understanding of what tools are out there that you don’t know exist so that when you might need them you know where to look to learn. We highly recommend you read over all the different ways CSS can style your page so you can get a broad understanding of the tools you have available to you. An excellent place to do this is w3schools where the material is generally fairly easy to consume, but also fairly well detailed.

Continue with Important but Often Misunderstood CSS Concepts

Exercises

Practice Targeting HTML Elements with CSS

Test your CSS selector skills with CSS Dinner

Practice Styling HTML with CSS

HTML + CSS Revision Exercise Files View the Complete Styled Page