Week #7 – Aesthetics

Wow! Last week of first class already. That went fast.  One down, 11 classes to go.

This week we learned about color and aesthetics presentation (color modes, basic color theory and the remaining fundamental design principles) and their affect on usability. We learned a bunch like:

  • print (CMYK) vs screen (RGB) color
  • color hue and intensity characteristics of color
  • the color wheel (primary, secondary, tertiary [learned how to spell that], complementary, and analogous colors)
  • layers, texture, and contrast for visual interest

I was a bit overwhelmed watching a Linda.com class on color on all of the above. The instructor illustrates art for children’s books and taught color in an art class. Talk about intimidating.  There was SO much content to learn and while I’m crafty, I’m not sure I’m artsy.  However, the more I got to playing with color in this week’s assignment (a persona), the more I realized this can be fun. And the principals do help you make choices that work well together.

The color lessons was then combined with the typeset, grid, and other things we’ve learned in this class in our assignment to make a persona.  This is something I have done before, however not using all these elements.  I put last week’s typeset to work, applying the fonts I chose to the end product as well as some of the color and grid layout principals to get it looking nice.  Here is what I came up with. What do you think? I’m pretty proud.

persona

Well, this is the last post for this first class. See ya next class!

-SARA

Advertisements

Week #6 Typography

Wow! Week 6 already? I can’t believe it. Only one more week to go in my first class of this program. Amazing!

This week we studied typography.  As defined in the Merriam Webster Dictionary.

  1. letterpress printing

  2. the style, arrangement, or appearance of typeset matter

We learned that a typeface is like the album of a font family and the font is the song on the album with a typeface style (i.e., weight, slant, width, height, orientation). There are several styles such as serif, sans-serif, decorative, etc.  We learned about how they sit on a line (X height, ascender, descender) and take up space (tracking/kerning) etc.

Our assignment this week was to make a Type System which is a set of fonts paired together to make a visually appealing, easy to read, stylish end product.  Here is what I came up with.

fontfam

my font family

fontfam2

Styles of each font

I used a new tool called Google Fonts. What a cool, free tool. There are hundreds of fonts and you can filter to find just the right one and even preview it before downloading and installing it to your own computer. Here is a screenshot. Pretty cool tool!

googlefonts

Well that’s all for this week. Stay tuned for the last week of this first class.

-SARA

 

Week #5 – Organization, Layout, and Composition

This week we were asked to take a productivity style assessment. Here is mine:

You are an ARRANGER.

Arrangers prefer supportive, expressive, and emotional thinking. They encourage teamwork to maximize output, and they make decisions intuitively as events unfold. They block off time to complete work but excel at partnering with others to get it done. They communicate effectively, which helps them build and lead project teams. They tend to maintain visual lists, often using color.

Productivity tools that appeal to Arrangers include:

  • dictation apps like Dragon Naturally Speaking and Dragon Dictation or the web-based program Copytalk
  • collaboration tools like GoToMeeting, WebEx, SharePlus Office Mobile Client, and Join.me
  • aesthetically pleasing office supplies—for example, notebooks with unlined pages and pens in a variety of ink colors

What do you think? Sound like me? I think so. I did an EQ assessment and that did say my number one working style was collaborative and that I most enjoy working with others. I also really really like purple pens that and cool notebooks but also tend to trust my intuition. So, ya, I think its right.

This week we had an assignment to critique 4 sites/objects for effective design and layout–2 of each.  Here is an example of some of that.

HTML Cleaner (bottom half of home page)

html cleaner2

This site is another bad example of both design and layout.  The first screen shot is the top of the page and is worse than the bottom half of the page.  Perhaps they started making incremental improvements.  This site doesn’t take advantage of the Golden Ratio but does show some use of grids.  There is little point, line and plane composition to make the page more interesting. It too is very text heavy.  The second screenshot does have some boxes that use white and vary that from the gray page background (also in grids), but they it is not very asymmetrical or interesting. There is little scale variation or typography to make the site’s content or feature hierarchy stand out.  Leaving a lot of learning and reading required by the user. Not intuitive or a good user interface. 

apple

This site is perhaps the best example of design and layout of all these.  It uses many of the good elements to make the site simple, intuitive, and elegantly pleasing to both the eye and purpose of the user.  There is ample white space, giving the eye a break as well as making content stand out.  The use of color and motion do that as well. Pages that advertise their new products all have beautiful imagery and some media that really showcase the experience of that product.  And scale of the larger images, the sections of other content (visual hierarchy), and use of asymmetrical layout all make the most important areas stand out to be read first then the other sections.  The company uses hierarchy to make it look nice but also focus us on what they want us to see first — new iPad Pro, in this case.  This page has some good figure/ground going on.  They even use a lot of black and white on this particular page, which gives a good visually impactful “punch”.  Some of the other pages on the site have more grid use, especially more columns where there is more content to deliver. Apple is very good at designing for the user’s experience and this website is a good example of how they do that well. 

Still having fun. Next week is typography. I’m not sure I like all this artsy design stuff. It takes a lot of attention to detail that I just don’t care for. I would rather have an overall vision and let an artist do the design part.  However, now I know more principals and terminology to help better articulate the designs in my visions.  And I got a good feel for asymmetrical and how to use these principals for a better vision. So, I guess overall I am getting it and it is helping. Yay! Until next week.

– SARA

Week #4 – Workflows

This week’s assignment was fairly familiar and somewhat easy since we do workflows at work a lot.  I was glad that I was familiar with annotating a simple workflow and including system details, user information, and other details helpful designing, improving, and automating the process.

We were given details about the process that title inspectors do to collect documents and determine “free and clear” title status which is passed on to the insurance underwriter to create insurance policies for those free and clear.  Here is what I came up with.

Image

the workflow

Image (2)

a screen

A shout out to my business process analysts who helped me know everything about workflows and annotations. Thanks PAs.

There is a lot of reading — a lot of interesting information about motivations about how users think, principals, and design to psychology information.  All really interesting, for us nerdy techy people.

There are some good presentation videos by our instructors that provide other information. This week we learned about bad workflows and design the flow of a task and considerations if users are familiar already (need less instruction) etc.

Here are a my new UXD Pinterest pins for this week:

https://www.pinterest.com/pin/23432860541334450/ 14 facts.. This one is a great reminder. We should read it before every new project/assignment. Yes, it’s true—Users are not always in the mood to read. I had to force myself to read them all just now. 😉

https://www.pinterest.com/pin/172262754466909246/  10 steps to personas. This one will be useful when we start getting more into these.  Unfortunately the link doesn’t go to the right web page, but the image is still chalk full of goodies.

https://www.pinterest.com/pin/13510867614037605/ Food/wine pairing. Ok, this wasn’t really about UXD but the design and simplicity stood out to me. It’s visually appealing and simple to understand.  Plus, you can learn about wine and food pairing—who doesn’t like that? 😉

MY FAVORITE: Uses creative design to make a simple to understand and interesting visual about food and wine pairing. Who wouldn’t like this, right! 

foodwinepin

https://www.pinterest.com/pin/65583738302088161/ Design tips in an easy to understand format. Love this stuff since I’m a visual learner. Plus I’m not an artist or designer, in that artistic sense (more of a creative generalist) so sometimes these details are not in the top of mind for me. I need the help and reminders, in these cases.

Are you following my journey? Is it interesting? How am I doing, in your opinion? I’ve got a A as of week 4. Yeah! And I’m having a blast doing it too. Thanks for following along with me on my journey. Use the comments below to root for me and tell me your thoughts.

-SARA

Week #3 – Getting Good

This week had a fun design assignment. We got a little scenario about a company that monitors other company’s credit and were presented with one screen in the process of monitoring and were asked to redesign it based on a few factors. But we could ONLY sketch it on paper — not use any computer tools to do it. Here is how mine came out. What do you think?

BEFORE
Capture

AFTER

page-0

I changed the radio buttons to check boxes and added information about the chosen company to be monitored.  It was pretty cool. My assignment hasn’t been graded yet, but hopefully I did ok.

The text books are insightful and luckily seem like common sense about how people think and what motivates them in relation to good design.  All very interesting!  Take a look at my UXD Pintrest board (another weekly assignment) and let me know what you think. Can you think of any “bad” designs that could use improvement? Here is a common one that got a pretty good redesign. It helps you understand what this program is all about (understanding people’s issues using things and coming up with good designs based on that input). I think there are plenty of opportunities out there…

Until next week,

SARA