Squarespace: Add a Gallery Page

Squarespace is a web-publishing platform for everyone, and its popularity proves it’s here to stay. In this course, Brian Wood gets you up and running with Squarespace and on the road to building your very own website. Along the way, he will show you how to add the advanced features that attract visitors to modern sites, like image galleries, blogs, maps, and social media integration. Dive in and start concentrating on developing your content, not your code, with Squarespace. Watch more here: Up and Running with Squarespace.

Topics include:

  • What is Squarespace?
  • Changing templates
  • Editing styling
  • Arranging blocks of content
  • Working with text and images
  • Inserting video
  • Adding a blog and an image gallery
  • Creating your own domain

SquarespaceSquarespace is a great platform for people that do not know how to code websites, or they simply are not interested in learning. The user interface is intuitive and user friendly. Many small businesses and entreprenuers don’t have the time to design and develop a website for their business, but they want to have control over their content.

Latest Version

Completely new system featuring a more free form and flexible layout system. Added portfolio templates, responsive designs which work well on mobile devices. It is great that this version added a true developer platform allowing full control of all HTML, CSS and Javascript files. The commerce portion added ShipStation order integration, Xero accounting support, and Stripe payment processing.

Software as a Service (SaaS)

Squarespace is a SaaS-based content management system (CMS) which is composed of a website builder, blogging platform and hosting service. The service allows individuals and businesses to create and maintain websites and blogs. One of the biggest selling points for these companies is the potential to reduce IT support costs by outsourcing hardware and software maintenance and support to the SaaS provider. The Cloud (or SaaS) model has no physical need for indirect distribution since it is not distributed physically and is deployed almost instantaneously.

Some Examples of Drag and Drop

A common example is dragging an icon on a virtual desktop to a special trashcan icon to delete a file.

Further examples include:

  • Dragging a data file onto a program icon or window for viewing or processing. For instance, dropping an icon that represents a text file into a Microsoft Word window signifies “Open this document as a new document in Word”
  • Moving or copying files to a new location/directory/folder,
  • Adding objects to a list of objects to be processed,
  • Rearranging widgets in a graphical user interface to customize their layout,
  • Dragging an attribute onto an object to which the command is to be applied,
    • e.g. dragging a color onto a graphical object to change its color,
  • Dragging a tool to a canvas location to apply the tool at that location,
  • Creating a hyperlink from one location or word to another location or document.
  • Most word processors allow dragging selected text from one point to another.
  • Dragging a series of codeblocks such as in Blender for designing shaders and materials.

Build My Site

Exploring Our Workflow with Gulp.js, Git, and Browserify

Modern front-end development means more than just writing HTML, CSS, and JavaScript. Developing an efficient workflow will help you write better code and test and deploy your web applications easily and efficiently. Staff author Ray Villalobos is here to show you how to generate a workflow that makes it easier to build websites with processed languages like Sass, Compass, and CoffeeScript. He’ll show how to automate development and production versions of your sites, track and share project files with Git and GitHub, and add libraries like jQuery and Mustache.js with Browserify. All of these techniques should easily translate to building your own web projects. Watch more at: Web Project Workflows with Gulp.js, Git, and Browserify.

Topics include:

  • Why workflow management?
  • Processing tasks with gulp-coffee
  • Importing libraries with Browserify
  • Processing Sass and Compass
  • Issuing tasks in sequence
  • Watching changes to files
  • Adding static reloads
  • Setting up environment variables
  • Minifying HTML
  • Compressing images

JavaScript templating

Templating workflowJavaScript templating refers to the client side data binding method implemented with the JavaScript language. This approach became popular thanks to JavaScript’s increased use, its increase in client processing capabilities, and the trend to outsource calculus to the client’s web browser. Popular JavaScript templating libraries are Angular.js, Backbone.js, Ember.js, Handlebars.js, and Mustache.js. A frequent practice is to use double curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON objects.

Mustache (template system)

Mustache is a simple web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Delphi, Erlang, Fantom, Go, Java, JavaScript, Lua, .NET, Objective-C, Pharo, Perl, PHP, Python, Ruby, Scala and XQuery.

Mustache is described as a “logic-less” system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and lambdas.

It is named “Mustache” because of heavy use of curly braces that resemble a mustache. See Mustache syntax.

Mustache is used mainly for mobile and web applications.


The simplest template:

Hello {{name}}

Template with section tag:

some text


CoffeeScript is a programming language that transcompiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python and Haskell to enhance JavaScript’s brevity and readability. Specific additional features include list comprehension and pattern matching. CoffeeScript compiles predictably to JavaScript, and programs can be written with less code, typically 1/3 fewer lines, with no effect on runtime performance. In 2013 it was also ranked 29th among languages, based on number of questions tagged at Stack Overflow.

The language has a relatively large following in the Ruby community. CoffeeScript support is included in Ruby on Rails version 3.1. In 2011, Brendan Eich referenced CoffeeScript as an influence on his thoughts about the future of JavaScript.

Build My Site

Installing and Setting up NetBeans or Another IDE

Ready for your next WordPress challenge? Learn how to build more complex custom themes using the _s (aka Underscores) starter theme. Morten Rand-Hendriksen takes you from basic layout and customization to enabling advanced responsive design and accessibility features. He reinforces the basics lessons with DRY (don’t repeat yourself) development practices and a structured approach that will help you build WordPress themes that meet modern standards. Watch more at: WordPress: Building Themes from Scratch Using Underscores

Topics include:

  • Installing WordPress, Underscores, plugins, and NetBeans
  • Designing for mobile, content, and style
  • Setting up the basic theme
  • Building a custom header
  • Designing responsive, accessible menus
  • Adding a custom search form
  • Using and styling widgets
  • Adjusting the Single Post Template
  • Working with comments, featured images, index templates, and static pages
  • Adding editor styles to match front-end styles


NetBeansNetBeans is an integrated development environment (IDE) for developing primarily with Java, but also with other languages, in particular PHP, C/C++, and HTML5. It is also an application platform framework for Java desktop applications and others.

The NetBeans IDE is written in Java and can run on Windows, OS X, Linux, Solaris and other platforms supporting a compatible JVM.

The NetBeans Platform allows applications to be developed from a set of modular software components called modules. Applications based on the NetBeans Platform (including the NetBeans IDE itself) can be extended by third party developers.

The NetBeans Team actively support the product and seek future suggestions from the wider community. Every release is preceded by a time for Community testing and feedback

NetBeans IDE

NetBeans IDE is an open-source integrated development environment. NetBeans IDE supports development of all Java application types (Java SE (including JavaFX), Java ME, web, EJB and mobile applications) out of the box. Among other features are an Ant-based project system, Maven support, refactorings, version control (supporting CVS, Subversion, Git, Mercurial and Clearcase).

Modularity: All the functions of the IDE are provided by modules. Each module provides a well defined function, such as support for the Java language, editing, or support for the CVS versioning system, and SVN. NetBeans contains all the modules needed for Java development in a single download, allowing the user to start working immediately. Modules also allow NetBeans to be extended. New features, such as support for other programming languages, can be added by installing additional modules. For instance, Sun Studio, Sun Java Studio Enterprise, and Sun Java Studio Creator from Sun Microsystems are all based on the NetBeans IDE.

GUI Design Tool

Formerly known as project Matisse, the GUI design-tool enables developers to prototype and design Swing GUIs by dragging and positioning GUI components.

The GUI builder has built-in support for JSR 295 (Beans Binding technology), but the support for JSR 296 (Swing Application Framework) was removed in 7.1.

NetBeans JavaScript editor

The NetBeans JavaScript editor provides extended support for JavaScript, Ajax, and CSS.

JavaScript editor features comprise syntax highlighting, refactoring, code completion for native objects and functions, generation of JavaScript class skeletons, generation of Ajax callbacks from a template; and automatic browser compatibility checks.

CSS editor features comprise code completion for styles names, quick navigation through the navigator panel, displaying the CSS rule declaration in a List View and file structure in a Tree View, sorting the outline view by name, type or declaration order (List & Tree), creating rule declarations (Tree only), refactoring a part of a rule name (Tree only).

The NetBeans 7.4 and later uses the new [Nashorn] JavaScript engine developed by Oracle.

Build My Site

PHP Tutorial: How to Use PHP in a Web Page

There are many great reasons to learn PHP. You can reduce manual updates to webpages, get user input, and connect to a database of products or other information. But some web designers are intimidated by the theory and jargon. PHP for Web Designers is different. Author David Powers provides a gentle introduction to PHP, through a series of simple exercises that help you develop fully functional dynamic webpages—all powered by PHP. Watch more at: PHP for Web Designers.

Note: This course was recorded with Adobe Dreamweaver, but you can use the code editor of your choice to follow along.

Topics include:

  • How to use PHP in a webpage
  • Storing and displaying text and numbers in variables
  • Using functions
  • Adding comments to your PHP scripts
  • Moving common page elements to include files
  • Displaying different content on a page
  • Working with multiple values in arrays and loops
  • Getting form input sent by the POST method
  • Using PHP sessions to preserve data
  • Storing data in session variables
  • Connecting to and querying a database
  • Handling errors

Basic Language Constructs

phpEach PHP statement is terminated by semicolon (“;”). The PHP markup can display text by using “echo” with variables named by dollar-prefix “$” on case-sensitive names ($xx, $xX, $NewX, etc.). The assignment operator is “=”. The markup can be modularized into functions (or methods) defined with keyword “function” within optional classes named by “class xx”. The control structures include: if, while, for, foreach, & switch. Grouping of text can be specified by curly braces (“{…}”), but some control structures can use colon syntax with end keywords, such as in statement if ($x==0) : echo “zero”; endif; <html>


The PHP processor only parses code within its delimiters. Anything outside its delimiters is sent directly to the output and not parsed by PHP. The most common open/close delimiters are "" so that a section of PHP markup appears within the set of angle-brackets "" (see examples below in boxes). Other delimiters, in the form "", are also always available, so these two forms are the most portable. The first form of delimiters, , in XHTML and other XML documents, creates correctly formed XML processing instructions. Therefore, in either of these two cases, the resulting mixture of PHP and other markup is well-formed, and so probably valid, as XML and XHTML on the server before PHP processing. This may be helpful if the source code documents ever need to be processed in other ways during the life of the software.

Short opening tags (<? or <?=) are also available for use, but are, along with ASP style tags (<% or <%=), less-portable, as they can be disabled in the PHP configuration. For this reason, the use of Short tags and ASP style tags is discouraged. The purpose of these delimiters is to separate PHP code from non-PHP code (notably HTML). Everything outside the delimiters is ignored by the PHP parser and is passed through as output.

The usual "Hello World" code example for PHP is:

echo "Hello World!\n";

The example above outputs the following:

Hello World!

Instead of using <? and the echo statement, an optional "shortcut" is the use of <?= instead of <? which implicitly echoes data. For example, to show the page_title:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 <p>Hello World!</p>

The above example also illustrates that text not contained within enclosing PHP tags will be directly output. So the simplest form of Hello World in PHP is a plain text file containing "Hello World".

Build My Site

Node.js Essential Training: Understanding Module Caching and Scopes

Node.js is a powerful tool for controlling web servers, building applications, and creating event-driven programming. And it brings JavaScript, a language familiar to all web developers—into an environment independent of web browsers. Learn all about Node.js and start creating JavaScript applications in this course.

The first time Node loads a module through require, it caches the result. This can be beneficial, but can create problems if you don’t plan ahead. In this tutorial, look at when caching is helpful and when it’s necessary to work around. Watch more at: Node.js Essential Training.

This tutorial is a single movie from the Node.js Essential Training course presented by lynda.com author Joseph LeBlanc. The complete course is 3 hours and 17 minutes and shows how to start creating entire JavaScript applications with Node.js.

Topics include:

  • Why use Node.js?
  • Installing Node.js
  • Understanding the event loop
  • Initializing Node.js projects
  • Creating modules with getters and setters
  • Starting Express applications
  • Testing your code
  • Working with sessions and databases
  • Building command-line tools
  • Emitting events and attaching listeners
  • Controlling readable streams


node.jsNode.js is a software platform for scalable server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on Mac OS X, Windows and Linux with no changes.

Node.js applications are designed to maximize throughput and efficiency, using non-blocking I/O and asynchronous events. Node.js applications run single-threaded, although Node.js uses multiple threads for file and network events. Node.js is commonly used for real time applications due to its asynchronous nature.

Node.js internally uses the Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript. Node.js contains a built-in asynchronous i/o library for file, socket and HTTP communication. The HTTP and socket support allows Node.js to act as a web server without additional web server software such as Apache.

Node.js is a platform built on Chrome’s JavaScript runtime (Google V8 VM) for easily building fast, scalable network applications. The platform uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time apps that run across distributed devices.


This is an implementation of a “hello world” HTTP server in Node.js:

var http = require('http');
  function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});
    response.end('Hello World\n');
console.log('Server running at http://localhost:8000/');

The following code is a simple TCP server which listens on port 8000 and echoes ‘hello’ upon connection:

var net = require('net');
  function (stream) {
      function () {

Write your application components in JavaScript, Ruby, Groovy or Java. Or mix and match several programming languages in a single application.

Build My Site

GitHub for Web Designers: Version Control Overview

This course shows web designers how GitHub can dramatically improve their workflow and assist in creating and publishing sites. Senior lynda.com author James Williamson shows how to sign up for an account and install GitHub client and Git, the version control system GitHub is based on. He then shows you how to use Github to work with team members and collaborate with contributors to open-source projects. Watch the online video course GitHub for Web Designers

Topics include:

  • Creating an account
  • Installing GitHub
  • Git basics
  • Adding files to Git
  • Checking differences
  • Creating, switching, and updating branches
  • Creating a new GitHub repository
  • Managing files with the GitHub client
  • Working with collaborators

Git (software)

Github version control

A command line session showing repository creation, and addition of a file and remote synchronization

In software development, Git /ɡɪt/ is a distributed revision control and source code management (SCM) system with an emphasis on speed. Git was initially designed and developed by Linus Torvalds for Linux kernel development in 2005.

Github version control in Git

Some data flows and storage levels in the Git revision control system.

Every Git working directory is a full-fledged repository with complete history and full version tracking capabilities, not dependent on network access or a central server.

Git is free software distributed under the terms of the GNU General Public License version 2.

Data structures

Git has two data structures: a mutable index (also called stage or cache) that caches information about the working directory and the next revision to be committed; and an immutable, append-only object database.

The object database contains four types of objects:

  • A blob (binary large object) is the content of a file. Blobs have no file name, time stamps, or other metadata.
  • A tree object is the equivalent of a directory. It contains a list of file names, each with some type bits and the name of a blob or tree object that is that file, symbolic link, or directory’s contents. This object describes a snapshot of the source tree.
  • A commit object links tree objects together into a history. It contains the name of a tree object (of the top-level source directory), a time stamp, a log message, and the names of zero or more parent commit objects.
  • A tag object is a container that contains reference to another object and can hold additional meta-data related to another object. Most commonly, it is used to store a digital signature of a commit object corresponding to a particular release of the data being tracked by Git.

The index serves as connection point between the object database and the working tree.

Git servers typically listen on TCP port 9418.

Build My Site

What Are Adaptive Views? UX Design Tools: Axure

Brian Thurston Bralczyk introduces Axure’s ready-made widgets, functioning form elements, and dynamic content that can be hidden, moved around the page, or even animated. Plus, learn how to generate flows and sitemaps, and create adaptive web designs to view your project on a range of devices. Watch the online video course: UX Design Tools: Axure with Brian Thurston Bralczyk.

Topics include:

  • Using and styling widgets
  • Setting up interactions
  • Creating hide/show options for content
  • Creating an accordion menu
  • Applying web fonts
  • Using flow widgets
  • Creating and placing masters
  • Styling pages
  • Adding form fields with widgets
  • Building a slideshow with dynamic panels
  • Setting up adaptive views

Axure RP

adaptive designAxure RP Pro is a wireframing, rapid prototyping, and specification software tool aimed at web and desktop applications. It offers capabilities typically found in diagramming tools like drag and drop placement, resizing, and formatting of widgets. In addition, it has features for annotating widgets and defining interactions such as linking, conditional linking, simulating tab controls, show/hide element etc. There is support for medium-fidelity simulation of Rich Internet Applications. Axure RP can then generate HTML prototypes and Microsoft Word specifications from the diagrams.

The Axure RP Pro application window is divided into 6 main areas:

  • sitemap – a hierarchical list of pages
  • widgets
  • masters (templates, or reusable collections of widgets)
  • page area – the main design area
  • page notes and interactions
  • widget annotations and interactions

Widgets available include:

  • wireframe: image, text panel, hyperlink, rectangle, table, line (horizontal/vertical), menu (horizontal/vertical), tree
  • form controls: button (various shapes, including tab buttons), text field, text area, drop-down list, list box, checkbox, radio button, image map region
  • placeholder, inline frame, dynamic panel (used to achieve interactivity)

Other widgets can be simulated by combining existing widgets and assigning specific actions to events such as OnClick, OnMouseOver and OnMouseOut. For example, dynamic panels can have a number of states, each state being activated by clicking on an element such as a tab button, list-box item, or action button. For tabs, this allows constructing a tab control.

Adaptive web design

Adaptive web design is basically the same as responsive design and shares many of the same ideals and goals. The main difference however is that the changes are made on the server side rather than the client side.

Adaptive websites are designed to respond and adapt to different screen sizes using responsive techniques, and to adapt to different User requirements based on different device capabilities.

The responsive design aspect of adaptive design involves the implementation of various design factors such as flexible layouts, CSS file alternatives and flexible images, which are activated using media queries.

With adaptive delivery, the most significant difference is that the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected. See: Responsive design vs. adaptive delivery: Which one’s right for you?

Adaptive web design also encompasses a range of other strategies which, when combined with responsive design techniques, enables you to deliver the best possible User experience to the widest possible audience. This means that numerous functionalities and environmental factors can be catered for in the most User friendly way, depending on the particular device being used to access your website.

Build My Site

Up and Running with PhoneGap Build – Building from the Command-line Interface

See how PhoneGap, an open-source framework, and PhoneGap Build, a service in the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. This course explores how to use PhoneGap Build to create app-store-ready applications for iOS, Android, and Windows Phone. Learn how to build an app from GitHub, Dreamweaver, Edge Code, or even a simple ZIP file; configure icons, splash screens, and other preferences; enable access to camera and location sensor data; and deploy and install your device on your smart phone or tablet. Watch the lynda.com online course: Up and Running with PhoneGap Build

Topics include:

  • Creating a PhoneGap Build account
  • Exploring the HTML structure of an app
  • Configuring your mobile device for development
  • Building from Dreamweaver, Edge Code, or the command line
  • Setting up a config.xml file
  • Setting parameters and permissions
  • Deploying on iOS or Android

Application command-line interfaces

Application programs (as opposed to operating systems) may also have command line interfaces.


Screenshot of a sample Bash session. GNOME Terminal 3, Fedora 15

An application program may support none, any, or all of these three major types of command line interface mechanisms:

  1. Parameters: Most operating systems support a means to pass additional information to a program when it is launched. When a program is launched from an OS command-line shell, additional text provided along with the program name is passed to the launched program.
  2. Interactive command-line sessions: After launch, a program may provide an operator with an independent means to enter commands in the form of text.
  3. OS inter-process communication: Most operating systems support means of inter-process communication (for example; standard streams or named pipes). Command lines from client processes may be redirected to a CLI program by one of these methods.

CLI software
Some applications support only a CLI, presenting a CLI prompt to the user and acting upon command-lines as they are entered. Some examples of CLI-only applications are:

  • Diskpart
  • Ed
  • Edlin
  • Fdisk
  • Ping

Hybrid software

Some computer programs support both a CLI and a GUI. In some cases, a GUI is simply a wrapper around a separate CLI executable file. In other cases, a program may provide a CLI as an optional alternative to its GUI. Both interfaces do not always offer similar functionality. For example, MATLAB, a numerical analysis computer program, provides no GUI for some calculations, but the CLI can handle any calculation MATLAB supports.

Here’s an excellent post on command-line tooling:

Command Line Tools for Frontend Developers

More resources:

Build My Site

Ruby on Rails 4: Using Validation Methods

Join Kevin Skoglund as he shows how to create full-featured, object-oriented web applications with the latest version of the popular, open-source Ruby on Rails framework. This course explores each part of the framework, best practices, and real-world development techniques. Kevin teaches how to design an application; route browser requests to return dynamic page content; structure and interact with databases using object-oriented programming; create, update, and delete records; and implement user authentication. Watch the online video course: Ruby on Rails 4 Essential Training

Ruby on Rails

RubyRuby on Rails, often simply Rails, is an open source web application framework which runs via the Ruby programming language. It is a full-stack framework: it allows creating pages and applications that gather information from the web server, talk to or query the database, and render templates out of the box. As a result, Rails features a routing system that is independent of the web server.

Ruby on Rails emphasizes the use of well-known software engineering patterns and principles, such as active record pattern, convention over configuration (CoC), don’t repeat yourself (DRY), and model–view–controller (MVC).

Framework Structure

Ruby on Rails is separated into various packages, namely ActiveRecord (an object-relational mapping system for database access), ActiveResource (provides web services), ActionPack, ActiveSupport and ActionMailer. Prior to version 2.0, Ruby on Rails also included the Action Web Service package that is now replaced by Active Resource. Apart from standard packages, developers can make plugins to extend existing packages. Rails 3.2 deprecates the old plugins Rails 2-3-stable style in which plugins are to be placed under vendor/plugins, in favor of packaged gems.

Some basic Ruby code:

# Everything, including a literal, is an object, so this works:
-199.abs                                                 # => 199
"ice is nice".length                                     # => 11
"ruby is cool.".index("u")                               # => 1
"Nice Day Isn't It?".downcase.split("").uniq.sort.join   # => " '?acdeinsty"


puts "Give me a number"
number = gets.chomp
puts number.to_i
output_number = number.to_i + 1
puts output_number.to_s + ' is a bigger number.'


The following code defines a class named Person. In addition to initialize, the usual constructor to create new objects, it has two methods: one to override the <=> comparison operator (so Array#sort can sort by age) and the other to override the to_s method (so Kernel#puts can format its output). Here, attr_reader is an example of metaprogramming in Ruby: attr_accessor defines getter and setter methods of instance variables, but attr_reader only getter methods. The last evaluated statement in a method is its return value, allowing the omission of an explicit return statement.

class Person
  attr_reader :name, :age
  def initialize(name, age)
    @name, @age = name, age
  def <=>(person) # the comparison operator for sorting
    age <=> person.age
  def to_s
    "#{name} (#{age})"
group = [
  Person.new("Bob", 33),
  Person.new("Chris", 16),
  Person.new("Ash", 23)
puts group.sort.reverse

The preceding code prints three names in reverse age order:

Bob (33)
Ash (23)
Chris (16)

Person is a constant and is a reference to a Class object.

Build My Site

UX Design Tools: Grouping and Reusing Content Inside Smart Objects

The UX Design Tools series makes the connection between early UX creative processes, like wireframing and prototyping, with the tools and techniques necessary to create a successful product design. This installment delves into the power of Adobe Photoshop. lynda.com author Justin Putney shows you how to create and edit live shapes, a key component in wireframes; store and display different application states with layer comps; export images and multilayer comps for sharing with clients and developers; and much more. Watch the online video course: UX Design Tools: Photoshop.

Topics include:

  • Setting up files
  • Building live shapes with the Rectangle tool
  • Using character and paragraph styles
  • Organizing content into layers
  • Building layer comps
  • Creating and reapplying custom shapes
  • Using Smart Objects to group and store elements
  • Saving and using layer effects
  • Exporting artwork

Smart Objects

UXSmart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

User Experience

User experience (UX) involves a person’s behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found.


User experience design most frequently defines a sequence of interactions between a user (individual person) and a system, virtual or physical, designed to meet or support user needs and goals, primarily, while also satisfying systems requirements and organizational objectives.

Typical outputs include:

  • Site Audit (usability study of existing assets)
  • Flows and Navigation Maps
  • User stories or Scenarios
  • User segmentations and Persona (Fictitious users to act out the scenarios)
  • Site Maps and Content Inventory
  • Wireframes (screen blueprints or storyboards)
  • Prototypes (For interactive or in-the-mind simulation)
  • Written specifications (describing the behavior or design)
  • Graphic mockups (Precise visual of the expected end result)

See More Resources….

Experimenting with linked Smart Objects
Free Photoshop CC – Download Adobe Photoshop free trial
Create Smart Objects | CC, CS6

Build My Site