Web Dev vs Web Design Explained with Rus Anderson

Summary

In 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

00:00

🎶 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.

05:01

👨‍💻 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.

Keywords

💡UX/UI Specialist

A UX/UI Specialist is a professional who focuses on the user experience (UX) and user interface (UI) design of digital products. In the context of the video, Russ Anderson is a UX/UI specialist and digital product designer, emphasizing the importance of creating visually appealing and user-friendly digital products that meet the needs and expectations of end-users.

💡Digital Product Designer

A Digital Product Designer is someone who designs digital products such as web applications or native apps, focusing on the look and feel of these products. They are responsible for the visual aspects and user interaction design, ensuring that the products are easy to use and provide a satisfying user experience.

💡Web Development

Web Development refers to the building and maintenance of websites or web applications. It involves writing code to create the structure, functionality, and interactive elements of a website. In the video, web development is distinguished from web design, with the former focusing on the technical aspects that make a website operational.

💡Web Design

Web Design is the process of creating the visual aspect and layout of a website. It involves choosing colors, fonts, images, and the arrangement of these elements to create an appealing and user-friendly interface. Web design is about making the website look good and ensuring that it provides a positive experience for the users.

💡Code Editor

A Code Editor is a software application used for writing and editing code. It is an essential tool for developers and designers working with web technologies, as it allows them to create and modify the source code of websites and applications.

💡80s Rock Band

The term '80s Rock Band' refers to musical groups that gained popularity in the 1980s, known for their rock music. In the video, the discussion about 80s rock bands serves as a light-hearted introduction and common ground between the host and guest, who both have a background in music.

💡Journey

Journey is an American rock band formed in 1973, known for its guitar-driven sound and powerful performances. In the video, the guest expresses his admiration for Neil Schon, the band's guitarist, for his ability to play both shredding solos and melodic passages.

💡User Experience (UX)

User Experience (UX) refers to the overall experience a person has while interacting with a product or service, such as a website or an app. It encompasses usability, accessibility, and the emotional impact of the design, aiming to create a satisfying and efficient user journey.

💡User Interface (UI)

User Interface (UI) is the space where interactions between users and a product occur. It includes the design of the visual elements and the layout that users see and interact with on a device or a website. UI focuses on the usability and efficiency of the interface, ensuring that users can navigate and use the product easily.

💡HTML

HTML, or HyperText Markup Language, is a standard markup language used for creating web pages and web applications. It structures content on the web, defining elements such as headings, paragraphs, images, and links.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. It is responsible for the visual style and layout of web pages, including colors, fonts, and responsive design.

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