Description:
In this solo episode, Matt takes you through his design process. Besides doing web development, website maintenance, and custom coding work, they design websites! And wouldn’t it be amazing to pull back the curtain a bit and see how they take a client's vision, how they work with a client and translate that into a design mockup? Which in turn can be translated to code?
It all starts with receiving the requirements, talking with the client, discovering, and researching. You will see what influences his design decisions. Matt highlights some of the key elements that he pays attention to when doing the actual design work. He talks about the structure, layout, imagery, colors, brand, and typography.
This episode will give you great insights into what it’s like for the client and how a design process is implemented.. while maintaining flexibility. It’s a great, broad overview of the process. Enjoy!
THE MEAT OF IT!
- Intro
- New Boom and Shock Mount for my mic.. better sound going forward! Is the plan.
- I like keeping things simple.. started the podcast with just audio, using Zoom.. I’ve been slowly upgrading.
- Today's Topic .. DESIGN !!
- I don’t talk about it often..
- Is design building stuff?
- Design is literally in my title – web designer.
- Overview of the process of design.
- The standpoint of clients and our relationship with them.
- I don’t write about this.. so this is interesting!
- We create custom websites..
- So I first think – custom design.
- The principles I’m talking about can be applied to choosing a 3rd party template as well.
- Create a wireframe, and mockup.. start rough and dial it in. Then translate to code.
- THE PROCESS
- Meeting with the client ..
- Listening to the client.
- Needs assessment, looking for pain points.
- What are their goals?
- Identify unique items ..
- The Research
- The industry
- Type of website.. defining that.
- Purpose of website and goals.
- Style matching the industry
- Asking client for references
- If it’s off the wall.. I’ll pick up on it.
- The Content? Who’s doing what?
- Then.. thinking about it from the perspective of the User / UX
- Call to Action
- Adobe XD or Photoshop.. Figma, Illustrator..
- If I’m designing.. I’ll usually just use Adobe XD.
- Viewport sizes..
- Taking in all the information.. design it.
- Sometimes first try..
- Sometimes there are multiple concepts/versions..
- LAYOUT
- Hero ..
- Above the fold
- Structure of all the sections – WIREFRAMES
- Hierarchy
- Size, space ..
- Things shouldn’t be crowded.
- Space.. I want to be able to breathe.
- Sections, line-heights.
- How to group and balance everything
- Rule of Thirds
- Using my Instincts ..
- Playing around.. finding inspiration.
- Hero ..
- IMAGERY
- Photograph vs Stock Images
- Images breathe a lot of life into a design ..
- Hiring a photographer.. vs quality stock images.
- COLOR & Branding
- Sometimes an existing business.
- Could be a new product line..
- Might have a style guide.
- Or… just a logo and this color.
- Example: Call-to-Action buttons
- Increasing conversions.. training the visitor to take the right action
- Ties into imagery.. photos etc..
- TYPOGRAPHY / FONTS
- Starting with the logo ..
- Only one or a couple of fonts per website
- Fonts can become an integral part of the design..
- Can make or break a site
- Trying different combinations ..
- Font weights
- I spend a lot of time working with fonts/typography
- Recap of Process
- Animations .. when does that come in?
- There’s a movement to websites.
- How to communicate it..
- Presenting to the client..
- Explaining the design decisions.
- Iterate until we have approval.
- Moving on to a staging site.. translating the design to code.
- Then we can see it come alive with animations etc..
- Loving the process – seeing the results of the process!
- Meeting with the client ..
Check out these related Episodes:
- Episode 60: Matt’s Agency Update – Super Busy! How We Find Time to Build & Launch a New Product
- Episode 49: Virtual Reality: How VR Will Impact Web Design, Web Dev & Businesses.. Already Is!
- Episode 45: Meet Alexandra Spalato – Building Websites Using Headless CMS, Gatsby and More!
