The accidental web designer - No Code Conf 2019 Workshop

J E N K R A M E R
H A R VA R D U N I V E R S I T Y E X T E N S I O N S C H O O L
@ J E N 4 W E B

@ J E N 4 W E B
Who is an Accidental Web Designer (AWD)?
What are the Four Stages of Competence, and what is
a mental model?
How does that impact resources for AWD’s?
What is the #1 resource AWD’s need more than any
other?

@ J E N 4 W E B
Accidental Web Designer:
Someone who never intended to be in this business
but is now part of it.

@ J E N 4 W E BC H E F, B Y M I C H E L A S I M O N C I N IP E R S O N A L F I N A N C E , B Y A L A N C L E AV E R

@ J E N 4 W E B
How hard could it be to make a website?

@ J E N 4 W E B
<script src=“js/hotstuff.min.js”></script>
<script>
alert('Hello, World!’);
</script>

@ J E N 4 W E B
A S I M P L E E X A M P L E
const Util = {
TRANSITION_END: 'bsTransitionEnd',
getUID(prefix) {
do {
// eslint-disable-next-line no-bitwise
prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix))
return prefix
},
getSelectorFromElement(element) {
let selector = element.getAttribute('data-target')
if (!selector) {
selector = element.getAttribute('href') || ''
selector = /^#[a-z]/i.test(selector) ? selector : null
}
return selector
},
reflow(element) {
return element.offsetHeight
},
triggerTransitionEnd(element) {
$(element).trigger(transition.end)
},
supportsTransitionEnd() {
return Boolean(transition)
},
typeCheckConfig(componentName, config, configTypes) {
for (const property in configTypes) {
if (configTypes.hasOwnProperty(property)) {
const expectedTypes = configTypes[property]
const value = config[property]
const valueType = value && isElement(value) ?
'element' : toType(value)
if (!new RegExp(expectedTypes).test(valueType)) {
throw new Error(
`${componentName.toUpperCase()}: ` +
`Option "${property}" provided type "${valueType}" ` +
`but expected type "${expectedTypes}".`)
}
}
}

@ J E N 4 W E B
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");+function(t){var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||
1==e[0]&&9==e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}(jQuery),function(){function t(t,e){if(!t)throw new ReferenceError("this hasn't been
initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function e(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a
function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function n(t,e)
{if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof
Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),
Object.defineProperty(t,i.key,i)}} return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(t){function e(t){return{}.toString.call(t).match(/s([a-zA-Z]+)/)[1].toLowerCase()}function n(t)
{return(t[0]||t).nodeType}function i(){return{bindType:a.end,delegateType:a.end,handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}}}function o(){if(window.QUnit)return!1;var
t=document.createElement("bootstrap");for(var e in l)if(void 0!==t.style[e])return{end:l[e]};return!1}function r(e){var n=this,i=!1;return t(this).one(h.TRANSITION_END,function(){i=!0}),setTimeout(function(){i||
h.triggerTransitionEnd(n)},e),this}function s(){a=o(),t.fn.emulateTransitionEnd=r,h.supportsTransitionEnd()&&(t.event.special[h.TRANSITION_END]=i())}var a=!
1,l={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},h={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do
t+=~~(1e6*Math.random());while(document.getElementById(t));return t},getSelectorFromElement:function(t){var e=t.getAttribute("data-target");return e||(e=t.getAttribute("href")||"",e=/^#[a-z]/i.test(e)?
e:null),e},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(e){t(e).trigger(a.end)},supportsTransitionEnd:function(){return Boolean(a)},typeCheckConfig:function(t,i,o){for(var r in
o)if(o.hasOwnProperty(r)){var s=o[r],a=i[r],l=a&&n(a)?"element":e(a);if(!new RegExp(s).test(l))throw new Error(t.toUpperCase()+': Option "'+r+'" provided type "'+l+'" but expected type "'+s+'".')}}};return s(),h}
(jQuery),s=(function(t){var e="alert",i=t.fn[e],s={DISMISS:'[data-dismiss="alert"]'},a={CLOSE:"close.bs.alert",CLOSED:"closed.bs.alert",CLICK_DATA_API:"click.bs.alert.data-
api"},l={ALERT:"alert",FADE:"fade",SHOW:"show"},h=function(){function e(t){n(this,e),this._element=t}return e.prototype.close=function(t){t=t||this._element;var
e=this._getRootElement(t);this._triggerCloseEvent(e).isDefaultPrevented()||this._removeElement(e)},e.prototype.dispose=function()
{t.removeData(this._element,"bs.alert"),this._element=null},e.prototype._getRootElement=function(e){var n=r.getSelectorFromElement(e),i=!1;return n&&(i=t(n)[0]),i||(i=t(e).closest("."+l.ALERT)
[0]),i},e.prototype._triggerCloseEvent=function(e){var n=t.Event(a.CLOSE);return t(e).trigger(n),n},e.prototype._removeElement=function(e){var n=this;if(t(e).removeClass(l.SHOW),!r.supportsTransitionEnd()||!
t(e).hasClass(l.FADE))return void this._destroyElement(e);t(e).one(r.TRANSITION_END,function(t){return n._destroyElement(e,t)}).emulateTransitionEnd(150)},e.prototype._destroyElement=function(e)
{t(e).detach().trigger(a.CLOSED).remove()},e._jQueryInterface=function(n){return this.each(function(){var i=t(this),o=i.data("bs.alert");o||(o=new e(this),i.data("bs.alert",o)),"close"===n&&o[n]
(this)})},e._handleDismiss=function(t){return function(e){e&&e.preventDefault(),t.close(this)}},o(e,null,[{key:"VERSION",get:function(){return"4.0.0-alpha.6"}}]),e}();return
t(document).on(a.CLICK_DATA_API,s.DISMISS,h._handleDismiss(new h)),t.fn[e]=h._jQueryInterface,t.fn[e].Constructor=h,t.fn[e].noConflict=function(){return t.fn[e]=i,h._jQueryInterface},h}(jQuery),function(t){var
e="button",i=t.fn[e],r={ACTIVE:"active",BUTTON:"btn",FOCUS:"focus"},s={DATA_TOGGLE_CARROT:'[data-toggle^="button"]',DATA_TOGGLE:'[data-
toggle="buttons"]',INPUT:"input",ACTIVE:".active",BUTTON:".btn"},a={CLICK_DATA_API:"click.bs.button.data-api",FOCUS_BLUR_DATA_API:"focus.bs.button.data-api blur.bs.button.data-api"},l=function(){function e(t)
{n(this,e),this._element=t}return e.prototype.toggle=function(){var e=!0,n=t(this._element).closest(s.DATA_TOGGLE)[0];if(n){var i=t(this._element).find(s.INPUT)[0];if(i)
{if("radio"===i.type)if(i.checked&&t(this._element).hasClass(r.ACTIVE))e=!1;else{var o=t(n).find(s.ACTIVE)[0];o&&t(o).removeClass(r.ACTIVE)}e&&(i.checked=!
t(this._element).hasClass(r.ACTIVE),t(i).trigger("change")),i.focus()}}this._element.setAttribute("aria-pressed",!
t(this._element).hasClass(r.ACTIVE)),e&&t(this._element).toggleClass(r.ACTIVE)},e.prototype.dispose=function(){t.removeData(this._element,"bs.button"),this._element=null},e._jQueryInterface=function(n){return
this.each(function(){var i=t(this).data("bs.button");i||(i=new e(this),t(this).data("bs.button",i)),"toggle"===n&&i[n]()})},o(e,null,[{key:"VERSION",get:function(){return"4.0.0-alpha.6"}}]),e}();return
t(document).on(a.CLICK_DATA_API,s.DATA_TOGGLE_CARROT,function(e){e.preventDefault();var n=e.target;t(n).hasClass(r.BUTTON)||
(n=t(n).closest(s.BUTTON)),l._jQueryInterface.call(t(n),"toggle")}).on(a.FOCUS_BLUR_DATA_API,s.DATA_TOGGLE_CARROT,function(e){t(t(e.target).closest(s.BUTTON)[0]).toggleClass(r.FOCUS,/^focus(in)?
$/.test(e.type))}),t.fn[e]=l._jQueryInterface,t.fn[e].Constructor=l,t.fn[e].noConflict=function(){return t.fn[e]=i,l._jQueryInterface},l}(jQuery),function(t){var
e="carousel",s="bs.carousel",a="."+s,l=t.fn[e],h={interval:5e3,keyboard:!0,slide:!1,pause:"hover",wrap:!0},c={interval:"(number|boolean)",keyboard:"boolean",slide:"(boolean|string)",pause:"(string|
boolean)",wrap:"boolean"},u={NEXT:"next",PREV:"prev",LEFT:"left",RIGHT:"right"},d={SLIDE:"slide"+a,SLID:"slid"+a,KEYDOWN:"keydown"+a,MOUSEENTER:"mouseenter"+a,MOUSELEAVE:"mouseleave"+a,LOAD_DATA_API:"load.bs.carousel.da
ta-api",CLICK_DATA_API:"click.bs.carousel.data-api"},f={CAROUSEL:"carousel",ACTIVE:"active",SLIDE:"slide",RIGHT:"carousel-item-right",LEFT:"carousel-item-left",NEXT:"carousel-item-next",PREV:"carousel-item-
prev",ITEM:"carousel-item"},_={ACTIVE:".active",ACTIVE_ITEM:".active.carousel-item",ITEM:".carousel-item",NEXT_PREV:".carousel-item-next, .carousel-item-prev",INDICATORS:".carousel-indicators",DATA_SLIDE:"[data-slide],
[data-slide-to]",DATA_RIDE:'[data-ride="carousel"]'},g=function(){function l(e,i){n(this,l),this._items=null,this._interval=null,this._activeElement=null,this._isPaused=!1,this._isSliding=!
1,this._config=this._getConfig(i),this._element=t(e)[0],this._indicatorsElement=t(this._element).find(_.INDICATORS)[0],this._addEventListeners()}return l.prototype.next=function(){if(this._isSliding)throw new
Error("Carousel is sliding");this._slide(u.NEXT)},l.prototype.nextWhenVisible=function(){document.hidden||this.next()},l.prototype.prev=function(){if(this._isSliding)throw new Error("Carousel is
sliding");this._slide(u.PREV)},l.prototype.pause=function(e){e||(this._isPaused=!0),t(this._element).find(_.NEXT_PREV)[0]&&r.supportsTransitionEnd()&&(r.triggerTransitionEnd(this._element),this.cycle(!
0)),clearInterval(this._interval),this._interval=null},l.prototype.cycle=function(t){t||(this._isPaused=!1),this._interval&&(clearInterval(this._interval),this._interval=null),this._config.interval&&!
this._isPaused&&(this._interval=setInterval((document.visibilityState?this.nextWhenVisible:this.next).bind(this),this._config.interval))},l.prototype.to=function(e){var
n=this;this._activeElement=t(this._element).find(_.ACTIVE_ITEM)[0];var i=this._getItemIndex(this._activeElement);if(!(e>this._items.length-1||e<0)){if(this._isSliding)return void t(this._element).one(d.SLID,function()
{return n.to(e)});if(i===e)return this.pause(),void this.cycle();var o=e>i?u.NEXT:u.PREV;this._slide(o,this._items[e])}},l.prototype.dispose=function()
{t(this._element).off(a),t.removeData(this._element,s),this._items=null,this._config=null,this._element=null,this._interval=null,this._isPaused=null,this._isSliding=null,this._activeElement=null,this._indicatorsElement=
null},l.prototype._getConfig=function(n){return n=t.extend({},h,n),r.typeCheckConfig(e,n,c),n},l.prototype._addEventListeners=function(){var e=this;this._config.keyboard&&t(this._element).on(d.KEYDOWN,function(t){return
e._keydown(t)}),"hover"!==this._config.pause||"ontouchstart"in document.documentElement||t(this._element).on(d.MOUSEENTER,function(t){return e.pause(t)}).on(d.MOUSELEAVE,function(t){return
e.cycle(t)})},l.prototype._keydown=function(t){if(!/input|textarea/i.test(t.target.tagName))switch(t.which){case 37:t.preventDefault(),this.prev();break;case
39:t.preventDefault(),this.next();break;default:return}},l.prototype._getItemIndex=function(e){return
this._items=t.makeArray(t(e).parent().find(_.ITEM)),this._items.indexOf(e)},l.prototype._getItemByDirection=function(t,e){var n=t===u.NEXT,i=t===u.PREV,o=this._getItemIndex(e),r=this._items.length-1;if((i&&0===o||
n&&o===r)&&!this._config.wrap)return e;var s=t===u.PREV?-1:1,a=(o+s)%this._items.length;return a===-1?this._items[this._items.length-1]:this._items[a]},l.prototype._triggerSlideEvent=function(e,n){var i=t.Event(d.SLIDE,
{relatedTarget:e,direction:n});return t(this._element).trigger(i),i},l.prototype._setActiveIndicatorElement=function(e){if(this._indicatorsElement){t(this._indicatorsElement).find(_.ACTIVE).removeClass(f.ACTIVE);var
n=this._indicatorsElement.children[this._getItemIndex(e)];n&&t(n).addClass(f.ACTIVE)}},l.prototype._slide=function(e,n){var i=this,o=t(this._element).find(_.ACTIVE_ITEM)[0],s=n||
o&&this._getItemByDirection(e,o),a=Boolean(this._interval),l=void 0,h=void 0,c=void 0;if(e===u.NEXT?(l=f.LEFT,h=f.NEXT,c=u.LEFT):(l=f.RIGHT,h=f.PREV,c=u.RIGHT),s&&t(s).hasClass(f.ACTIVE))return void(this._isSliding=!
1);if(!this._triggerSlideEvent(s,c).isDefaultPrevented()&&o&&s){this._isSliding=!0,a&&this.pause(),this._setActiveIndicatorElement(s);var g=t.Event(d.SLID,
{relatedTarget:s,direction:c});r.supportsTransitionEnd()&&t(this._element).hasClass(f.SLIDE)?(t(s).addClass(h),r.reflow(s),t(o).addClass(l),t(s).addClass(l),t(o).one(r.TRANSITION_END,function(){t(s).removeClass(l+"
"+h).addClass(f.ACTIVE),t(o).removeClass(f.ACTIVE+" "+h+" "+l),i._isSliding=!1,setTimeout(function(){return t(i._element).trigger(g)},0)}).emulateTransitionEnd(600)):
(t(o).removeClass(f.ACTIVE),t(s).addClass(f.ACTIVE),this._isSliding=!1,t(this._element).trigger(g)),a&&this.cycle()}},l._jQueryInterface=function(e){return this.each(function(){var
n=t(this).data(s),o=t.extend({},h,t(this).data());"object"===(void 0===e?"undefined":i(e))&&t.extend(o,e);var r="string"==typeof e?e:o.slide;if(n||(n=new l(this,o),t(this).data(s,n)),"number"==typeof e)n.to(e);else

@ J E N 4 W E B
How do you feel?

@ J E N 4 W E B
This is going to
be harder than I
thought
I have to
concentrate but
I can do this
How hard could
it be?
This is easy and
I’m good at it
Conscious
Unconscious
Incompetence Competence

@ J E N 4 W E B
Why did you think it was easy to make a website
the first time you tried?

@ J E N 4 W E B
– J A K O B N I E L S E N
A mental model is what the user believes about
the system at hand.

@ J E N 4 W E B
– J A K O B N I E L S E N
Further, one of usability's big dilemmas is the
common gap between designers' and users'
mental models.

@ J E N 4 W E B
What is the mental model for an accidental web
designer, building a website for the first time?

@ J E N 4 W E B
AT T R I B U T I O N

@ J E N 4 W E B
M S W O R D T E M P L AT E

@ J E N 4 W E B

NOVEMBER 15
FLU SHOT FEST
Don't delay -- get your flu shot today!
To get started right away, just tap any placeholder text (such as
this) and start typing to replace it with your own. Want to insert a
picture from your files or add a shape, text box, or table? You got it!
On the Insert tab of the ribbon, just tap the option you need.

FREE LOLLIPOPS!

TAKES 5 MINUTES!

A SEASON OF
PROTECTION!

$20 COPAY

9 AM - 5 PM
OR UNTIL WE RUN
OUT
Or
orOr

YOUR COMPANY

6th floor, follow the signs
flu.example.com

P H O T O C R E D I T

@ J E N 4 W E B
Choosing a theme is a crippling moment for many
accidental web designers.
In part, this is because they should not start with a theme.

@ J E N 4 W E B
S T O RY T E L L I N G
• Identification of hero, villain,
and guide/helper
• Writing clear and scannable
content
• Choosing the right medium
for the message
• Creating clear calls to action
• This is the user experience
(UX) phase of site building

@ J E N 4 W E B
T E C H N O L O G Y
• Technology supports the
story
• Fill-in-the-blank websites
• Less jargon
• Terminology should reflect
user’s mental model
I M A G E C R E D I T

@ J E N 4 W E B
- M E R R I A M W E B S T E R
Framework: a basic conceptual structure
(as of ideas)

@ J E N 4 W E B
D AV E R A M S E Y ’ S
B A B Y S T E P S

@ J E N 4 W E B
T H E E L E M E N T S O F
U S E R E X P E R I E N C E
J E S S E J A M E S
G A R R E T T
1 S T E D 2 0 0 2
2 N D E D 2 0 1 0
R E A D C H A P T E R 2

@ J E N 4 W E B
Strategy
What do we want to get out of the site?
What do our users want?
What is the best way to serve site owner and users?
How do we measure success?

@ J E N 4 W E B
Scope
What features and functionality do we need?
What might we need in the future?

@ J E N 4 W E B
Structure
What pages will our site include?
What written content do we have, and what do we need
to generate?
What photos and/or video will we include?

@ J E N 4 W E B
Skeleton
Wireframe software:
Balsamiq
Moqups
Invision
Sketch
Adobe XD

@ J E N 4 W E B
Draw in PowerPoint
or Word
or Google Docs

@ J E N 4 W E BI M A G E C R E D I T
Draw on paper or whiteboard

@ J E N 4 W E B
Surface
Now that you have a picture in your head and
content defined…
Now pick your theme.

@ J E N 4 W E B
D O N A L D M I L L E R S T O RY B R A N D B R A N D S C R I P T

@ J E N 4 W E B
• Villain
• Hero
• Guide/helper
• What role does your
organization play?

@ J E N 4 W E B
Let’s talk about dog and cat food.
What are discerning pet owners concerned about
when buying food?

@ J E N 4 W E B
• Compare two sites:
• https://www.castorpolluxpet.com/
• https://kohapet.com/
• Which would you buy pet food from, based on the
home page only? And why?

@ J E N 4 W E B
W W W. C A S T O R P O L L U X P E T. C O M

@ J E N 4 W E B
W W W. K O H A P E T. C O M

@ J E N 4 W E B
We’re just beginning to develop effective no-code tools.
But great websites are more than code.
We need more storytelling frameworks and education.

@ J E N 4 W E BS T O RY B R A N D

Jen Kramer
Watertown, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen
S L I D E S AVA I L A B L E AT
W W W. S L I D E S H A R E . N E T / J E N 4 W E B

The accidental web designer - No Code Conf 2019 Workshop

More Related Content

Similar to The accidental web designer - No Code Conf 2019 Workshop (20)

More from Webflow (20)

Recently uploaded (20)

The accidental web designer - No Code Conf 2019 Workshop