Skip to main content

Images & UX Design & Content

Plan Today​

Today, I will demonstrate some of the technical requirements for building out your 02.03 site. Specifically, the tasks for adding your

  1. resumé, an
  2. obfuscated email contact link, some
  3. absolute links, and how to create
  4. 3rd level structure

Rest of the Week​

We will cover the rest of the requirements the rest of the week. Those requirements will be

  1. client side scripting
  2. server-side scripting
  3. fonts
  4. custom content
  5. validation

Demonstration​

I will continue to demonstrate these items in the context of the scrolling Nav theme we used in the last session. You may decide to use this theme, or you may take what you learn and apply it to a theme more to your liking.

Online Resources​

Font Awesome Icons​

Font Awesome icons are found in many templates out on the web. If you want to change them, or add them, here is a link for more information: Quick Start with Font Awesome Icons

You don't have to pay or join. They will try to hook you in. Go here and download the free version for the web.

How to work with them after you download the free version:

Font Awesome Host Yourself - Webfonts

Bootstrap Icons​

Bootstrap Icons

Bootstrap Templates​

Other Themes Sites that seem to be legit to me...​

Other Frameworks (Many Templates will be based on one of these frameworks)​

Images for UX​

Using images and multimedia is a global concern and applies to any form of digital delivery. So you can also checkout the Presentation Multi-multi Media Session which will be our second to last class this session..

For large companies and organizations, images, design, and accessibility issues are a huge part of the design process. It takes a lot of time, money, and energy to envision and create sophisticated imagery, especially while meeting accessibility guidelines. So we are not going to go very deep or wide today. Most of this information will serve only as reference material, but we will take a closer look at some of these items.

What is UX Design?​

Some explanations:​

  • Fifteen user experience experts weigh in

    • Here are some of the key phrases in the titles of the 15 user experience experts thoughts:

      Process of making web sites useful for users | an approach that takes the user into account | solving problems | empathetic design | make navigation easy | pleasant | fulfillment of a promise | generating positive emotions | keeps the customer in mind | so much more than just designing for a screen | awareness of every touchpoint | process of deeply understanding the user's needs and objectives | delighting users | anticipating needs

  • Adobe.com: What does a UX Designer Actually do?

    • Product Research
    • Creating Personas and Scenarios
    • Structure Information Architecture (IA)
    • Create Wire frames
    • Prototyping
    • Product Testing

Learning UX​

Basic overview:​

Going Deep:​

  • SILS MSIS
    • 418 Human Factors in System Design
    • 572 Web Development (1.5)
    • 573 Mobile Web Development (1.5)
    • 672 Web Development II
    • 718 User Interface Design
    • 719 Usability Evaluation and Testing
    • 818 Seminar in Human-Computer Interaction

UX Tools​

List of Most Popular Tools

UX and Accessibility on a budget​

Use a CSS, HTML, JS framework:

Case Study: Trustnet Intranet​

Source NN/g Newsletter: Trustnet: How Welcome Trust Developed an Award-Winning Intranet

Trustnet’s simple but attractive design was the product of a user-centered design process.

The team comprises a product manager, an editor, a UX designer, a UI designer, a front-end developer, and a back-end developer, and is based within Wellcome Trust’s digital department.

Items from UX job Listings​

Better get the MSIS for this one:

  • meet a product team’s user experience needs, including:
    • Visual Design
    • Interaction Design
    • Design System Contributions
    • Information Architecture
    • Writing
    • Quantitative and Qualitative Research and Analysis
    • Prototyping.
    • creative thinker and problem-solver
    • dedicated to putting the user first by learning through rapid experiments and frequent customer feedback loops.
  • Bachelor's degree in design, Human Computer Interaction, technology or related field or equivalent experience.
  • Solid understanding of front end development (HTML/CSS)
  • Advanced in common creative tools such as:
    • Sketch
    • InVision
    • Adobe Creative Cloud
  • Competent in one or more of the following areas:
    • User Research
    • Product Design
    • UI Development
  • Familiarity with working in an agile software development environment working on/with cross-functional teams to deliver a product user experience
  • Demonstrated ability to deliver and iterate on valuable user experiences
  • Able to effectively communicate design thinking and product strategy with the team and stakeholders that deliver upon business outcomes
  • Can confidently balance many projects at one time while delivering valuable user experiences
  • Responsive design and development
  • Frontend Development
  • Accessibility WCAG 2.1
  • Collaborate with the user interface community to generate innovative designs. Ensure consistency and support accessibility/universal design principles within and across products.
  • Apply your experience with user interface component libraries, consistency standards, and responsive user interfaces to this role in collaboration with your team.
  • Involve product management and development in the design process to ensure requirements are met and solutions can be implemented.
  • Ideate, test, and iterate using low- and/or high-fidelity prototypes.
  • Generate and maintain user interface specification documents.
  • Gather user data via methods such as surveys, usability tests, customer site visits, focus groups, task analysis and participatory design, with support from colleagues in UX, product management, development, and sales.
  • Analyze quantitative and qualitative data and present findings and recommendations to the product team.
  • Organize and facilitate workshops in our design studio or in virtual format, using design thinking methods to get the whole team on the same page about requirements, users, user journey, pain points and expectations.
  • Excellent interpersonal skills.
  • Exceptional written and verbal communication skills.
  • Solid articulation and presentation skills.
  • Superior organizational and time management skills.
  • Pro-active and self-motivated.
  • Ability to work across multiple business units.