Talk about the design process for the Views 2 user interface. Views 2 is a query builder for content display in the Drupal CMS. Talk was presented at Drupalcon 2008 in Szeged, Hungary.
The Design Process - we might be starting from Ideation and jumping towards Visual Design. The in-betweens are solid foundations that make products adaptive to different goals and requirements - whether technical or business in nature.
This overview details the UI/UX design process at our company, Propeller Labs. We pride ourselves on partnering with leading companies to create digital solutions. Innovative design, through effective process, has positioned us to become a leading partner in building digital products.
It has Modern UI /UX Design Process. Like from
- Hand-holding customers for every feature
- Identifying the key design challenge
- Stepping into the shoes of the user
- Designing the Information Architecture and wireframing
- Nailing the visual design
The Design Process - we might be starting from Ideation and jumping towards Visual Design. The in-betweens are solid foundations that make products adaptive to different goals and requirements - whether technical or business in nature.
This overview details the UI/UX design process at our company, Propeller Labs. We pride ourselves on partnering with leading companies to create digital solutions. Innovative design, through effective process, has positioned us to become a leading partner in building digital products.
It has Modern UI /UX Design Process. Like from
- Hand-holding customers for every feature
- Identifying the key design challenge
- Stepping into the shoes of the user
- Designing the Information Architecture and wireframing
- Nailing the visual design
These slides are from a 2 hour presentation called Design for Developers.
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
A fun look at how to extend WordPress with class and consistency. Challenges plug-in and theme authors to apply a new, rigorous philosophy to their work: what would core do?
Future proofing design work with Web componentsbtopro
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
Trust the power of Plone and build the trust in customers, colleagues and friends. Plone is, for many aspects, such a good product that it fails sometimes in presenting itself right. We can do a better job, of course. The talk will present common communication/sales problems and practices to try to solve some of these problems; through examples and case studies it will try to give arguments and ideas to those willing to spread the Plone word.
Talk was held during the PHP Conference in Barcelona (27.09.2008), which was also attended by Derick Rethans, Scott MacVicar and other international speakers. It shows the advantages of using a php framework vs. spaghetti code for web application development in an agile manner.
A simple example based on the Akelos PHP Framework shows you how to implement a fulltext search in less than 20 minutes.
Project EdTechJoker, laid out in slides. A demo was given as prt of this presentation being delivered at Domains 2019.
I need you to turn up the temperature on the edtech market through the adoption of the webcomponent standard. Together, we can eliminate corrupt vendors from our space and unleash creativity with higher accessibility and user experience then they can.
More From the Less of Design. Game and Level Design with the 80/20 Principle - by Ivan Beram. The updated and extended presentation delves into the use of this principle, or an expression of it, within the context of game development in way of game and level design; using the author\'s experiences working in the industry, with examples taken from his own CS map and also from credited titles: Far Cry and Fallout Tactics.
Plone through-the-web development is now powerful and allows complex sites to be created by learning a few simple rules. This could make Plone the most popular CMS on the planet.
You're organised, you love spreadsheets, you're a great cheerleader, you handle a backlog with superhero skills, and now you're faced with managing a Drupal project and everything just feels foreign. It's not you, it's Drupal. The mix of site building, front end development, backend development, and over 20,000 contributed modules makes project management for Drupal exceptionally frustrating for people who've not worked with Drupal before.
This session will cover:
- the basic Drupal development workflow (from a developer's perspective, but without using developer jargon)
writing useful tickets which developers can accomplish
- estimation tips for multi-discipline tickets (design / back end / front end)
- ideal team structures -- and what to do if you can't get them
Updated from DrupalCamp London to include the truisms I've learned about being a first-time project manager.
These slides are from a 2 hour presentation called Design for Developers.
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
A fun look at how to extend WordPress with class and consistency. Challenges plug-in and theme authors to apply a new, rigorous philosophy to their work: what would core do?
Future proofing design work with Web componentsbtopro
Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house).
As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them.
Talk structure:
What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility
Examples of who has adopted them and what they doing with them
Community resources like polymer slack, webcomponents, and open-wc.org
Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins
Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio
How teams can leverage web components across projects
Where Drupal 6,7,8,9 fit into the future with web components
Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management
Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!
Trust the power of Plone and build the trust in customers, colleagues and friends. Plone is, for many aspects, such a good product that it fails sometimes in presenting itself right. We can do a better job, of course. The talk will present common communication/sales problems and practices to try to solve some of these problems; through examples and case studies it will try to give arguments and ideas to those willing to spread the Plone word.
Talk was held during the PHP Conference in Barcelona (27.09.2008), which was also attended by Derick Rethans, Scott MacVicar and other international speakers. It shows the advantages of using a php framework vs. spaghetti code for web application development in an agile manner.
A simple example based on the Akelos PHP Framework shows you how to implement a fulltext search in less than 20 minutes.
Project EdTechJoker, laid out in slides. A demo was given as prt of this presentation being delivered at Domains 2019.
I need you to turn up the temperature on the edtech market through the adoption of the webcomponent standard. Together, we can eliminate corrupt vendors from our space and unleash creativity with higher accessibility and user experience then they can.
More From the Less of Design. Game and Level Design with the 80/20 Principle - by Ivan Beram. The updated and extended presentation delves into the use of this principle, or an expression of it, within the context of game development in way of game and level design; using the author\'s experiences working in the industry, with examples taken from his own CS map and also from credited titles: Far Cry and Fallout Tactics.
Plone through-the-web development is now powerful and allows complex sites to be created by learning a few simple rules. This could make Plone the most popular CMS on the planet.
You're organised, you love spreadsheets, you're a great cheerleader, you handle a backlog with superhero skills, and now you're faced with managing a Drupal project and everything just feels foreign. It's not you, it's Drupal. The mix of site building, front end development, backend development, and over 20,000 contributed modules makes project management for Drupal exceptionally frustrating for people who've not worked with Drupal before.
This session will cover:
- the basic Drupal development workflow (from a developer's perspective, but without using developer jargon)
writing useful tickets which developers can accomplish
- estimation tips for multi-discipline tickets (design / back end / front end)
- ideal team structures -- and what to do if you can't get them
Updated from DrupalCamp London to include the truisms I've learned about being a first-time project manager.
A short talk given at Drupalsummit in Genk, about the importance of giving people a good initial experience in using Drupal. With 3 suggestions for a more focussed and useful install profile.
There are more interface patterns available to Drupal module developers then ever before. Drupal has standars for writing code. But what about the interface?
Tabs, accordions, fieldsets, overlays, hover links etc. When to use which?
Join Bojhan Somers and Roy Scholten from the UX-Team for a tour of the available options and some advice on when to use each one. Consider this talk the kick-off for getting our ui-pattern library in shape. It's been asked for a lot.
We will cover the following topics :
* UI-Pattrens
* Best practices (designing for context)
* Users mental model vs. Drupal's implementation model
* Experiences from the field
With the Drupal 7 release on the horizon and the excellent D7CX initiative, *now* is the time to take advantage of these new patterns.
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.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
31. “I havent asked merlin
thoroughly enough about
his starting points really.”
“I would say grokking
merlin's intentions is step one.
Otherwise we are designing
the UI in a fog.”
32.
33. What do I want to display?
How do I want to display it?
51. What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
52. “… a system where the base edit page is
●
basically not editable, but gives you a summary of
everything on the view and then leads you to
separate pages where you can edit these
items…”
77. Click to add title
Views 2
Designing the user interface
Roy Scholten
1
78. Click to add title
hi
2
Hello, my name is Roy Scholten.
I am an interaction designer.
I like to make drawings.
I create animations for fun and learning.
I use Drupal to build my websites.
I help building Drupal through design, copy writing
and improving the user experience.
I don't write a single line of PHP.
(and I'd like to keep it that way)
79. Click to add title
Views
.
3
Question for the audience: anybody not familiar with
the views module at all?
The basic idea is this:
You use views for creating and presenting lists of
your content, like
“10 latest blogposts”,
“5 top rated pictures” or
“all t-shirts available in xl, blue and in stock”.
A simple but very powerful concept, because indeed,
a lot of things on the web are basically lists.
81. Click to add title
Views 2
have you heard of it?
5
Views 1, already a very powerful and indespensible
tool, right?
82. Click to add title
Views 2
have you heard of it?
6
Well, for Drupal 6, views was rewritten from scratch
to basically “make it extensible into every possible
direction.” Even more flexibility, even more settings,
even more complex…
83. Click to add title
(views 1)
7
This is not intended to be The Roadmap for The Way
to do all of our user interface design, but more of a
case study for a process that needs as much
attention as possible.
I am NOT an expert in this, nor am I the one who
came up with all this. Lots of people contibuted. But
I was involved from beginning to end, so I can give
you an overview of the process from my
perspective.
This is that overview.
84. Click to add title
Click to add text
8
I'm sure a lot of you do not need reminding of htis,
but still:
This is what the user interface for creating a new
view in Views 1 looks like with all fieldsets
expanded.
85. Click to add text
9
Views developer merlinofchaos realized this
approach would not hold for Views 2.
87. Click to add title
ping
11
I don't know what I did that made merlin pick me to
ask for some ideas. But he did.
88. Click to add title
Click to add text
12
merlin invites yoroy to have a look at his first
mockup.
Arguments, Relationships, Displays, Overrides?
89. Click to add title
Huh?
13
Still, I could see that this was indeed a lot more
complex then views1
With only a vague idea of the new concept for views,
I started with looking at other software, making
screengrabs.
>>
90. Inventory
Click to add text
14
I dug into the not so pretty parts of the os x system
preferences…
91. Click to add title
Click to add text
15
Ah, modals (or popups, or what is called a sheet in
this specific example)
The ones you lock you into doing something in that
screen or cancel to leave that screen…
92. Click to add title
Click to add text
16
Oh, I liked this one from the start as well,
the upperpart is human readable, formatted as
spoken language.
Interesting…
93. Click to add title
Click to add text
17
I find myself looking more at desktop software then
other CMS's.
To me Drupal maps better onto the concept of an
operating system as a whole.
(For example the multisite feature)
Pathfinder is a desktop replacement for OS X, full of
settings and options and just a whole lot of
clickable bits very close to another.
94. Click to add title
Click to add text
18
But, my mental model voor views 1 has always been
“views is to nodes as smart playlist is to tunes”
96. Click to add title
round 1: groups.drupal.org
20
So with that, I quickly threw out a couple of ideas.
I posted these to g.d.o. solliciting feedback
97. Click to add title
Click to add an outline
●
21
Hmm, maybe we split the process up in a few steps,
something like in panels…
99. Click to add title
Click to add text
23
Multiple displays as tabs along the top
100. Click to add title
Click to add text
24
hey look, vertical tabs! But used for another subset of
the functionality here.
101. Click to add title
Click to add text
25
Or maybe a second row of horizontal tabs?
102. Click to add title
Click to add text
26
Enter couzinhub. Based on what he could learn from
the thread alone, he quickly responded with a lot of
sexy-looking wireframes.
103. Click to add title
Click to add text
27
But before you know it, people are focussing on
some misplaced icon…
Also… >>
104. Click to add title
Click to add text
28
But, most of the wireframes did not reflect the real
new features…
105. Click to add title
“Guys, you're all redesigning
Views1 here…”
29
Merlin gave an update on the important new
concepts in Views2:
- not nodes-only anymore
- multiple displays, multiples of each display
- different fields, settings, overrides…
This was very important for the thread. Most of this
had been discussed in IRC, but that info was not
available in the discussion on g.d.o.
106. Click to add title
ping
30
Meanwhile in IRC, alpritt connected with me. He was
curious about the wireframes and he had some
questions.
I soon found out I couldn't answer most of them…
107. Click to add title
“I havent asked merlin
thoroughly enough about
his starting points really.”
“I would say grokking
merlin's intentions is step one.
Otherwise we are designing
the UI in a fog.”
31
We went through merlin's mockup and his blogpost
outlining his initial plans.
This became the first of a series of late, late night
talks…
108. Click to add title
Click to add text
32
I showed alpritt my smart playlist analogy.
Again, views is to nodes as smart playlist is to tunes.
Talking this through, we ended up with chopping up
the main task of creating views along two
questions:
109. Click to add title
What do I want to display?
How do I want to display it?
33
Yes, isn't that mindblowing huh?
But it's exaclty these kind of simple
statements/questions that are very helpful
indicators for the organisation of a user interface.
It was really exciting to me, and I was very glad alpritt
was there to brainstorm ideas with.
110. Click to add title
round 2:
Sentences
(or: “What is really going on here?”)
34
It took some time before we decided to give it another
go and present our ideas-so-far to merlin
I had saved or initial chat, merlin read it and together
we talked things through.
111. Click to add title
extasdg
●
35
We realized we should really focus on understanding
merlin's plans well enough to be able to explain it in
simple language.
112. Click to add title
What do you want a list of,
36
After a few very late nights (damn timezones!) of
talking with merlinofchaos, this is what we cam up
with
113. Click to add title
What do you want a list of,
Where do you want to show it,
37
114. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
38
115. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
39
We summarized this on g.d.o. and this already made
things a lot clearer to people.
but more importantly,
the feedback we got showed us that we needed to
explain some more about the hierachy that is
implied by those four questions.
116. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
40
There was no way I could ever put that in words.
So I made this.
117. Click to add title
Click to add text
41
So I made this.
Now, this is a very schematic diagram and it doesn't
even propose a user interface at all, but it explains
a lot about how the different parts are related to
eachother. This would have been very difficult to
put in words. at least for me!
The four sentences about what where how and
format plus this diagram were the two big things we
learned and got a grip on in this first phase.
118. Click to add title
What do you want a list of,
42
So we started at the beginning, looking at the 'What'
part first.
Views must know what kind of things it will show a list
of. Because this defines which options will be
available later on.
Basically a technical requirement.
119. Click to add title
Click to add an outline
●
43
Inspired by our little sentences, I made this very
compact wireframe for creating a new view through
just one form-sentence.
This isn't used in the final version, but I think it's still
an interesting concept. Very compact and very
clearly communicating the idea behind views in
general.
Human readable playlist creation…
120. Click to add title
Click to add an outline
●
44
So, answering the 'what' was the easy part.
Creating a new view is a seperate step in the ui, the
next ones were a lot more complex so we moved
on…
121. Click to add title
What
Where do you want to show it,
45
Next up: 'Where'. meaning the different displays of a
view: where do you want to show it in your site: as
a block, as a page, as an rss feed etc.?
For this level we soon agreed on using vertical tabs
along the left side.
This list can grow big, horizontal tabs would be too
limiting for that. stacking this vertically just made
sense.
122. Click to add title
Click to add an outline
●
46
123. Click to add title
Click to add an outline
●
47
124. Click to add title
Click to add an outline
●
48
In v2, there's this concept of 'default' view.
it's the basic view that contains the defaults for the
settings you want to use.
Later in the process this default view was added as a
seperate view that has no display itself, instead you
must add at least one display to it to get a view you
could actually show.
This was another technical choice merlin had to
make.
But at this moment the default was still married to
one of the actual displays.
125. Click to add title
Click to add an outline
●
49
126. Click to add title
Click to add an outline
●
50
So vertical tabs for the displays.
Now on to the right part of those tabs: the actual
groups of settings.
127. Click to add title
What do you want a list of,
Where do you want to show it,
How to present it, using which
Format for each item?
51
These next two questions are closely related and had
to be considered as a whole
The first one defines the format of your list (list,
teaserlist, table…)
The second one defines the format for each item in
your view. (teaser, custom fields, full node…)
And because of the hierachy, the first one defines
which settings will be available on the 'per-item'
layer.
We had progressed nicely so far. But now we were
only at the start of the biggest ui problem: How to
provide quick access to all these configuration
options in a compact space, presented in a more
meaningful way then just link-dumping abstract
labels?
128. Click to add title
“… a system where the base edit page is
●
basically not editable, but gives you a summary of
everything on the view and then leads you to
separate pages where you can edit these
items…”
52
129. Click to add title
Click to add an outline
●
53
And it was Alpritt who misunderstood this prototype
by merlin in a very creative way.
130. Click to add title
Summaries
54
That word summaries a click somewhere in Alpritt's
brain linking back to another discussion about
'summaries' he'd had elsewhere.
He sketched out his interpretation and it was this
wireframe that provided the framework for the next
part of the ui problem:
131. Click to add title
Click to add text
55
summaries. add minimal yet useful info about the
current value(s) for each setting.
You click a setting to open it's form below.
It was this wireframe that gave merlin a solid direction
for how to build the interface:
item-summaries above
edit item-settings below
(notice how the displays are little stacks along the top
132. Click to add title
Click to add text
56
There was some more discussion about seperating
global settings from display-specific ones
In the end merlin just said no to this :-)
This is around the same time that the abstract
default view was introduced as the first vertical tab
in the list of displays.
134. Click to add title
Click to add text
58
Merlin returns with a working prototype.
And really, from then on it was mostly finetuning the
layout and the design.
You can blame me for the way it looks now. I know
it's hugely inconsisten with the rest of Drupal. So, I
just tried to keep it as plain as possible.
135. Click to add title
Click to add text
59
I made a Garland inspired design, which was nice for
demo purposes of course, but not very friendly
towards other themes.
I also made some icons for the settings that had yet
another level of their own for configuration options.
136. Click to add title
Click to add text
60
So there it is, this is how the views ui was born.
For me it was very exciting but also kinda scary,
messing around with one of the most important
modules. But if felt really good to actually help out.
Props to merlin for asking for input and actually using
it as well!
139. Click to add title
Click to add an outline
●
63
140. Click to add title
●
Let's do this more
●
often…
64
141. Tips
Ask for input
●
65
merlin asking for input was key and it was what made
this process even possible at all.
142. Tips
Design before coding
●
66
Design before code. We the uninitiated could ask our
questions and give our input at the moment the
canvas for the gui was still blank.
143. Tips
Wireframes
●
67
wireframes, not mockups. avoid 'designing' them but
focus on conceptual sketches. or else people will
start critiqueing the design and lose sight of the
concept.
Images are a shared vocabulary between developers
and designers and can put a lot of information in a
small space and remove some of the jargon.
144. Tips
Usability Testing Suite
●
(d.o/project/uts)
●
68
We happily went along not testing anything at all.
There's this very cool GSOC project that aims to be a
simple online testing tool that can show you where
people click when they try to accomplish a
predefined task.
It will show where people get lost and thus tell you
which part of your interface is not communicating
itself clearly enough yet.
146. Click to add title
●
discuss…
●
70
How can we make it possible for developers to
incorporate a design phase?
What would you like to see?
How would you like to be helped?
147. Click to add title
●
●
merlinofchaos yoroy alpritt couzinhub
●
●
71
150. Click to add title
Click to add an outline
●
74
Oh, and I kind of did the same thing again recently,
be it on a much smaller scope:
Merlin was annotating a screenshot of the ui for the
views help docs.
This is his version.
151. Click to add title
Click to add an outline
●
75
This is mine.
152. Click to add title
Views 2
Designing the user interface
Roy Scholten
http://www.yoroy.com
76