Author: DavidS

Posted on

Full Screen Backgrounds – Update

http://mediaweb.rmu.edu/~djsst266/demo/fullscreen.html

Hey all, here’s a solution for a fullpage image background I found in the wild (in a chrome new tab replacement called ‘Momentum’).

It’ll work best for situations when you only need one pane/screen-worth of space. The benefit is that it seems to maximize the amount of image visible.

It works by grabbing each end of the div and stretching it to the edge of the screen.

If you really need to use it for multiple panes, change the ‘top’ attribute of each page to [(page number – 1) * 100vh], so page 1 is top:0; page 2 is top:100vh; page 3 is top:200vh; etc.

Here’s the code.

#fullscreen {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url(mountains.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
Posted on

Challenge Tutorial (HTML Toolbox)

Hi all! I put together a video tutorial for completing the challenge I made and other static (not moving) challenges. It’s roughly 45 minutes long, and talks about a technique for rapid development.

The core principle is to Approximate in your editor, Refine in Chrome (or Firefox), and Copy back to your editor. As you practice iterating (building versions), you’ll get much faster at designing these.

You can find this video and more on my page. If you have any questions, comments, or things you want me to cover in the future, just email me.

https://www.youtube.com/watch?v=e9uzIaCSZWU

Posted on

App Review: ANY.DO

Any.Do is a to-do list management app that provides a simple, intuitive way to organize tasks. At the core of Any.Do is the principle of helping the user get things done. Tasks are organized into time-based and type-based categories. The time categories are divided into “Today,” “Tomorrow,” “Upcoming,” and “Someday,”  whereas type categories can be anything, such as “personal,” “classwork,” etc. Tasks can further be given notes, subtasks, and dates and designated as important.

The user’s tasks will sync across devices, and Any.Do offers a web application, Chrome extension, Android and iOS apps, and desktop clients. This review will focus on the Android app.

The user will spend almost all of his or her time on the app’s main screen: the task list. Here, the user sees all future tasks organized vertically in the categorization scheme of choice. Tasks can be moved between categories by pressing and holding them and then dragging up or down. Tapping a task expands it, revealing access to notes, categories, subtasks, sharing, and more. Tasks can be added using a field at the top of the screen or plus signs next to each category header, and as a task is added, Any.Do will make auto-complete suggestions on the entry. Completed tasks can be checked off simply by crossing them off with one’s finger, and all the checked-off tasks can be removed from the list by shaking the phone. The bottom of the screen features a toolbar providing access to settings, notfications, and the Any.Do Moment, a more in-depth scheduling tool which provides a run-down of the day’s tasks and lets the user state when he or she plans on getting the item done. The settings menu includes a variety of profile controls, list management options, theming tools, preferences, and access to completed tasks.

Aesthetically, the app uses an elegant sans-serif font throughout, and the user can set a number of themes. The primary theme (also used in the web app) is white with black text and blue highlights, while the secondary theme is black with white text and grey highlights. Important tasks are red in both. Icons are used wherever possible to denote features in minimal space. The heavy use of icons is confusing at first, as many are non-obvious and small, but after using the app for a while, the user will become familiar with the available features.

Overall, the basic features of Any.Do are intuitive and easy to use. Adding, completing, and organizing tasks works in a way that feels right. The visual design is minimalist and pleasing to the eye and is mirrored across all platforms. The editing icons take time to get used to and may be the least intuitive part of the app. Any.Do’s design philosophy has the concept of “getting stuff done” at its core: tasks are always center stage, starting with today. Everything that is not related to crossing off tasks is either hidden or simplified. To the user looking for a powerful but intuitive task management system focused on accomplishing things, Any.Do is a great choice.

 

Process Flow Diagram

Personas

Todd
Occupation: Businessman

“The task-sharing feature helps me keep my team on task. Being able to see each others’ tasks, progress on sub-tasks, and notes keeps everyone on the same page.”
 

Kate
Occupation: Mother

“With three kids, there are so many activities to do. The ability to categorize tasks by lists or time and set reminders helps me keep track of everyone’s activities.”

 

Drew
Occupation: Student

“Between classes and clubs and hanging out with friends, any activity I don’t write down immediately gets forgotten. Because Any.Do syncs accross my phone, tablet, and laptop, I’m always able to copy down my homework, and I don’t forget anything.”

 

Update
Any.Do pushed out version 3 recently, which features much clearer buttons and a nicer menu system letting you sort by date and category simultaneously.

Posted on

Mindmapping tool

Hey all, I wanted to share a useful mind-mapping tool I’ve used in the past.

coggle.it

It uses a simple google login, and provides a solid but simple feature set for mind-mapping.

-David S.

Posted on

Thoughts on Objectified

Do you agree with statements?

Good design is a mark of progress.

There is a story in every object. Product designs grow over time based on it’s cultural context and use.

The microchip broke the natural tendency for form to follow function.

Design is about what’s going to happen, not what has happened.

Cars have both front and back faces. Personified elements of objects can help the user relate to the object.

Enjoy things you already own. The best things are the things that have personal significance to the user.

Do you disagree?

Designing for edge cases may not always be the best way to take care of the middle. A product doesn’t need to be fail-proof. In some cases, it would be preferable to fail gracefully than try to account for everything. (however, those OXO peelers are the best peelers anywhere by far.)

Design is about mass production. I would contend that many of the best designs are for a single use case. People often solve their unique problems in a way unique to their situation.

Karim Rashid questions the design of cameras still being based on film cameras, even after it’s unnecessary. I think the design of the camera doesn’t stem from the film, but from the image itself. Our eyes are arranged horizontally. A camera, which is a device made to “see” things, is also arranged horizontally. Visually, people like horizontal photos and videos. It would have been possible to design film cameras vertically too.

Has anything the designers said changed how you thought about design?

It’s easy to look at something and say that it has good design, but good design isn’t necessarily a universal attribute a thing can have. It can have good design for a given use in a given context, which is an important thing to keep in mind.

Each designer interviewed for “Objectified” defined how they see Design, how would you define design and how has that definition changed?

After watching Objectified, I would say design is the iterative process of optimizing every attribute of an object to maximize the desired attributes given the needs of the user, the image of the object, and the context of the use.

Posted on

Week 6 Reading

What information can ethnographic tools give you to improve the interactivity of an online banking website? (pp. 48-54)

By understanding the habits and customs of a user, a bank can design its website to most quickly serve the greatest number of users. For example, the majority of visitors to a bank’s website will be looking for their personal account. They need to be able to get into it immediately. The rest of a bank’s visitors are probably either looking for information on the bank, or for a service the bank offers that solves a problem they have. Therefore, the site should also have helpful features that help users determine what products they need.

At what point is a design finished? What makes it a success? What is its purpose? (pp. 54-62)

Since a design exists in the context it is designed to be used in, and the context is always changing, no design for a given product category can be regarded as final. A successful design is one that seamlessly and elegantly integrates into the cultural context and solves a users needs in an intuitive manner.

Identify a product family you use regularly (can be anything from technology to consumables except for coffee). How has its branding effected your use, relationship and experience with the product? (pp. 78-84)

I recently bought a camera, and in the process of making the purchase decision, evaluated many variables and brands to choose one. Ultimately I went with a Pentax camera, because they were known as rugged, affordable, and played nicely with older lenses. The branding of being reliable gives me confidence that I can use the camera in most situations and not have to worry about it.

Posted on

Week 5 Reading

What makes up interaction design and what are some of the industry’s challenges?
Interaction design is a system of design that focuses on people by defining a problem, then investigating and designing based on the way people use things. Challenges for the industry would include a lack of understanding of the process or its importance. Because of this lack of understanding, designers are often not given the space, time, or resources to conduct proper research, and their input may not be taken if other specialists have different opinions.

What is interaction design, how it’s evolving. What fields does it draw knowledge from?
Interaction Design is a design philosophy that focuses on people. It is interesting in that it is actively evolving in both academic and business settings, with universities and companies making advances independently and jointly. It draws from more conventional, ‘fine art’ style design philosophies, as well as social sciences (e.g. sociology) and applied sciences like engineering.

Posted on

Project 1a: Scope and Strategy

The strategy for SmartCloset (internal development name) is three-fold. First, the website needs to establish a connection with the target audience. Second, it should educate the prospective customers about what our product does and how it can help them. Third, it will pitch the customer on the product, allowing them to either buy or fund it. Because SmartCloset, our innovative new wardrobe-management system, solves a problem that not everyone has, it is important that our site appeals to our target audience. Realistically, we would already be looking at a slim conversion rate, so getting every customer we can is important. If our website turns potential customers away, our bottom line would take a significant hit. Once customers are dedicated to reading our site, they will be wondering what our product does and how it functions. The bulk of our main page will be devoted to breaking down the advanced technology and intuitive, useful features built into each part of the system. Finally, if our customers find that SmartCloset is a good match for them, we’ll close with a call to action, enabling them to either fund or purchase our product.

The scope of SmartCloset’s website directly supports the three elements of its strategy. In order to connect with potential customers, the website’s look and feel should demonstrate the future-minded fashion-tech brand of our business. It can do this by using an uncluttered design with visual elements and a calm color scheme. In order to inform the audience, we will feature a commercial-style video to introduce the product to the consumer, along with pictures and copy explaining the features of the system’s components, and optionally an interactive prototype of the SmartCloset app. Finally, our call to action would need either a link to our funding campaign and a description of the rewards or a store–with a product database, credit card processing capabilities, and a shopping cart– to purchase different packages.

Posted on

Reading Questions

What are the goals of Apple’s website? How does Apple’s website address the needs of a user who has just purchased their first MacBook? (pp. 41-56)

The goal of Apple’s website is to provide information on their products while reinforcing Apple’s brand image.

A user arriving at Apple’s site looking for help with their MacBook would most likely click support, in the toolbar at the top of the homepage. Then they are prompted to select a product category to get support for. This prompt includes pictures, making the selection simple. Once the user selects their model from the “hardware” menu, they are given an easy to use set of articles, including a welcome page and a “new to mac” article.

What are the functional specifications of Facebook’s wall? If you are not on Facebook what are the specs for the signup page? (pp. 72-75)

The Facebook sign-up page outlines some of Facebook’s main features, and allows a user to either sign-in or sign-up. The sign-in information is smaller and tucked away at the top of the page, and selected by default, for users familiar with it. The sign-up information is more central to the page, and bigger. It also provides text fields and radio buttons allowing a new user to enter their information. The page also features a selection of housekeeping links at the bottom, along with language selections.

What are four architectural approaches to information structure? Find one example of each. (pp. 94-106)

  1. Hierarchical: brunnerworks.com
    The website for Pittsburgh ad agency Brunner consists of a handful of pages, each describing a facet of its business. Each page is self-explanatory and easy to find.
  2. Matrix: Amazon.com
    On any given product page, amazon suggests several other products based on different types of correlation, which are also adapted for the user.
  3. Organic: Wikipedia.org
    The organic nature of Wikipedia is so unpredictable that games have been formed around it. Pages are full of links to other pages, and the the only consistent navigation is mostly housekeeping (homepage, policies)
  4. Sequential: lifehacker.com
    Advice and tips site lifehacker is an example of a sequential website. It features several articles daily, ordered by publishing time, making it possible to read through it, start to finish.

What percentage of The Huffington Post index page is navigation, and what percentage is content? What about Google, Wikipedia, and Etsy? (pp. 116-134)

Navigation Content
Huffington Post 98% 2%
Google 15% 5%
Wikipedia 80% 20%
Etsy 30% 70%

 

How does http://www.landor.com guide the readers’ eyes and focus their attention on what is important? (pp. 144-155 )

Landor.com used color and contrast to guide the reader’s eye. The center sections are given vibrant colors, while the fringe sections are given a washed out low contrast black and white treatment.