SMART 800 Series Interactive Whiteboard System Fact SheetSteljes
The SMART Board 800 series is an interactive whiteboard system that allows for natural touch and writing experiences as well as collaboration between users. It features a bright projector, touch gestures, multi-touch capability, included software, and supports connections to multiple displays. The system is designed to provide an intuitive interface for interacting with content through writing and manipulation of objects across applications and documents.
Construction innovation process 2 power point slides and ppt diagram templates SlideTeam.net
This document outlines an innovation process model that involves feasibility, viability, design, human values, organizational behavior, manufacturing, technology, and business. It includes icons that represent each stage and can be edited, ungrouped, and have their colors changed in PowerPoint. The document provides instructions for customizing the innovation process diagram icons.
The document introduces Google's Material Design language. It discusses key Material Design concepts like surfaces, floating action buttons, grids and keylines, colors and palettes, typography, imagery, meaningful motion, activity transitions, shared item transitions, and adaptive design. Material Design aims to provide consistent user experiences across platforms using visual and motion design elements like shadows, continuity, and meaningful animations. The document provides guidelines and examples for implementing Material Design in Android applications.
This document discusses Google's Material Design guidelines for Android applications. It introduces Material Design as a digital material inspired by paper and ink with rules for shadows, elevation and movement. It outlines guidelines for using bold colors, Roboto typography, and layout patterns like the floating action button. It also covers best practices for meaningful motion with animations, interactions and transitions to provide a coherent visual language and delightful user experience across Android.
During a meetup I introduced the concept of Mixed Reality comparing to Augmented Reality and Virtual Reality.
After the introduction of Windows Mixed Reality I talked about: HoloLens, Holograms and Gestures.
SMART 800 Series Interactive Whiteboard System Fact SheetSteljes
The SMART Board 800 series is an interactive whiteboard system that allows for natural touch and writing experiences as well as collaboration between users. It features a bright projector, touch gestures, multi-touch capability, included software, and supports connections to multiple displays. The system is designed to provide an intuitive interface for interacting with content through writing and manipulation of objects across applications and documents.
Construction innovation process 2 power point slides and ppt diagram templates SlideTeam.net
This document outlines an innovation process model that involves feasibility, viability, design, human values, organizational behavior, manufacturing, technology, and business. It includes icons that represent each stage and can be edited, ungrouped, and have their colors changed in PowerPoint. The document provides instructions for customizing the innovation process diagram icons.
The document introduces Google's Material Design language. It discusses key Material Design concepts like surfaces, floating action buttons, grids and keylines, colors and palettes, typography, imagery, meaningful motion, activity transitions, shared item transitions, and adaptive design. Material Design aims to provide consistent user experiences across platforms using visual and motion design elements like shadows, continuity, and meaningful animations. The document provides guidelines and examples for implementing Material Design in Android applications.
This document discusses Google's Material Design guidelines for Android applications. It introduces Material Design as a digital material inspired by paper and ink with rules for shadows, elevation and movement. It outlines guidelines for using bold colors, Roboto typography, and layout patterns like the floating action button. It also covers best practices for meaningful motion with animations, interactions and transitions to provide a coherent visual language and delightful user experience across Android.
During a meetup I introduced the concept of Mixed Reality comparing to Augmented Reality and Virtual Reality.
After the introduction of Windows Mixed Reality I talked about: HoloLens, Holograms and Gestures.
Lecture 6 of the COMP 4010 course on AR/VR. This lecture is about designing AR systems. This was taught by Mark Billinghurst at the University of South Australia on September 1st 2022.
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
This document discusses user experience design and trends. It covers the fundamentals of UX including focusing on users and prioritizing speed. Popular UX techniques like personas, wireframing, and user testing are explained. Material Design is introduced as Google's visual design language using concepts like color palettes and animations. Current design trends involving layered interfaces, simple color schemes, and thumb-focused interactions are reviewed. Emerging UX trends towards always-connected devices, smart watches and homes, and setup guides replacing manuals are also examined.
Drupal is a hybrid framework and product that is focused on providing site building tools through blocks, content types, modules, and themes. However, its user interfaces for managing these core elements are overwhelming, disconnected, and difficult to use. The focus of Drupal 8 is to improve these "rusty tools" by simplifying and streamlining the user experiences for placing blocks and menus, managing content types and fields, and enabling, updating, and configuring modules and themes. Developers are encouraged to contribute to ongoing initiatives addressing these areas through small, scheduled teams in order to help Drupal grow up faster than its current resource constraints allow.
Designing and Theming Drupal for Mobile DevicesDavid Lanier
Have you noticed how a site can look great on your computer, but when viewing it on a mobile device it's unreadable, ugly, and takes forever to load?
Maybe you're designing a site, or you already have one or more sites. Now is the time to make it friendlier for mobile devices such as iPhone, Android, and others.
This session covers design considerations if you are still in the design phase, as well as demonstrate techniques for adding a mobile interface for your existing sites.
Lecture 7 from the COMP 4010 class on AR and VR. This lecture was about Designing AR systems. It was taught on September 7th 2021 by Mark Billinghurst from the University of South Australia.
Mockdown is an open source, code-based mockup tool that uses a declarative, component-based visual language to create high-fidelity mockups. It aims to improve software design and collaboration by allowing product teams to sketch interfaces and get early feedback before writing code. Some key features include prebuilt and customizable components, visual editing, interaction support, and collaboration tools to help teams design better software.
The document discusses various techniques for designing mobile applications, including:
- Drawing app ideas and wireframes on paper before implementing them digitally.
- Considering human interface guidelines, the user experience, and what users can realistically do within a short time frame using one thumb.
- Defining the app purpose and intended users through traditional UX methods like site maps and identifying key nouns and verbs.
- Designing for mobile users rather than just mobile devices, such as allowing landscape orientation.
- Understanding the user's situational context in terms of where they are, who they're with, what they're doing, and when, and ensuring the app provides a useful result for that context.
A distribution for (Drupal) User GroupsKálmán Hosszu
This document discusses plans for creating a Drupal distribution and website for a local Drupal User Group (DUG). It outlines:
1. Creating a customizable logo for DUG sites.
2. Developing a feature list for the site based on administrator and user needs.
3. Proposed wireframes and layouts for the front page, events page, and responsive design.
4. An upcoming code sprint to start building features, the theme, and site, and ways for people to contribute depending on their skills.
The document discusses mixed reality and the Internet of Things. It provides an overview of the history and capabilities of Microsoft HoloLens, including its components like cameras and sensors that enable inside-out tracking without external equipment. HoloLens allows users to interact with holograms through gestures, gaze, and voice in both individual and collaborative applications across engineering, medical, gaming, and other fields.
WWDC 2014 was held June 2-6 in San Francisco. Major announcements included updates to iOS, OS X Yosemite, and the introduction of new technologies like Swift, a new programming language. iOS 8 and Yosemite featured a "flat design" aesthetic with minimalist interfaces, increased use of color, and sans-serif typography. Continuity features were improved, allowing users to answer calls and send texts from their Macs and to access files across devices via iCloud Drive. The new Swift language is faster than Objective-C and allows for real-time coding and output previews.
This document discusses storyboarding and techniques for designing user experiences. It begins by introducing concept experience design and moving from insights to ideation. It then discusses defining the product by establishing the what, why, who, when and where. This includes defining the product concept as a mobile experience and designing for mobile affordances. It also discusses establishing a customer value proposition and "make mantra". The document then covers storyboarding and sketching to refine designs, convey value propositions and sell ideas. It provides examples and discusses immersion techniques to develop designs.
Marcel Bruch is the project lead of Eclipse Code Recommenders and CEO of Codetrails. His passion is improving developers' work through intelligent tools that use data mining on software engineering data. The document discusses Code Recommenders 1.0 which analyzes source code and mines data to deliver recommendations to Eclipse users. It proposes moving to a crowd-sourced model in 2.0 where developers can share clicks, completions, and snippets to help the tool learn. Codetrails Connect and code snippets are also discussed as ways to help developers work more efficiently.
The document discusses mobile user experience design. It covers key elements of mobile UX like context, functionality, information architecture, content, visual design, usability, user input, social aspects, trustworthiness, and feedback. It also discusses common dilemmas in mobile UX like choosing between native apps vs mobile web vs responsive web vs hybrid approaches, and selecting between iOS, Android and Windows platforms. The document provides examples to illustrate these concepts and dilemmas in mobile UX.
The document discusses the Jisc RSC YH Roadshow which showcases technology that can be used for teaching, learning, and training. It demonstrates tablets, apps, and web-based collaborative tools. Attendees participate in collaborative scenario planning activities and explore how the technologies can be used. Examples shown include using apps for note-taking with audio, augmented reality, and accessing Microsoft Office documents on any device. The session aims to provide ideas for addressing learners' needs through technology-enabled resources and plans.
In the research and planning stages, various online tools and software were used including blogs, Prezi, Voki, and file sharing sites like SlideShare, YouTube and Vimeo. This allowed for sharing of information, collaboration through commenting, and use of multimedia presentations. YouTube was specifically used for research purposes. Feedback was also gathered using technology like survey tools.
During production, hardware like DSLR cameras, studio lighting and various camera lenses and mounts were used to capture high quality video and control elements like exposure, depth of field and focal length.
Post-production software such as Photoshop, InDesign, Premiere Pro and After Effects were utilized to manipulate and enhance images and video, edit
Any kind of remote collaboration is hard. But it can seem nearly impossible when you are working with a design team. The visual interaction and open environment needed for great creative work can be tricky to achieve when your team doesn’t sit in the same room. But effective remote design and collaboration is possible.
In just four months, Microsoft has already sold over 60 million licenses of Windows 8. This new version of Microsoft’s flagship operating system creates new opportunities for designers and developers to reach vast numbers of users. Windows 8 applications are designed following the principles of the Modern UI style. In this webinar, Valentina will teach you the basics of designing Windows 8 applications that fit within the Modern UI paradigm while maintaining a strong brand and personality.
Evolving research to being a strategic partnerBojhan
To become a strategic partner, an organization must:
1. Establish a mission statement to define its purpose and goals.
2. Carefully pick and pursue strategic projects that have high impact and are 40% strategic, 60% operational.
3. Follow a structured path to becoming a strategic contributor and core competency through intentional growth in its process, business functions, and strategic contributions.
The document discusses design patterns for Drupal 7 user interfaces. It covers patterns for grouping elements, listings, navigation/information architecture, and user interface text. The main recommendations are to use patterns consistently, avoid unnecessary elements, and write clear and concise user-facing text without jargon.
Lecture 6 of the COMP 4010 course on AR/VR. This lecture is about designing AR systems. This was taught by Mark Billinghurst at the University of South Australia on September 1st 2022.
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
This document discusses user experience design and trends. It covers the fundamentals of UX including focusing on users and prioritizing speed. Popular UX techniques like personas, wireframing, and user testing are explained. Material Design is introduced as Google's visual design language using concepts like color palettes and animations. Current design trends involving layered interfaces, simple color schemes, and thumb-focused interactions are reviewed. Emerging UX trends towards always-connected devices, smart watches and homes, and setup guides replacing manuals are also examined.
Drupal is a hybrid framework and product that is focused on providing site building tools through blocks, content types, modules, and themes. However, its user interfaces for managing these core elements are overwhelming, disconnected, and difficult to use. The focus of Drupal 8 is to improve these "rusty tools" by simplifying and streamlining the user experiences for placing blocks and menus, managing content types and fields, and enabling, updating, and configuring modules and themes. Developers are encouraged to contribute to ongoing initiatives addressing these areas through small, scheduled teams in order to help Drupal grow up faster than its current resource constraints allow.
Designing and Theming Drupal for Mobile DevicesDavid Lanier
Have you noticed how a site can look great on your computer, but when viewing it on a mobile device it's unreadable, ugly, and takes forever to load?
Maybe you're designing a site, or you already have one or more sites. Now is the time to make it friendlier for mobile devices such as iPhone, Android, and others.
This session covers design considerations if you are still in the design phase, as well as demonstrate techniques for adding a mobile interface for your existing sites.
Lecture 7 from the COMP 4010 class on AR and VR. This lecture was about Designing AR systems. It was taught on September 7th 2021 by Mark Billinghurst from the University of South Australia.
Mockdown is an open source, code-based mockup tool that uses a declarative, component-based visual language to create high-fidelity mockups. It aims to improve software design and collaboration by allowing product teams to sketch interfaces and get early feedback before writing code. Some key features include prebuilt and customizable components, visual editing, interaction support, and collaboration tools to help teams design better software.
The document discusses various techniques for designing mobile applications, including:
- Drawing app ideas and wireframes on paper before implementing them digitally.
- Considering human interface guidelines, the user experience, and what users can realistically do within a short time frame using one thumb.
- Defining the app purpose and intended users through traditional UX methods like site maps and identifying key nouns and verbs.
- Designing for mobile users rather than just mobile devices, such as allowing landscape orientation.
- Understanding the user's situational context in terms of where they are, who they're with, what they're doing, and when, and ensuring the app provides a useful result for that context.
A distribution for (Drupal) User GroupsKálmán Hosszu
This document discusses plans for creating a Drupal distribution and website for a local Drupal User Group (DUG). It outlines:
1. Creating a customizable logo for DUG sites.
2. Developing a feature list for the site based on administrator and user needs.
3. Proposed wireframes and layouts for the front page, events page, and responsive design.
4. An upcoming code sprint to start building features, the theme, and site, and ways for people to contribute depending on their skills.
The document discusses mixed reality and the Internet of Things. It provides an overview of the history and capabilities of Microsoft HoloLens, including its components like cameras and sensors that enable inside-out tracking without external equipment. HoloLens allows users to interact with holograms through gestures, gaze, and voice in both individual and collaborative applications across engineering, medical, gaming, and other fields.
WWDC 2014 was held June 2-6 in San Francisco. Major announcements included updates to iOS, OS X Yosemite, and the introduction of new technologies like Swift, a new programming language. iOS 8 and Yosemite featured a "flat design" aesthetic with minimalist interfaces, increased use of color, and sans-serif typography. Continuity features were improved, allowing users to answer calls and send texts from their Macs and to access files across devices via iCloud Drive. The new Swift language is faster than Objective-C and allows for real-time coding and output previews.
This document discusses storyboarding and techniques for designing user experiences. It begins by introducing concept experience design and moving from insights to ideation. It then discusses defining the product by establishing the what, why, who, when and where. This includes defining the product concept as a mobile experience and designing for mobile affordances. It also discusses establishing a customer value proposition and "make mantra". The document then covers storyboarding and sketching to refine designs, convey value propositions and sell ideas. It provides examples and discusses immersion techniques to develop designs.
Marcel Bruch is the project lead of Eclipse Code Recommenders and CEO of Codetrails. His passion is improving developers' work through intelligent tools that use data mining on software engineering data. The document discusses Code Recommenders 1.0 which analyzes source code and mines data to deliver recommendations to Eclipse users. It proposes moving to a crowd-sourced model in 2.0 where developers can share clicks, completions, and snippets to help the tool learn. Codetrails Connect and code snippets are also discussed as ways to help developers work more efficiently.
The document discusses mobile user experience design. It covers key elements of mobile UX like context, functionality, information architecture, content, visual design, usability, user input, social aspects, trustworthiness, and feedback. It also discusses common dilemmas in mobile UX like choosing between native apps vs mobile web vs responsive web vs hybrid approaches, and selecting between iOS, Android and Windows platforms. The document provides examples to illustrate these concepts and dilemmas in mobile UX.
The document discusses the Jisc RSC YH Roadshow which showcases technology that can be used for teaching, learning, and training. It demonstrates tablets, apps, and web-based collaborative tools. Attendees participate in collaborative scenario planning activities and explore how the technologies can be used. Examples shown include using apps for note-taking with audio, augmented reality, and accessing Microsoft Office documents on any device. The session aims to provide ideas for addressing learners' needs through technology-enabled resources and plans.
In the research and planning stages, various online tools and software were used including blogs, Prezi, Voki, and file sharing sites like SlideShare, YouTube and Vimeo. This allowed for sharing of information, collaboration through commenting, and use of multimedia presentations. YouTube was specifically used for research purposes. Feedback was also gathered using technology like survey tools.
During production, hardware like DSLR cameras, studio lighting and various camera lenses and mounts were used to capture high quality video and control elements like exposure, depth of field and focal length.
Post-production software such as Photoshop, InDesign, Premiere Pro and After Effects were utilized to manipulate and enhance images and video, edit
Any kind of remote collaboration is hard. But it can seem nearly impossible when you are working with a design team. The visual interaction and open environment needed for great creative work can be tricky to achieve when your team doesn’t sit in the same room. But effective remote design and collaboration is possible.
In just four months, Microsoft has already sold over 60 million licenses of Windows 8. This new version of Microsoft’s flagship operating system creates new opportunities for designers and developers to reach vast numbers of users. Windows 8 applications are designed following the principles of the Modern UI style. In this webinar, Valentina will teach you the basics of designing Windows 8 applications that fit within the Modern UI paradigm while maintaining a strong brand and personality.
Evolving research to being a strategic partnerBojhan
To become a strategic partner, an organization must:
1. Establish a mission statement to define its purpose and goals.
2. Carefully pick and pursue strategic projects that have high impact and are 40% strategic, 60% operational.
3. Follow a structured path to becoming a strategic contributor and core competency through intentional growth in its process, business functions, and strategic contributions.
The document discusses design patterns for Drupal 7 user interfaces. It covers patterns for grouping elements, listings, navigation/information architecture, and user interface text. The main recommendations are to use patterns consistently, avoid unnecessary elements, and write clear and concise user-facing text without jargon.
This document discusses open source design and user experience. It notes that open source projects can succeed with UX by having an inclusive culture that observes users and uses an iterative process. The author advocates starting with mock designs before coding and emphasizes the need for collaboration between developers and designers, arguing that design by committee is ineffective and that projects should have an idea-centric rather than technology-centric focus.
This document discusses user experience in Drupal and initiatives to improve it. It describes observing users to find 120 usability issues in Drupal 7. It also discusses a Drupal 7 UX project and processes used including discussions on Twitter, Flickr, groups.drupal.org and a sprint with 25 people. Reflections note Drupal has no target audience and is not optimized for any one. The document outlines improvements for Drupal 8 like new block, menu and field interfaces. It proposes getting more designers involved in core contributions and coordination efforts like Drupalcamp workshops to share understanding of users.
Drupal 7 introduced many improvements to the user experience including:
- Clarifying the distinction between the front-end and back-end
- Making content and functionality easier to find
- Addressing numerous small usability issues
- Improving theming capabilities with tools like new theme regions, dynamic classes, and hook alterations
- Nearly finishing the work to ready Drupal 7's user experience ahead of its release
This document discusses problems with the current sustainable design process and proposes solutions. It notes the process focuses on the wrong users and lacks boldness and community understanding. To improve, it suggests optimizing the UI for non-core developers, encouraging high-level UX discussions, and building understanding through collaboration. The goal is to revamp Drupal essentials for Drupal 8.
The document outlines principles for improving the user experience (UX) of Drupal 7 based on observations of 120 user issues. It discusses goals of fixing usability problems, empowering developers, and providing direction. Five principles are described for improving UX: finding functionality through good information architecture, using behavioral design principles, focusing on essential first-time experiences, stress testing for real-world usage, and ensuring good communication through documentation.
The document discusses designing complex interfaces and provides several principles and tools to consider. It notes that complexity enables capability but too much complexity makes everything unimportant. Understanding user goals through research is important. Concepts and relationships, as well as different screen states, should be considered. Flexibility, a clear vision, and experimentation are principles discussed. Tools mentioned include concept mapping, eye tracking, and form builders. The document emphasizes designing for the user rather than the software and making designs intuitive and invisible through good principles.
The document discusses considerations for creating user-friendly web applications. It covers topics like understanding users, user-centered design principles, managing expectations, removing unnecessary features, finding functionality through card sorting, handling different screen states like blank, error, and flooded screens. It also provides best practices for blank and flooded states and discusses the importance of clear copywriting and instructions. The document advocates testing designs with users to gather data and resolve differing opinions to improve usability.
Fonts play a crucial role in both User Interface (UI) and User Experience (UX) design. They affect readability, accessibility, aesthetics, and overall user perception.
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page pmgdscunsri
Figma is a cloud-based design tool widely used by designers for prototyping, UI/UX design, and real-time collaboration. With features such as precision pen tools, grid system, and reusable components, Figma makes it easy for teams to work together on design projects. Its flexibility and accessibility make Figma a top choice in the digital age.
Decormart Studio is widely recognized as one of the best interior designers in Bangalore, known for their exceptional design expertise and ability to create stunning, functional spaces. With a strong focus on client preferences and timely project delivery, Decormart Studio has built a solid reputation for their innovative and personalized approach to interior design.
Practical eLearning Makeovers for EveryoneBianca Woods
Welcome to Practical eLearning Makeovers for Everyone. In this presentation, we’ll take a look at a bunch of easy-to-use visual design tips and tricks. And we’ll do this by using them to spruce up some eLearning screens that are in dire need of a new look.
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Revolutionizing the Digital Landscape: Web Development Companies in Indiaamrsoftec1
Discover unparalleled creativity and technical prowess with India's leading web development companies. From custom solutions to e-commerce platforms, harness the expertise of skilled developers at competitive prices. Transform your digital presence, enhance the user experience, and propel your business to new heights with innovative solutions tailored to your needs, all from the heart of India's tech industry.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Hey!
Bojhan – I am User Experience maintainer of Drupal 8 and I lead up the UX-Team.
I work at an agency called User Intelligence, where I mostly do work in product strategy and design.
I am all the way from Amsterdam, The Netherlands
This session will be; a small journey through designing Drupal 8 and what is to come.
First of all,
- Designing in opensource, and Drupal – What is that like?
A lot of you imagine it like this?
Coding often happens before the design
There are a lot of different cooks in the kitchen
There is not a lot of incentive for making something beautiful or even usable.
And well, that’s true – it is incredibly hard.
But Drupal is also welcoming designers:
We have a UX team, with weekly meetings.
We have made significant progress since Drupal 6 on the usability front, with dedicated teams working on the user experience.
We are slowly closing the gap, on whats needed to have a process for a truly easy to use Drupal.
However, what does it mean to design in Drupal. Well let me paint you a picture.
We have about 3300 contributors to Drupal 8.
Of those, there are roughly 6 UX designers (research, design, product strategy, information architecture) – who by large contribute in their evenings/free-time.
In a system where its all about “scratching your own itch” – that’s a challenge.
Views in core, adding Symphony has a large following of contributors – making a button just a little bit better looking or more usable – ehh. Not so much.
To put it differently.
Which means that for each Drupal website, in 200k installs we have someone actively contributing to the Drupal core UX.
(pauze)
Not really uncommon in opensource!
Firefox, a successful product, opensource and still some 500 million users – only have 15 dedicated designers on staff for Mozilla.
Which means that per designer there are about 33 million users. Which would be crazy in any other application.
Drupal is itself a ecosystem.
Drupal its success is mostly about its modulair nature, the ability to plugin new functionality without killing the rest of the system.
Obviously creating a UI where everything is variable is vastly complex,
but to me that’s also the interesting part.
Take our tabs for example, in Seven they are optimised to have about 4/5 items – but a given module could have a perfectly reasonable usecase to have 8 navigation items on the same level.
In that case, they can either go the route of creating their own interface – or leveraging a less optimized UI component.
What do we do? Well we don’t want to get into the realm of Wordpress, in a sense where complex plugins provide a completely different UX to the main system – but also not the iPhone route where every part of the UX is tightly controlled.
As we come in:
The role of the UX designer in the Drupal project for a long time, has been to magically fix usability problems.
Why is that?
Hard to get enough tool knowledge to make informed design decisions ( it took me 6 months to REALLY understand Drupal)
Unfamiliar processes, you’d be surprised to know how many contributors in our community – have not really engaged in a design process before.
Well talking about process.
For a long time, our process was like the Sagrada Familia in Barcelona.
A massive undertaking to execute on a design, lasting several years (up to 5 for the last one).
This is flawed in many ways:
Everything is perfected.
We don’t receive any feedback about the usefulness before its hit the market.
It causes a lot of burn out, as you might need to carry your idea for 2/3 years to get it fully in.
So with Drupal 8 out, we changed our corse dramatically. With that greatly impacting our ability to design more properly.
------
Adopting modern software development methodologies that speed up the process from idea to final product.
With a set release cylce, able to change the design of major parts every 6 months.
With that – hopefully moving more and more away from a consensus based approach to an experiment based approach.
The idea being that we can run this loop of: Building, measuring and learning:
Validating ideas more early on with prototypes of appropriate fidelity for the hypothesis - actively avoiding, jumping straight into coding.
Increasing community involvement in the early stages of a concept, as you can show something tangible.
Adapting our release with “experimental modules” and learning from the market whether its useful and how “mature” it is or not.
It’s a big transformation, and its taking a while for mindset and processes to change.
We still quite often favor designing the minimal functional product.
Where from a product and ux standpoint, we should be building funtionality – that is across the curve, of functional, reliable, usable and desirable.
The outside in module, where we had the bare functionals in – we decided that it should also receive some of the UI polish to really get people excited about it.
I want to walk you through two projects that we did in Drupal 8, that had a big impact.
Relatively early on in the Drupal 8 release cycle we embarked on making Drupal 8 mobile friendly.
With the focus on making the content authoring experience as mobile friendly as possible.
Meaning that we would start with the “create content” screen and not the “editing a view”
This was a decision based, merely on the fact that for every Drupal website out there – its likely for there to be more people authoring content, than people building it.
For this I have to take you back to 2013, when Google Glass was still a thing.
When we started out – we took contrib as an example, and honestly Drupal 7 was and to a large extend still is a mess.
There are over a dozen modules, that allow you to detect devices, screen resolutions and integrate with applications on the iPhone and Android.
There are probably even far more themes, than I listed that are responsive and/or allow for a fine-tuned mobile experience.
One of the most promising ones out of this bunch, when it comes to the administrative experience is Drupad.
Drupad is an iOs app that basically, allows you to log into your Drupal (7) website.
It’s relatively focused on “Content administration” tasks but does allow you to do some of the more “site building” like tasks.
I think it’s a good first stab at what this experience could be like, but there is much more to it – especially for more “advanced” tasks and patterns.. (modules, fields, blocks)
So we took a look at how others do it.
And to be honest, when we started the process of making Drupal 8 mobile friendly – there were really only a few CMS’s that out of their core offer an mobile administrative UX.
Wordpress, at the time has tailored apps for each platform (iOS, Android, Windows, Blackberry)…..
HP WebOS…(tablet) was probably the most beautiful one at the time. Which obviously focuses on the heart the Wordpress experience, creating and editing posts.
It is primarily beautiful in the details – transitions between screens and quick access to editing, replying and creation of comments, pages and categories.. Really all those detailed interactions, that make this app good.
Squarespace, has a really focused content adminstration experience – but also unique one, its unlike a lot of mobile CMS that just try to replicate a native app feel.
The visual styling of the Squarespace app is in line with the desktop experience, that’s an important quality we wanted to pursue as well (there is no visual disconnect).
However, we didn't’t just look at other CMS’s…. There are lot of interesting innovations happening in the app space.
Applications like Gmail for your, make very efficient use of the screen – providing optimized views for specific content.
So with all that knowledge how did we approach it?
We spend 2-3 months diverging: sketching and gathering ideas on how to solve the key challenges; navigation (toolbar), but also in the admin (tabs, secondary tabs, listing pages), forms (text area’s, input forms, etc).
After this we converged: into a HTML prototype that you could walk through the admin.
Following this we took the ”Drupal” way of meticulously creating issues and solving each mobile challenge one by one – it took well over a year to change the UI.
The end result: Drupal 8 is mostly responsive.
Responsible toolbaar, that wraps vertically on your mobile phone – very similar to how many apps work.
Tables size appropiatly to screen width
Content creation, taxonomy pages, content listings.
And Yes, also Views – although I really won’t recommend using it on your phone.
That was back in 2013/2014, when the explosion of mobile meant we were close to ditching our laptops.
It didn’t quite turn out that way. But there is a lot more to be gained:
What about platforms such as a watch?
Are there tasks that one might do on a watch? Not yet, but is that because we simply havn’t found it yet – or is there no real use?
What I think is exciting is that…. Its all still moving….. ., we can leverage far more.
Browsers are allow more and more mobile features to be used as input methods (albeit a little slowly)
For example, capturing video, images and audio and directly placing it on your website – which is something we are working on.
Enough about mobile, I want to talk about the next thing
The Drupal 8 style guide.
This actually started here at BADCamp
I met with Ryan (designer from Canada), at BADCamp 2012 – and we basically spend a long lunch meeting discussing the visual design of Seven.
Style is a very personal thing, some people like round corners others don’t, some like a darker blue, others a light blue.
However a visual style has to be defining of Drupal, it has to be opionated, we can’t do design by committee.
Hard to really crowd-source the effort. Getting a singular vision on design, isn’t about getting more contributors.
But also:
It has to be completely accessible
Work across platforms/browsers.
Provide consistency across 35.000 modules
Not be SOO opinionated that people think it doesn’t fit with the site they are making
We spend about 3 months, in bi-weekly meetings between me Roy, and Ryan trying to define what is really identifying of Drupal and then brainstorming a lot, ping-ponging Photoshop designs. R5yn would then spend a lot of time, detailing and trying out a final version for each meeting.
Probably about 2 months diverging (Trying out ideas), looking at different parts of the interface – what the style should stretch to, and then about a month converging (getting dirty with the details, choosing)
I think we have about 5 major iterations, that we did.
Then a draft was then shown to the UX-team at our weekly IRC meetings.
Then we spend probably another month – writing up our ideas and overall rationale for the changes. Over D7 and D8, we learned a whole lot how to communicate rather drastic, but also very opionated parts like this.
So we know our post had to be exhaustive, clearly lay out all the rationale and graphic design principles and ideas we applied. It spawned a lot of discussion (but luckily, mostly constructive feedback)
A primarily light tone to appear bright and open
A neutral, desaturated color palette – no really flashy colours (a lot of systems moved that direction)
Aesthetically appealing, though minimal graphic style;
Its an EVOLUTION, Not a completely new one. The Seven theme is pretty good, not bad – principles weren’t bad. Its just oudated (the ones will become outdated again, 3 year cycles).
These were deliberate choices, we could have added “shiny” elements everywhere (icons, etc.) but we chose not too – as it doesn’t quite fit the Drupal brand.
Typography
More clearly distinguishable headings.
Rules on the white space that should surround pieces of text.
Not using a full black – on white, to ease the contrast and make it more legible.
A colour palette:
A primarily light tone to appear bright and open.
Keeping the Drupal “blue” which is a key brand colour – we could not just abandon (but we didn’t want it to be overwhelmingly blue, like Garland – anyone remembers that? – at one point we had 4 blue themes in core)
However white and burlap are used for most canvases.
Input forms
Slightly softer edges (2 border-radius)
A focus style.
A error style; with the error message close to the offending input.
Uploading files (this, after 3 years is still not in!)
What we want to do here, is actually make a component that allows you to drag and drop in a space.
With a progress bar by default.
Buttons!
Buttons should be clearly identifiable as such, with normal and primary actions inviting interaction.
Clear different styling for primary, secondary and delete actions.
One of the largest challenges was tabs:
The negative space created where two rounded tabs are joined can be a visual distraction. The primary rationale for this redesign is the large disconnect we created by the right alignment of tabs, which were often missed.
We moved them to the left, connected them.
Usability testing - very good improvement
We went through a large number of the elements we designed, using the WCAG contrast ratio’s.
Focusing on the primary elements, making sure we have crisp lines and sufficient contrast – but not to the extend that its jarring.
Contrast, isn’t just in colour its also that we are avoiding large areas of bold colour, and bold shapes are reserved for headings and action elements.
Not to many competing visual elements.
Two key parts of the design:
It’s more soft - soft edges, to communicate more friendly and natural design – rather than the more stark, metro – clear lines principle.
But also little or no ornamentation: no patterns, textures, gradients or shadow/emboss effects – except to communicate affordances/elements.
Generous and consistent use of whitespace – a whole lot more than we did previously, most notable in elements like the table. (a lot less cramped)
Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile.
Those are some of the key principles that we applied.
How do we document when and where to use UI components?
Interface guidelines offer advice on the best tools for the job, they help consistent experiences across systems that involve many small tasks and instances like apps.
Ubuntu’s design documentation sits on it’s own sub domain. It also provides documentation about the components, how they behave, and their purpose. Examples of it in use.
SHOW OF HANDS – who knows about our guidelines?
Drupal has UI standards!
Few people use it.
It actually has standards for most common form elements, text, navigational patterns – over 100 guidelines and common mistakes that module maintainers make.
It’s definitely not as well maintained and build as other style guides, but it’s a start.
Looking forward -> Seven is a beast – in terms of what it has to support and how much work it is to change it.
I hope to see:
Much more movement in contrib space (Morten will talk a bit about that)
Our core process enabling much more agility in redesigning pages.
What about Drupal 8?
I think one of the biggest mistakes in Drupal 7, is that we forgot to improve things for Site builders
- You in this room, and a large portion of our community haven't seen much UX change around concepts like blocks, menu’s, modules.
- If you look at competitors/friends in this part, we are really lacking behind (something not even contrib can solve).
We want these tools to be more fluid, and reactive.
Most of it still feels like 2009’
Hard transitions between screens
No real previews.
For the UX it’s not so much about transitioning to a new technology, as it is adopting a new paradigm of ”real-time” interactions – losing the disconnect between the front-end and back-end.
We are working on a new front-end theme
Bartik is out-dated, and we need a new theme
We are still looking for designers who are interested in being a part of this
We need your help!
Making this better, requires a lot of intelligent minds to come together.
If your interested in contributing, get in touch with me or find your way to the following site.