Ensuring the consistent adoption of brand elements across various channels can be a problem for many large organizations. As West Virginia University rolls out a new brand campaign our central Digital Services unit is sharing tools with our web development community to help them make this shift. In this talk you will learn how we’re using patterns to: * modernize and standardize toolsets * encourage broad and fast adoption of the new brand elements * make it easier to incorporate future changes to brand elements This process has not been without its challenges so expect many pitfalls and missteps to be shared.

1. I M P L E M E N T I N G
B R A N D PAT T E R N S
D AV E O L S E N , @ D M O L S E N
W E S T V I R G I N I A U N I V E R S I T Y

2. A G E N D A
ABOUT WVU & ITS BRAND
OUR SOLUTIONS
WHAT WE’D DO DIFFERENTLY

3. A B O U T W V U

4. A B O U T W V U
As a land-grant institution in the 21st
century, WVU will deliver high-quality
education, excel in discovery and
innovation, model a culture of diversity and
inclusion, promote health and vitality, and
build pathways for the exchange of
knowledge and opportunity between the
state, the nation, and the world.
“

5. A B O U T W V U
29,000 STUDENTS
2,000 FACULTY MEMBERS
2,900 STAFF MEMBERS
15 COLLEGES & SCHOOLS
193 DEGREE PROGRAMS

6. A B O U T U N I V E R S I T Y R E L AT I O N S
D I G I TA L S E R V I C E S

7. A B O U T
U R - D I G I TA L S E R V I C E S
14 STAFF MEMBERS
TECH & DESIGN SUPPORT FOR
COMMUNICATION EFFORTS

8. C O R E PAT T E R N S T E A M
Steven Spriggs,
Developer
Adam Glenn,
Designer

9. A B O U T W V U ’ S B R A N D

10. K E Y M E S S A G I N G

11. PA RT S O F W V U B R A N D
VOICE
IDENTITY
GRAPHIC LANGUAGE

12. B R A N D . W V U . E D U

16. T H E W E B WA S A N
A F T E RT H O U G H T

17. W E B O F F E R S U N I Q U E
O P P O R T U N I T I E S

19. T H E I N D I R E C T C A N
B E C O M E D I R E C T

20. W H Y R E F E R E N C E
W H E N Y O U C A N U S E ?

21. P O L I C Y V S T O O L S

22. E M B R A C E
D E V E L O P E R L A Z I N E S S

23. B U T D O I T
R E S P O N S I B LY !

24. D I S T R I B U T E D “ T E A M ”
O F F E R S U N I Q U E
C H A L L E N G E S

25. E S P E C I A L LY W H E N
E A C H WA N T S T O B E
U N I Q U E I N T H E I R
O W N WAY

26. E M B R A C E
T O O L S T R E N G T H S

27. T O O L S F T W !

28. S H A R I N G PA RT S
O F O U R B R A N D
STYLES
MARK-UP
CONTENT

29. W H O A R E W E
S H A R I N G W I T H ?

30. F R O N T- E N D &
B A C K - E N D D E V S

31. P L U S
W E B C O N T E N T
M A N A G E R S

32. A M B I T I O U S

33. T H R E E
C O R E S O L U T I O N S
( S O FA R )

34. S O L U T I O N # 1
W V U B R A N D
PAT T E R N S

35. S O L U T I O N # 2
PAT T E R N L I B R A RY

36. S O L U T I O N # 3
C O N T E N T
A G G R E G AT I O N

37. S O L U T I O N # 1
W V U B R A N D
PAT T E R N S

38. PAT T E R N S . W V U . E D U

39. G I T H U B . C O M / W V U W E B /
B R A N D - PAT T E R N S

40. V E RY Q U I C K
T U R N A R O U N D
afterthought, remember?

41. T I N Y B O O T S T R A P S

42. A U D I E N C E
FRONT-END DEVS USING OUR
IN-HOUSE CMS.

43. G O A L S
APPROVED TREATMENTS
INTEGRATED WITH CMS
OUT OF THE WAY
MODERNIZE TOOLCHAIN

44. C M S I N T E G R AT I O N

45. N A M E S PA C I N G

46. M O D E R N I Z AT I O N
WEB FONTS
SASS, BOURBON & NEAT
GULP/PREPROS/CODEKIT
VAGRANT

47. L E S S O N S L E A R N E D
MANUAL VERSIONING
MANUAL/THIN DOCS
TIGHTLY COUPLED TO TC & CMS
TOOLKIT CONFUSION

48. D E V E L O P E R S W I L L
U S E I T
the good news?

49. B U T M A R K - U P. A R G H !

50. S O L U T I O N # 2
PAT T E R N L I B R A RY

51. G I T H U B . C O M / W V U - PAT T E R N S

52. N O T PAT T E R N L A B

53. A U D I E N C E
FRONT-END & BACK-END DEVS

54. G O A L S
USE WHAT YOU NEED
VERSIONING FOR MARK-UP
TEMPLATE LANG FLEXIBILITY
DEPENDENCY SUPPORT

55. G R A N U L A R I T Y

56. V E R S I O N S & D E P E N D E N C I E S
W I T H B O W E R . J S O N

57. T E M P L AT E T Y P E S
Handlebars Radius

58. L E S S O N S L E A R N E D
DUPLICATE MARK-UP. ARGH!
ADVANCED USERS
RABBIT HOLE

59. S O L U T I O N # 3
C O N T E N T
A G G R E G AT I O N

60. G AT H E R C O N T E N T. C O M

61. A N I D E A V E RY M U C H
I N I T S I N FA N C Y

62. A U D I E N C E
WEB CONTENT MANAGERS

63. G O A L S
APPROVED CONTENT
INTEGRATED WITH CMS
STANDARDIZE IA
EXPAND TO PRINT/VIDEO

64. G AT H E R C O N T E N T. C O M

65. G AT H E R C O N T E N T. C O M

66. L E S S O N S L E A R N E D
ASSETS & LINKS: PROBLEMATIC
HOW FAR TO GO W/ 3RD PARTY
LACK OF RELATIONSHIPS

67. W H AT W E ’ D D O
D I F F E R E N T LY

68. I N S P I R AT I O N

69. I N S P I R AT I O N

70. I N S P I R AT I O N

71. T O O L I N G

72. S U M M I N G U P
IT’S MESSY & COMPLICATED
BUT PEOPLE WILL USE TOOLS

73. T H A N K S !

74. Q U E S T I O N S ?

75. I M P L E M E N T I N G
B R A N D PAT T E R N S
D AV E O L S E N , @ D M O L S E N
W E S T V I R G I N I A U N I V E R S I T Y