Web Dev vs Web Design Explained with Rus Anderson
Summary
TLDRIn this engaging conversation, Dave interviews Russ Anderson, a UX/UI specialist and digital product designer. They discuss the creative parallels between music and web design, the evolution of design tools, and the distinction between web development and web design. Anderson shares valuable advice for aspiring designers, emphasizing the subjectivity of design and the importance of resilience. The discussion also touches on the concepts of UI and UX, using Craigslist as an example to differentiate the two.
Takeaways
- 🎶 A shared interest in 80s rock bands highlights the creative connection between music and web development/design.
- 🎸 Favorite 80s bands like The Police, Tears for Fears, and Journey are mentioned, showcasing the diverse tastes in music among web developers and designers.
- 👨💻 The first editor used by many web developers and designers was Microsoft FrontPage, a nostalgic starting point for those in the field.
- 🏠 Web design and web development are distinguished by their roles: design focuses on the look and feel, while development deals with the functional structure.
- 🛠️ An analogy for understanding web development and design is building a house, where the code is the foundation and structure, and the design is the aesthetics.
- 🎨 Aspiring web designers should be prepared for subjective feedback and have the resilience to handle criticism of their designs.
- 🔍 A good user experience (UX) doesn't necessarily require a flashy user interface (UI), as demonstrated by the functional but simple design of Craigslist.
- 🔗 UI is a component of UX, where UI focuses on the interactive aspects and aesthetics of a website or application, and UX encompasses the overall user satisfaction.
- 📚 Beginners in web design should learn the basics of HTML and CSS before specializing, and understand that design is subjective and often involves feedback.
- 🔑 The importance of keeping code simple and not over-complicating it is emphasized, aligning with the principle of striving for clarity and efficiency in coding.
- 🌐 The interview with Russ Anderson, a UX/UI specialist and digital product designer, provides insights into the field and advice for those considering a career in web design.
Q & A
What is the common link between musicians and web developers/designers mentioned in the conversation?
-The conversation suggests that both musicians and web developers/designers tap into a similar creative process, which might be the reason why many web developers and designers are also musicians.
What are some of the 80s rock bands that Russ Anderson listens to?
-Russ Anderson mentions enjoying music from bands like The Police, Tears for Fears, and Journey. He specifically admires Neil Schon from Journey for his guitar skills.
What was the first editor that Russ Anderson used for building websites?
-Russ Anderson's first editor for building websites was Microsoft FrontPage, which he mentions with a bit of nostalgia and humor, acknowledging that it might age him.
How does Russ Anderson differentiate between web design and web development?
-Russ Anderson explains that web design pertains to the look and feel of a website or application, while web development is more about the functional structure. He uses the analogy of building a house, where the foundation and framing are akin to the code (development), and the paint colors and flooring choices are like the design (how the house looks).
What advice does Russ Anderson give to beginners interested in web design?
-Russ Anderson advises beginners in web design to develop a thick skin as design is subjective and they will often face differing opinions. He emphasizes the importance of not getting too emotionally attached to one's designs.
What is the main difference between UI (User Interface) and UX (User Experience)?
-According to Russ Anderson, UI (User Interface) is a part of UX (User Experience). UX encompasses the overall experience of the user, while UI focuses on the interactive aspects and visual design of the website or application.
How does Russ Anderson describe his preference between design and development?
-Russ Anderson prefers the development side, particularly working with HTML and CSS, as he finds it simpler and more straightforward. He expresses a desire to build the structure and let others handle the design aspects.
What is the significance of the analogy used by Russ Anderson and Dave to explain the foundation of the web?
-The analogy of comparing HTML to the foundation and frame of a house, CSS to the interior design elements like carpet and wallpaper, and JavaScript to the electrical and plumbing systems helps to simplify the understanding of the roles these technologies play in web development.
What platforms can be used to find more about Russ Anderson and his work?
-Russ Anderson can be found on LinkedIn under his name and has a portfolio site at russanderson.com, although it is mentioned that the site is being redesigned.
How does the host of the conversation, Dave, encourage viewers to support his content?
-Dave encourages viewers to subscribe to his channel and join his Patreon at patreon.com/davay for exclusive content and early releases. He also mentions the benefits of becoming a patron, such as exclusive content and shout-outs.
What is the main message or theme that Dave wants his viewers to take away from his videos?
-Dave emphasizes the importance of striving for progress over perfection and encourages his viewers to make a little progress every day in their coding journey.
Outlines
🎶 Introduction and Icebreaker
The video begins with the host welcoming the audience and introducing Russ Anderson, a UX/UI specialist and digital product designer. The host engages Russ in light-hearted conversation to warm up the interview, discussing their mutual interest in 80s rock bands and the creative parallels between music and web design. They also touch upon their shared experience as musicians and the host asks Russ about his favorite 80s rock band, leading to a discussion about the Police, Tears for Fears, and Journey, highlighting the importance of creativity and the ability to craft both complex and melodic elements in music, which is analogous to design and development.
👨💻 The Journey of a Digital Designer
The conversation shifts to the professional realm as the host inquires about the first editor Russ used in his career. Russ humorously reveals that Microsoft FrontPage was his starting point, a fact that elicits a sense of camaraderie and nostalgia between the two, acknowledging the evolution of web development tools over time. The discussion then transitions into the distinctions between web design and web development, with Russ providing a comprehensive analogy likening the foundation and structure of a house to the code, and the aesthetic choices to the design, thereby clarifying the roles and responsibilities associated with each field.
🎨 Embracing the Subjectivity of Design
The dialogue delves deeper into the world of design as Russ shares insights on the subjective nature of the field. He emphasizes the importance of resilience and detachment, as designers often face diverse and sometimes unexpected feedback. Russ expresses a hypothetical desire to focus solely on HTML and CSS, leaving the design aspects to others, highlighting the challenges and intricacies involved in the design process. The host and Russ also discuss the simplicity and elegance of code, advocating for an approach that avoids unnecessary complexity.
🌐 Clarifying UI and UX
The conversation addresses the common confusion between UI (User Interface) and UX (User Experience), with Russ providing a clear and accessible explanation. He uses Craigslist as an example to illustrate a functional yet minimalist UI within an effective UX, demonstrating that a strong user experience can exist independently of a visually impressive interface. The discussion underscores the importance of understanding the distinction between the two concepts and the impact they have on the user's interaction with a digital product.
🔗 Connecting with the Community
The video concludes with the host encouraging viewers to subscribe and support his Patreon for exclusive content and early access to future videos. He expresses gratitude to his current Patreon supporters and provides a platform for Russ to share his online presence, including his LinkedIn profile and portfolio website. The host also teases the second part of the interview, which will be available exclusively on his Patreon feed, and thanks Russ for his valuable contributions to the discussion.
Mindmap
Keywords
💡UX/UI Specialist
💡Digital Product Designer
💡Web Development
💡Web Design
💡Code Editor
💡80s Rock Band
💡Journey
💡User Experience (UX)
💡User Interface (UI)
💡HTML
💡CSS
Highlights
Introduction of Russ Anderson, a UX/UI specialist and digital product designer.
Discussion on the commonality of musicians becoming web developers and designers due to the creative aspect.
Russ Anderson's preference for 80s rock bands like The Police, Tears for Fears, and Journey.
The first editor used by Russ Anderson being Microsoft FrontPage, highlighting the evolution of web development tools.
Clarification of the difference between web development and web design using the analogy of building a house.
The importance of having a good foundation in HTML and CSS for those interested in web design.
Advice for aspiring designers to develop resilience and not get too emotionally attached to their designs.
The subjective nature of design and the necessity for designers to handle feedback and changes.
Simplicity in design and coding, emphasizing not making things more complex than necessary.
Explanation of UI (User Interface) and UX (User Experience) using Craigslist as an example.
Differentiation between UI as a part of the overall UX.
Russ Anderson's recommendation for designers to be prepared for the challenges of the field.
The importance of function over form in design, as exemplified by the longevity of Craigslist's design.
Information on where to find Russ Anderson online, including his LinkedIn profile and portfolio site.
The host's promotion of their Patreon page for exclusive content and early access to videos.
Encouragement for viewers to strive for progress over perfection and to keep writing code.
Transcripts
[Music]
hey hello and welcome I'm here today
with Russ Anderson a friend of mine who
is a ux UI specialist and digital
product designer hi Russ and welcome
thank you for talking with us today hey
Dave good to see you and thanks for
having me you bet so I'd like to start
out with a few you know light-hearted
questions just to to get us warmed up
and you and I both met not through web
development but through playing in bands
and I've noticed a lot of web developers
and designers are musicians I think it
Taps into that same creative thing but
uh we both play in 80s rock band so I
want to ask you just you know curiosity
here who's your favorite 80s rock
band that is a tough question um you
know I don't I can't say I have a
favorite but I'll listen to anything
let's say if I'm driving in the car and
the radio's on and anything by the
police or Tears for Fears or dvo comes
on I'm not changing the
station right right nice and I'm a I'm
like a kind of a journey fan you know
I've always loved Neil Shawn on guitar
you know I play guitar the guy can shred
and then he can play so melodic it's
awesome yeah he's great yep love him
okay another question I I love asking
everyone and it doesn't matter if
they're designer developer or whatever
they do but what was the first
editor and I usually say code editor
because that's my background but what
was the first editor that you used and I
know you go way back in the day just
like I do with this yeah yeah uh it's
definitely going to age me here but
Microsoft front page was the first thing
I used to build a website oh yeah yeah I
remember that too though yeah I don't
know how many people you know most
mostly us old dogs know it and uh cringe
you know you always say it with a cringe
in your
voice all right well hey a good question
now and and I'm jumping into the more
serious questions here but you are a
digital product designer and of course
that kind of makes me think of web
design and beginners often
interchangeably use web development and
web design and I think a lot of us use
web development as this umbrella that
web design and Other Things fall into
but how would you distinguish between
the two if you're explaining that to a
beginner well you know design is the
look and feel of a website or a web
application in my case you know I'm a
product designer so I design digital
products which are typically a web app
or a native app um whereas development
is more the functional structure if I
can kind of loosely use a phrase there
so I usually like to tell people um if
you were going to equate it to building
a house um the foundation the framing
the electrical work etc is kind of the
code you know that's you've got to to
have those things there to make the
house a functional house whereas uh the
paint colors the flooring choices and so
on is the design that's what makes the
house look good so um those that's kind
of my normal Spiel of explaining the
difference I love your explanation and
I've I've got to admit and some of the
viewers might know I made a video about
that as well talking about the
foundations of the web and I compared
HTML to the foundation and the frame of
the house and then the CSS was the
carpet and the wallpaper or paint or
whatever was used there and then the
JavaScript was bringing in the
electrical and the plumbing and making
things function so I I love your analogy
and I've used something very similar
yeah yeah that's good I mean it's it's a
good analogy you know hey guys I hope
you're enjoying the video you may be
surprised to learn that three out of
every four viewers nearly 75% of all
people who watch my channel aren't
subscribed so I just wanted to take a
quick second and remind you to hit that
subscribe button it really helps me out
and if you really like my videos you can
get exclusive content and support my
channel even more by joining my patreon
at
patreon.com davay thanks for your
consideration and now back to the video
yeah so let let's build on that now
let's let's say okay you're a beginner
you've learned some HTML and now you're
learning CSS and hey this is great I
really like making things look good and
you're starting to think maybe this is
what you're best at or want to work on
like me I'm I'm more of a developer when
I get into the logic I I'm good enough
at CSS to know the basics and teach
those but I'm not really a designer but
let's think about somebody that truly
wants to go into web design if you were
going to give them some advice just
starting out what would that
be um yeah uh well design is design is
subjective um you if you want to be a
designer you have to have thick skin you
can't get too emotionally attached to
your designs cuz everyone and their dog
or in my world everyone and their
secretary has an opinion on what good
design is so you can have what you feel
is the best design in the world and
somebody that you've never met before
will say you know what maybe the buttons
should all be purple you know and
purple's not in your color palette so
you are going to deal with that on a
regular basis so be ready for it and
don't get discouraged when you have to
go through this process of process of
explaining your design ideas
um um I think you know and Dave and I
were talking about this before if uh
there are days where if I could just
build HTML and CSS let somebody else do
the design and deal with you know all
the the weird feedback that you get as a
designer and just build it out nobody
cares you know you've built it it looks
the way the design that everybody loves
looks and you're good to go so a little
easier going on the CSS HTML side of
things hey I like that idea I like to
keep things simple and that's what we
want to do with code why make it complex
if it doesn't have to be absolutely
100% okay I'm going to bring up a couple
of initialisms here and they're actually
as I introduced you we used them in the
the title but Tech has so many different
ones and you know we've talked HTML CSS
these are all initials for things uh but
UI ux uh there's videos dedicated to
this on YouTube of course trying to
explain the difference and we're talking
about the user experience ux and the
user interface UI but uh you know those
get crossed those wires get crossed
during explanations all the time how
would you explain that and of course uh
you know in an easy way for beginners as
well sure um well UI or user interface
is a part of ux ux being the us are
experience so you can have a site and I
like to use Craigslist it's functional
it's easy to navigate you can do exactly
what you want to do as a user but
there's no flash to that side at all
it's all text based you know you go to
the homepage it's all links you click
you know I want to buy a car you click
on cars and you go look for cars um and
it's a good user experience with the
lack of a robust UI so UI I mean if
you're going to look at a VIN diagram UI
is kind of encapsulated within user
experience yeah yeah hey that's a great
explanation I think and I like the
example of Craigslist that's that's
going back to the early days of the web
and they just never changed really did
they it's it works so you know don't
don't fix it function over form that's
okay too yeah for sure yep well Russ I
appreciate you answering questions and I
of course want to let all the viewers
know this is just the first half of this
interview we're going to have a part two
that's going to be exclusive on my
patreon feed but Russ let's let
everybody know where to find you on the
web uh yeah um I'm on LinkedIn so uh
LinkedIn slin Russ Anderson or I have a
portfolio site and like most designers
it's being redesigned as we speak so
Russ anderson.com and that's 1s on Russ
so yeah go check it out I'll make to put
those links in the description and I've
probably shown them here on the screen
as you're talking well hey Russ thank
you for here part one and make sure you
join us on my patreon feed for part two
for sure thanks for having me I
appreciate it hey guys I recently
started a patreon and I'm already giving
shout outs to Holy coder who is a
progress provider and lad who joined at
the senior member level also shout outs
to all of the junior members that have
joined thank you all so much you're
helping me reach my goals and if you
haven't joined please check out my
patreon at
patreon.com davay I've got exclusive
content there that you won't find on
YouTube and I've also got early release
content hope to see you there remember
to keep striving for Progress over
Perfection and a little progress every
day will go a very long way please give
this video a like if it's helped you and
thank you for watching and subscribing
you're helping my channel grow have a
great day and let's write more code
together very soon yeah
Weitere ähnliche Videos ansehen
What is UI vs. UX Design? | What's The Difference? | UX/UI Explained in 2 Minutes For BEGINNERS.
How to Become a UI/UX Designer in 2023? | A Beginner's Guide
Zeus Learning Instructional Designer/UX Designer Interview Experience ft. Anish Patil
How To Become A UI/UX Designer In 2024 Without A Degree 📈 | Saptarshi Prakash
ID: Apps Pod 02
If I Started UI/UX Design in 2024, I'd Do This! | Saptarshi Prakash
5.0 / 5 (0 votes)