Articles

Articles

The following is a list of compiled articles of interest.

  • This is a recommended list of books to read for new team managers within a software development environment. This is about the process of managing time, people, and other resources, rather than writing the software yourself. Read more
  • Style Guide based on GitHub’s internal style guide for their web resources. Scaffolding Layout Type Buttons Forms Navigation Alerts Blankslate Avatars States Tooltips Utilities Code Guidelines Colors Read more
  • Light comes from the sky Black and white first Double your whitespace Learn the methods of overlaying text on images Make text pop and un-pop Only use good fonts Steal like an artist Read more
  • A working list of resources used by myself in the installation and development of Node.js applications. Read more
  • HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Read more
  • A template for Object-Oriented Javascript web pages. Read more
  • 3.0 Using Button and MovieClip objects 3.1 Scope – this & parent Although a bit nebulous for some just starting with ActionScript, this can be your friend. It is essentially shorthand for “whichever object or scope you’re working with now.” Scope is the realm or space within which an object lives. For example, think of a movie ... Read more
  • 2.0 Learning the Flash player object model 2.1 Introducing object-oriented programming Much discussion has been made over the pros and cons of procedural versus object-oriented programming. To touch briefly on this, here is a little background concerning the evolution of ActionScript. ActionScript started as a sequential programming language, meaning that scripting was limited to a linear sequence of ... Read more
  • ActionScript Fundamentals This is section 1 of the ActionScript training notes I wrote while Multimedia Coordinator for Box Hill Institute. 1.0 Introduction ActionScript is a developer-level scripting language that lets you add interactivity to your animations by tying a graphic element (e.g. a button) to a specific action (e.g. opening up a specific webpage). ActionScript  and JavaScript have a ... Read more
  • Functional requirements are generally easy to specify, analyse, implement, and verify, compared to quality attributes. There is a well-defined process for taking these requirements through to a finished software product. Quality attributes, however, have been neglected in many standard software engineering processes. This is primarily because they are hard to quantify, hard to keep track ... Read more

 

 

Style Guide

  • Best practices and guidelines for writing HTML and CSS with approachable formatting, syntax, and more. Read more
  • There are a handful of utilities in Primer for quick behaviors, floats, colors, alignment, and more. Read more
  • Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute. Read more
  • States, or state indicators, inform users of the current status of a particular item. Included common states are Open, Closed, or Merged, each requiring it’s own modifier class. Read more
  • Avatars are images that users can set as their profile picture. On GitHub, they’re always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder. Read more
  • Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn’t there. Be sure to provide an action to add content as well. Read more
  • Primer comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently. Read more
  • Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time. Read more
  • Style individual form controls and utilize common layouts. Read more
  • Buttons are used for actions, like in forms, while textual hyperlinks are used fordestinations, or moving from one page to another. Read more

 

 

User Experience

  • Here are the resources I have found absolutely the most useful while designing for clients. Listed in descending order:   1. Dribbble This invite-only “show and tell for designers” site has bar-none the highest quality of UI work online. You can find great examples of almost anything here. Here are a few more people for you to follow as ... Read more
  • Some fonts are good. Use them. Note: There are no strategies or things to study in this section. I’m just going to list some nice free fonts for you to go download and use. Sites with a very distinct personality can use very distinct fonts. But for most UI design, you just want something clean and simple. ... Read more
  • Styling text to look beautiful and appropriate is often a matter of styling it in contrasting ways— for instance, larger but lighter. In my opinion, one of the hardest parts of creating a beautiful UI is styling text— and it’s certainly not for unfamiliarity with the options. If you’ve made it through grade school, you’ve probably ... Read more
  • There are only a few ways of reliably and beautifully overlaying text on images. Here are five— and a bonus method. If you want to be a good UI designer, you’ll have to learn how to put text over images in an appealing way. This is something that every good UI designer does well and something ... Read more
  • To make UI that looks designed, add a lot of breathing room. In Rule 2, I said that B&WF forces designers to think about spacing and layout before considering color, and how that’s a good thing. Well, it’s time we talk about spacing and layout. If you’ve coded HTML from scratch, you’re probably familiar with the way ... Read more
  • Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements. UX designers are really into designing “mobile-first” these days. That means you think about how pages and interactions work on a phone beforeimagining them on your zillion-pixel Retina monitor. That sort of ... Read more
  • Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at. This is perhaps the most important non-obvious thing to learn about UI design: light comes from the sky. Light comes from the sky so frequently and consistently that for it to come from below actually looks freaky.   WoooOOOooo   When light comes from ... Read more
  • Light comes from the sky Black and white first Double your whitespace Learn the methods of overlaying text on images Make text pop and un-pop Only use good fonts Steal like an artist Read more