Professional Web Design Process Explained in 5 minutes — Transcript

Full transcript

1. 0:00on today's video i'll show you the exact
2. 0:01step-by-step start to finish process
3. 0:03i used to design this website for my
4. 0:05client w this is a project
5. 0:07that the web design and brand was ten
6. 0:09thousand dollar and i'll show you
7. 0:11exactly how we did this
8. 0:12in under five minutes let's rock and
9. 0:14roll
10. 0:23[Music]
11. 0:24hey everybody what is up my name is ron
12. 0:26segal i'm a designer and i know you
13. 0:28don't have a lot of time so that's why
14. 0:29i'll try to compress the whole process
15. 0:31that actually took a couple of months
16. 0:33into under five minutes let me start the
17. 0:35clock
18. 0:36by the way if you want to know more
19. 0:37about this process we actually created a
20. 0:39full-on documentary about this process
21. 0:41for the website of w so check the links
22. 0:44below if you want to see the full on
23. 0:45documentary but now the clock is running
24. 0:47so let's get started the first step
25. 0:49in this process like almost every
26. 0:51process for every website or a project
27. 0:53that we do for clients
28. 0:54started off with a strategy session the
29. 0:57strategy session is where we try to get
30. 0:58to know the clients we're trying to
31. 1:00align
32. 1:00who they are what they want to achieve
33. 1:02and how to express this
34. 1:04visually on their website or on their
35. 1:06brand it goes on to
36. 1:08cover things like who they are what
37. 1:10their story and missions
38. 1:11are what what makes them unique we're
39. 1:13using the online statement to understand
40. 1:15how they are different
41. 1:16we're trying to understand who their
42. 1:18target audience is
43. 1:19what their offering is how they are
44. 1:21trying to communicate
45. 1:23and just try to understand who they are
46. 1:25and cover all
47. 1:26things they want to communicate so
48. 1:28that's basically just trying to
49. 1:29understand who they are as a brand
50. 1:32then we spent the whole day doing this
51. 1:34sprouted strategy session
52. 1:35to get to know them and their audience
53. 1:37and then we did a whole
54. 1:39separate session just for the website
55. 1:42itself
56. 1:42so in that session we basically cover
57. 1:45what are the goals of the website what
58. 1:46do they want to achieve with this
59. 1:48specific website and whether the people
60. 1:49that are actually going to visit
61. 1:51this website are actually want to
62. 1:53achieve so what do we need to show them
63. 1:55we then go ahead and try to brainstorm
64. 1:57what content should be on the website
65. 1:59so i came in with my suggestions about
66. 2:02what should be on the website but of
67. 2:03course they have their own needs and
68. 2:05ideas
69. 2:06and so this is kind of a brainstorming
70. 2:07session about everything that needs to
71. 2:09go
72. 2:09inside the website the second thing is
73. 2:11we're trying to get some alignment about
74. 2:13what do they expect in terms of look and
75. 2:16feel how do they want their website to
76. 2:18look like
77. 2:18so again i came in with some references
78. 2:21of things that i thought
79. 2:23can be a good fit but this is just to
80. 2:25trigger them and to hear what they think
81. 2:26about this
82. 2:27of course i also encourage them to bring
83. 2:29out their own ideas
84. 2:30and this helps to get alignment and so
85. 2:33that when i'll
86. 2:33end up presenting the design i won't
87. 2:35surprise them and they'll be like oh no
88. 2:37that's completely not what we're talking
89. 2:39about
90. 2:39they'll be really i'll know what they
91. 2:41are expected to see and what they
92. 2:43are interested in seeing after we did
93. 2:46this
94. 2:46we actually split the process into one
95. 2:49phase we started working
96. 2:50on the wireframe so we used figma for
97. 2:53this because figma
98. 2:55is really great for collaborations by
99. 2:57the way now you can also do this with
100. 2:59xd but back when we did this xd didn't
101. 3:01have the collaboration
102. 3:03features so we use figma for that and
103. 3:05basically here you can see it's pretty
104. 3:06ugly but it's basically showing the
105. 3:08structure that i'm thinking about
106. 3:10and what content is going to be there
107. 3:13now the the great thing about
108. 3:14collaboration is
109. 3:15i can give them access to this file and
110. 3:17they click start editing the files
111. 3:19the the text here and we can start
112. 3:21seeing if this is enough text
113. 3:24for their story is this enough text for
114. 3:26the title
115. 3:27and started to get feedback from them
116. 3:29once we
117. 3:30get approval on that then we can move on
118. 3:33and start talking about the design
119. 3:35itself
120. 3:36so in parallel to this we presented the
121. 3:38actual
122. 3:39design so as always i do
123. 3:42encourage you to sell your design and
124. 3:44explain your design not just
125. 3:46show it as it is and so when it comes to
126. 3:48presenting
127. 3:49the design itself i always try to tell a
128. 3:51story in this case i wanted to show them
129. 3:53you know they already had an original
130. 3:56logo which was a butterfly and i wanted
131. 3:57to
132. 3:58keep that but also updated it so i
133. 4:00showed them how i use
134. 4:01the letters of double and you abstract
135. 4:04them to create some kind of a new flower
136. 4:06that also represents holding hands or
137. 4:09kind of an upside down heart
138. 4:11and so this would be a good fit for them
139. 4:13using colors that would be
140. 4:15bold and aligned with what they're want
141. 4:18to
142. 4:18show this is basically how we
143. 4:20demonstrated it on multiple
144. 4:23applications including the website and
145. 4:25social media and all that kind of stuff
146. 4:27after
147. 4:27they approved this we went ahead and
148. 4:29applied design itself
149. 4:31on the figma file now if you structured
150. 4:33your wireframes correctly
151. 4:35this is as easy as changing the styles
152. 4:37adding some colors and replacing the
153. 4:39images because you basically already
154. 4:41have the structure
155. 4:42for the website once this face is
156. 4:45approved
157. 4:46we go into webflow to actually develop
158. 4:48this now the way i do this in webflow is
159. 4:51i always start off with a style guide
160. 4:53which basically means
161. 4:54i'm putting in all the typographic
162. 4:55styles and colors
163. 4:57so that basically all i'll have to do is
164. 5:00copy and paste them to structure the
165. 5:01actual website
166. 5:02and i start with the home page i
167. 5:05structure all the
168. 5:06content i make sure that it's you know
169. 5:08mobile responsive
170. 5:10and then basically just duplicating this
171. 5:13page and changing the content
172. 5:15for the rest of the pages that's
173. 5:18basically it and i think i did it in
174. 5:19under
175. 5:20five minutes but i'm pretty exhausted
176. 5:22and i feel like i spoke
177. 5:24super super fast so i hope you found
178. 5:26this useful to kind of get
179. 5:27the overview of working with a client on
180. 5:31a website and brand project to get it
181. 5:34from start
182. 5:35to finish if you're interested in oh
183. 5:38good
184. 5:38this is a timer for the five minute
185. 5:40that's up if you're interested to dive
186. 5:42more
187. 5:42into this topic we do have a full-on
188. 5:44course the 10k website process which you
189. 5:47can check
190. 5:47also below and hope that was helpful i
191. 5:50will see you on the next
192. 5:52video bye bye