Setting up a website from Scratch
- Domain name search domai.nr , godaddy.com
- to buy www.godaddy.com
- hosting www.bluehost.com
- Themes Themeforest.net is where i get all my wp themes from. A great collection for all your creative needs
- Email – Google Suite, Zoho is an excellent alternative
- If someone steals your domain http://mashable.com/2014/04/02/ramshackle-glam-hacking/
Component libraries from yester years + UX Systems for specific workflows + Alignment with Code. This is my understanding of what a design system is. The focus is on reusability and scalability. If you decide to start any project, you will find inspiration in the following industry leading design systems
- IBM’s Carbon
- Shopify’s Polaris
- Salesforce Lightning
Prototyping – It’s turbo for your Design deliverables
Form 3.1 Relative Wave
<h2>DATA VIZ</h2> <ahref="http://www.datavizproject.com"><strong style="color: #333333; font-family: arial, helvetica, sans-serif; font-size: 14px; font-style: normal; text-align: justify;">www.datavizproject.com</strong></a><br />
For a quick glimpse of the kitchen sink and explanation on when to use what.
<p><strong>Transitions</strong><br /><a title="Best Resource for UI transitions" href="http://www.ui-transitions.com/" target="_blank" rel="noopener noreferrer">http://www.ui-transitions.com/</a>
http://capptivate.co/ iOS UI Animations
- Material Design Guidelines
- iOS Human Interface Guidelines
- Android Design Patterns – Official
- Windows Phone Design Library
<h2>BOOKS</h2> <ul><li>www.keepitusable.com</li><li>http://rosenfeldmedia.com/books/</li><li>www.uxpin.com</li></ul> <h2>Design Research</h2> <p>If you believe or want to see if meeting users would help build better products/services. The links below should help you get started Latest!! <a style="font-size: 16px;" href="http://www.gsma.com/mobilefordevelopment/magri-design-toolkit" target="_blank" rel="noopener">GSMA mAgri Toolkit </a>
You will find about the work that i do inside http://www.ideo.com/work/human-centered-design-toolkit HCD toolkit a great reference guide if you already practice UCD in your work. If you are beginner, http://www.designkit.org/ a great place to quickly get familiar with the methodologies to use in the field and i recommend signing up for their newsletter. https://www.interaction-design.org/literature http://www.nngroup.com –
Check out the articles http://www.nngroup.com/articles/ | Heuristics www.usability.gov | Guidelines Participatory Design by Frog Design If you looking for Pattern and Guidelines, check out the below resources http://www.uxpin.com/knowledge.html Great resources from UXPIN; Their ebooks are great way to stay updated on the patterns on both web and mobile
FOUNDATION – ZURB
http://foundation.zurb.com/ Responsive front-end framework
http://sass-lang.com/ Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes.
2. SASS I have been playing around with .sass for styling apps built using Sencha Touch
Steps to get started
1. Install Ruby http://www.ruby-lang.org/en/downloads/
- Install Compass http://compass-style.org/
You need to install ruby before you install compass
Setting up the ruby environment
$ gem update –system
$ gem install compass
GREAT ARTICLES on MOBILE DESIGN
Designing better forms – https://uxdesign.cc/design-better-forms-96fadca0f49c#.r5qqstsa8
Best available design guidelines
Wireframing and Prototypes
Copying apps that exist is not always easy. Here are some reasons why?
Adobe Comet – A tool which would eliminate the need to jump from design to prototyping tool. Bye bye – Axure.
Onboarding experience This is a great article on how to go about with the Onboarding experience and would be a relevant read for anyone working on new products.Web/Mobile prototyping – Use your .psd, jpg, sketch files to create clickable prototypes. Great for testing
Udacity – https://www.udacity.com/course/viewer#!/c-ud837/
User Experience Design Guidelines for Windows PhoneThis extensive section is dedicated to Metro concepts and design guidelines.
UX Guidelines for Metro-Style App Development
Blend InsiderThis provides insights from the Microsoft’s Expression Blend team.
Jeff Wilcox’s ‘Metro’ Design Guide for Developers, v1.00
Jeff Wilcox This article presents the main Metro concepts and shows how to use them in designing an application.
20 Free Prototyping, Mockup and Wireframing Resources for Windows Phone 7
MicrosoftFeedThis article presents some useful resources for prototyping and designing for WP7.
Develop for Windows Phone 7.5 and Xbox LIVE Indie Games
MSDN App Hub
<h2>testing</h2> <h2>Web Testing</h2><p><a title="visual website optimizer" href="http://visualwebsiteoptimizer.com/" target="_blank" rel="noopener noreferrer">http://visualwebsiteoptimizer.com/</a></p> <h2>patterns everywhere</h2> <pre>There are many patterns that I come across everyday; this section aims to capture them so, that I can use them to solve the design challenges of the future.</pre><p>Analytics<br />Comparing dates - Google analytics on mobile has evolved and gives more in the smaller real estate. If you are designing a dashboard, there are so many lessons to draw from it. Notice how google has treated the comparison. The smaller font size. Percentage change. Red indicating the negative change. Really well done.
Ctrl C + Ctrl V here so that I can read it many a times.
The below article was a newsletter from interactiondesign.org.
HOW TO BECOME A MOBILE UX EXPERT
Let’s start with a little test. Which device are you using to read this newsletter? There is a good chance that it is not a desktop computer. Not that long ago, we could assume that it was indeed a desktop computer – or what we might now call “traditional” usage. In the era of multiple devices we cannot assume that anymore. Now our behavior follows the closest-screen-next-to-us principle. That’s the first myth or misconception debunked.
ERASE YOUR MOBILE UX MISCONCEPTIONS
Erase your mobile misconceptions and start from scratch by researching data about mobile users’ behavior. There are many interesting sources online!
For example, from an openly available Google mobile movement report, we learn that 72% of mobile users use a smartphone while they….. (see the illustration below):
The statistics above clearly show that mobile users do not have their full attention on their mobile tasks. On the other hand, they’re not outdoors or in a rush as many of us imagine when thinking about mobile usage.
With the smartphone, and to a lesser extent the tablet, becoming the devices of choice for billions of people to access the Internet; designers have to cater for those users or risk being locked out of the market for good. That means putting mobile first in many product development strategies.
SEVEN DEADLY MOBILE MYTHS
Not yet convinced that you believe in certain mobile myths? Then read the following Seven Deadly Mobile Myths – outlined by mobile designer and developer Josh Clark:
- MYTH #1: Mobile users are rushed and distracted (40% admit to using phones in bathroom. Luke Wroblewski: 60% are liars)
- MYTH #2: Mobile = Less (Using small screen ≠ wanting to do less)
- MYTH #3: Complexity is a dirty word (People don’t want dumbed down apps, they want uncomplicated apps)
- MYTH #4: Extra taps and clicks are evil (tap quality is far more important than tap quantity)
- MYTH #5: Gotta have a mobile website (you DO need your website to look great on all devices)
- MYTH #6: Mobile is about apps (Stop focusing so much on APPs. Start with the content)
- MYTH #7: CMS & API are for database nerds (Designers, managers, content producers, we all have to care about this, too)
DON’T SHRINK THE SCREEN, FOCUS ON THE TASKS
Mobile design and design for other devices such as laptops and desktops does not mean producing the same product, just smaller. It means focusing on what matters to the mobile user and delivering a differentiated user experience. To do this successfully, you need to focus on tasks and how they are executed. Learn more at https://www.interaction-design.org/literature/article/functionality-and-mobile-design-don-t-shrink-the-screen-focus-on-the-tasks
RESPONSIVE VS. ADAPTIVE DESIGN
When you have a clear idea of your business goals, target users, their mobile behavior, and the features your product will cover, you need to balance the pros and cons in order to choose the right path.
The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.
|Adaptive design||– Allows designers to build the best UX for the appropriate device.
– Cheaper/easier to implement.
– Mobile devices can sense their user’s environment.
– Designers can optimize advertisements based on user data from smart devices.
|– Labor-intensive to create – most adaptive designs are retrofitting traditional sites to make them more accessible.
– Tablets and netbooks can have trouble with site configuration tending to be smartphone- or desktop-oriented.
– Challenging to SEO — Search engines have trouble appreciating identical content on multiple sites.
|Responsive design||– Uniform & seamless = good UX.
– Abundance of templates to use.
– SEO friendly.
|– Less screen size design control.
– Elements can move around
– Advertisements lost on screen.
– Longer mobile download times.
APPS: NATIVE VS. HYBRID VS. RESPONSIVE DEVELOPMENT
If you decide to build an app you will have to choose between native apps, hybrid apps, and responsive web sites which offers similar functionalities to an app. The decision you make will affect the final product. Each option has its advantages and disadvantages and it’s important to understand these in detail before committing to a particular development path.
Learning to make the right decision requires understanding the way each type of development works and how it affects the final product. This article will help you make the right choice:
LONG LIVE SKEUOMORPHISM
Are you ready to jump into the actual user interface design? Check current mobile design conventions. They change fast! Skeuomorphism has been a very useful concept in design, then it became the most hated concept in design, and then it came back from the dead.
Skeuomorphism is where an object in software mimics its real world counterpart. The “trash can” is, perhaps, the most recognizable skeuomorphic object. Though the good old “save” icon was once skeuomorphic but following the demise of the floppy disc – it no longer bears resemblance to the world of today.
Understanding skeuomorphism lets designers help users through learning curves and make decisions as to whether skeuomorphism still serves a purpose today.
Learn how can skeuomorphism improve your design at https://www.interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
DIETER RAMS: TEN PRINCIPLES FOR GOOD DESIGN
Rams introduced the idea of sustainable development and of obsolescence being a crime in design in the 1970s. Accordingly he asked himself the question: is my design good design? The answer formed his now celebrated ten principles.
1. Is innovative – The possibilities for progression are not, by any means, exhausted. Technological development is always offering new opportunities for original designs. But imaginative design always develops in tandem with improving technology, and can never be an end in itself.
2. Makes a product useful – A product is bought to be used. It has to satisfy not only functional, but also psychological and aesthetic criteria. Good design emphasizes the usefulness of a product whilst disregarding anything that could detract from it.
3. Is aesthetic – The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.
4. Makes a product understandable – It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.
5. Is unobtrusive – Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
6. Is honest – It does not make a product appear more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
7. Is long-lasting – It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
8. Is thorough down to the last detail – Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.
9. Is environmentally friendly – Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.
10. Is as little design as possible – Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.