52 Weeks of UX

We participated in the Rails Rumble with Splendid Bacon http://splendidbacon.com and I did the design and most of the fronted ui. (I wrote a summary about the process: http://news.ycombinator.com/item?id=1803155)

A) - Usually in our projects or in my projects, I try go with the design first, starting with describing what we are doing, why, for who and how.(The Five W’s Of http://52weeksofux.com/post/890288783/the-five-ws-of-ux). The concept, being 5 lines or 5 pages, sets the background for the whole project.

From there I try to go with sketches, or wireframes to iterate the views or the interaction flows. Then start doing the ui in Photsohop. When I'm quite set with the UI I start implementing that and iterating the interface along the way. After that, or about in the same time we start coding the features.

B) - I'm not sure how much wisdom we have accumulated. About some things sure, but natural multitouch interfaces or multimillion user web services are still quite new. If we would have followed Jacob Nielsens advice on everything, we woudn't have sites we have today.

I think the best way is to keep updated what's out there and from there you can get inspired to find your own solutions. That's why I have iPads & iPhones, try to use most of the new services to understand how they work and how they're built.

I try to learn from other people and their process (like with simple todo app, Cultured Code produces a lot of sketches and mockups…

I've built my experience mainly through exposure to native mobile. I find that the walled gardens and constraints you work within tend to help focus what you're creating. It's easier to tell when something looks or feels "wrong" when you're looking at apps that are built to match the OS's ecosystem, instead of the latest web trends.

When you work with a standardized set of UI elements on a canvas of limited size, you tend to start thinking about the interface in terms of modular actions and tasks, which you can repurpose later when scaling up to tablet or desktop web. You also have a good basis to simplify these tasks further when branching out to wearables and in-car devices.

----

At this point, Google, Apple, and Microsoft each have pretty defined ideologies and UI — check out their guidelines:

https://developer.android.com/design/material/index.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

http://dev.windows.com/en-us/design

----

Check out some of the sessions from WWDC and Google I/O too:

https://developer.apple.com/videos/wwdc/2014/

https://www.google.com/events/io/io14videos

----

There are also a lot of great blogs out there that have pinpointed info on different parts of interface design. Sometimes these info-morsels can be easier to digest than starting a full course in UX. This is definitely not a comprehensive list, so look around, and get your RSS client fired…

1. Get inspired. Keep bookmarks of interesting beautiful designs you like. Think about what makes it beautiful. Similarly, think about why you don't like any particular design. How it can be improved.

2. Learn. Learn both practical things like HTML5, CSS3, Graphics Design for web(icon/logo etc) and theoretical things like color theory, grid system, UX design, etc. Read books, blogs, html/css code for it.

3. Practice. Use what you have learned to design some sites. You can design your own sites, templates, or redesign some existing site you like.

4. Share your work with other people and get their feedback. Make improvements based on their suggestions.

5. Rinse and Repeat. Be patient. Like all arts, designing improves with time and effort put in.

Some resources you may like to use -

http://www.awwwards.com/

http://www.smashingmagazine.com

http://www.cssmania.com/

http://dribbble.com/

http://www.uiparade.com/

http://patterntap.com/

http://ui-patterns.com/

http://developer.yahoo.com/ypatterns/

http://www.welie.com/patterns/

http://www.alistapart.com/

http://siteinspire.com/

http://designingwebinterfaces.com/explore

http://www.reddit.com/r/webdesign

http://forrst.com

http://paulstamatiou.com/startup-web-design-ux-crash-course

http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong

http://52weeksofux.com/

> This also makes me ask, is the only way to radically change UI to come up with a completely new from scratch paradigm, and if so, is this why we have metro?

Surely, quite a lot of time a design can be tweaked in its current version to make some great changes which drastically improve upon the usability. But on the contrary I think that Windows has reached a stage where some minor tweaks in its current incarnation won't make a lot of difference. It can only be optimized not radically improved until it is completely though from bottom up.

You might like to read about the concept of "Local Maximum"[1] on 52 weeks of UX. Here's a excerpt from the post.

Do you ever feel that your design has become stale and that despite your making lots of little changes to it over time without any big overhaul there is just no way to drastically improve it? If so you’ve probably hit what Andrew Chen calls the “Local Maximum”.

[1]http://52weeksofux.com/post/694598769/the-local-maximum

I've recently taken a Udacity course "Intro to the Design of Everyday Things"[0] and jotted down a preliminary summary[1].

Here are some of the tools they listed:

+ Hybrid paper/digital tools to animate paper pictures:

- https://popapp.in/

- https://www.flinto.com/

* Apple Keynote

* MS PowerPoint

* Google Presentation

* http://keynotopia.com/guides/

* https://balsamiq.com/

+ HTML5 prototypes:

- http://tumult.com/hype/

- http://www.adobe.com/products/edge-animate.html

- https://www.google.com/webdesigner/

+ Misc:

- http://hackdesign.com/

- http://www.usabilitycounts.com/2012/08/30/four-ways-to-break-into-user-experience/

- http://52weeksofux.com/

- https://www.interaction-design.org/

[0]: https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101

[1]: https://github.com/jhadjar/Notes/blob/master/Design/Intro%20to%20the%20Design%20of%20Everyday%20Things.MD

For starters, see the footer: http://www.andyrutledge.com/calculating-hours.php (His home page is changed so doesn't link to them all)

http://www.alistapart.com/ Does talk about psychology and logic behind design.

http://52weeksofux.com/ UX

And Don't make me think. An awesome book on usability: http://amzn.to/uZ4uH5

I haven't found any great resource on Information Architecture yet.

<selfpromiton> I wrote a very brief intro to them all: http://www.64notes.com/design/design-and-subsets-essay/ </selfpromiton>