Daily Doodles

Now that it is officially Summer 2020, and I’ve been out of my house for only 3 total days since March 8, 2020 – and going back to work full time doesn’t look like it’s going to happen any time soon – I have decided to begin a new daily task. I still intend on keeping my other daily tasks of remodeling my garden, and learning JavaScript, but I needed something a little more free-form and creative. I’ve decided to begin doing Daily Doodles.

My Daily Doodles will be a chance to practice my sketching skills, exercise and expand my use of Adobe Creative Suite apps, and de-stress a little. I don’t have any plan other than to sit down and create a little something everyday. I am really excited to get this going.

Here is my first Daily Doodle for June 23, 2020:

I used both Illustrator and Photoshop on this one. I appreciate Photoshop a little better for sketching and blending purposes. I also feel like I have more options for media and media mixing than in Illustrator. This is something I will explore further. I would love to be able to blend colors and layers like you can in Photoshop, in Illustrator. But I guess if Photoshop gives you this option, then what else do you need?

I love drawing.

DDSN 360: Glossary 8

Glossary 8

Digitization is certainly challenging the old ways of doing things, whether that’s in publishing or politics. But it’s not the end. In many ways, it is just the beginning.

— Heather Brooke

User Interface Design – Fall 2019

Glossary 8

  • JPG: (or JPEG) stands for Joint Photographic Experts Group. It is a compressed digital image format established by the aforementioned group.
  • GIF: stands for Graphics Interchange Format, and it was created by developer Steve Wilhite in 1987 at CompuServ. This format allows for image size reduction without the loss of quality. In 2019 “GIF” is a household term, and shared on the Web billions of times a day. There has been a long standing debate, even since its creation, regarding the pronunciation of the acronym, between using a soft or hard “g” sound.
  • PNG: stands for Portable Network Graphics. This is an image file type that supports lossless data compression.
  • Lossy Compression: This is also known as irreversible compression and it is a type of data encoding that uses approximation and partial data discarding to make files more transferable.
  • Progressive Image: A progressive image is a file that loads in progressive waves so it can load faster, rather than all at once, which can take longer.
  • Dithering: Dithering is using a limited color palette on an image, but which uses more universal colors that more widely used screens can interpret.
  • 8-bit color: 8-bit color graphics are a way that image data is stored. Each pixel is stored as one 8-bit byte.
  • Hexadecimal: Hexadecimal is a numeral system made up of 16 symbols. The symbols are the decimal symbols plus six extra symbols.
  • Transparency Matte: A channel that determines the transparency of an image, or section of an image.
  • Image Map: An image map allows you, in web coding, to identify different parts of an image as different links.

DDSN 360: Glossary 7

Glossary 7

It is easier to feel than to realize, or in any way explain, Yosemite grandeur. The magnitudes of the rocks and trees and streams are so delicately harmonized, they are mostly hidden.

— John Muir

User Interface Design – Fall 2019

Glossary 7

  • Iterative: As in an iterative process, or iteration, is a method of repeating steps until an outcome is met. An algorithm is a formula which repeats to find various outcomes.
  • Paper Prototypes: Paper prototypes are hand sketched designs, usually used in the user-centered stages of design exploration. Making paper prototypes is the time and cost-effective way of demonstrating design ideas to shareholders before going too far in the process, and wasting time on a design that ultimately the shareholder may not approve of.
  • Low-Fidelity Prototypes: This is a version of a design that is still in a sketch mode of quality and clarity. The design has not been quite refined yet, but the basic ideas are there.
  • High-Fidelity Prototypes: This is the more defined and interactive version of a user interface design. This version is usually incorporated into some kind of software to demonstrate to a shareholder how to interact with it. More colors and shading choices are involved.
  • Heuristic: Derived from the Greek word for “to discover”, heuristic technique is the method for making something easy and quick to learn and understand. This is another way of describing the learnability of an interface.
  • Rollovers: Rollovers are images or icons that change when your cursor “rolls” over them. For example a link in a paragraph may change color when your cursor is hovering over it to indicate that it is interactable.
  • Front-end development: This is the development side of Web or User Interface Design that the user will see, and ultimately interact with. This is the visually pleasing side of Web Design. This side handles the color, typography and layout design choices, for example.
  • Back-end development: Back-end development is the mechanics of the site or User Interface. It is the code and security, the content management system and database. The back-end developer works in tandem with the front-end developer to create a functioning final product to the user.
  • Below the Fold: “Below the Fold” refers to the part of the website that you must scroll down to see. This comes from the printed news paper reference for what is printed below the actual physical fold of the paper. This part of the paper, or the website takes effort for the user to see it, so it is not as valued as real estate as “Above the Fold” real estate.
  • Favicon: A favicon is the tiny icon that shows up in your browser tab, bookmarks list, url or shortcuts for websites. It helps to promote your brand. A user will respond to a visual image quicker than a long url of text if seen in a list with other urls. It helps your site to stand out and have an identity.

Final Project: Wireframe Sketches

UI Design Assignment 7a

Initial Sketches: Concept A

Initial Sketches: Concept B

Refined Sketches: Concept A; Desktop

Refined Sketches: Concept A; Mobile

Refined Sketches: Concept B; Desktop

Refined Sketches: Concept B; Mobile

DDSN 360: Critical Analysis 8

Critical Analysis 8

Do not wait; the time will never be ‘just right.’ Start where you stand, and work with whatever tools you may have at your command, and better tools will be found as you go along.

George Herbert

User Interface Design – Fall 2019

Critical Analysis 8

Discuss how each of the 5 Design Decision Styles were used or referenced in the IDEO Shopping Cart Project story? Which of the 5 styles played the most important role in the design process in the video, and why?

Read this short article by UX guru Jared Spool:

5 Design Decision Styles

Then watch this 8-minute video:

IDEO Shopping Cart Project video

The team at IDEO made use of almost each of the 5 Design Decision Styles, save for the first – the Unintended Design Style. (1) Unintended: They definitely took into consideration the users perspectives, did research, and worked with other designers. The second Design Decision Style – (2) Self – they made use of as contributors to the brainstorming. Each obviously had a history working with a shopping cart, and shared that with their fellow designers and in the brainstorming process. The third Design Decision Style – (3) Genius – is probably the bulk of this teams process. Each designer took deeply into consideration the other team members feedback and experience. The next style – (4) Activity Focused – was another large part of the teams process. They asked all kinds of questions and proposed various scenarios about what the users would do with the cart. Which naturally flowed into the fifth and final Design Decision Style – (5) User Focused. This style encompasses all of the styles mentioned prior, but also includes user research. This is the “whole hog” style of design. And one that the IDEO Shopping Cart team definitely chose to follow.

Jared M. Spool concludes from his research, that each of these design styles are important. They represent a different tool in a designers toolbox and each one can best fit various projects:

“Since the teams are working with different styles all the time, does it matter? Our research says it does. The teams that produced the best experiences knew these styles well and how to quickly switch between them. They knew when they needed to go whole hog and pull out all the stops for a User-Focused style project, while also knowing when it was important to bang out a quick design, knowing the results would essentially be unintended. Those teams had a rich toolbox of techniques and a solid understanding on how and when to use them.” – Jared M. Spool, 5 Design Decision Styles

The primary Design Decision Style that the IDEO Shopping Cart Project team followed was the fifth and most involved – User Focused. They brainstormed and shared their own user history and perspectives. They went out and gathered real-world user research data. They asked questions about what activities users would perform with the cart. And they remained open to all the ideas their fellow designers offered.

It’s impressive that even though they followed the more involved and rigorous Design Decision Style, they still got their work done and felt very pleased with the result, despite the limited timeline they had.

%d bloggers like this: