Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Jon Myers
Jon Myers
239 Points

How to Move From Visual Designer to Designing with Code?

A little background.

I'm a visual designer (UI/ UX) who can't code. There are a lot of us out here. Tons.

The last 10 years or more I've been prototyping designs in Photoshop, and Fireworks. Though, Fireworks has been my main prototyping tool for a while now. I love that application. It's fast and efficient.

I know enough very basic HTML and CSS to tweak designs. Again, I know the basics, I know what an H1 is, I know what a text editor is, have one, and so on.

I'm loving Treehouse, but...

I want a clear online education path of going from a PSD or PNG to a properly marked up CSS based layout.

I feel like there's a gap here in the library to get you there.

Does anyone have any suggestions on how to use Treehouse to better make that leap from just visual designer to visual designer who can take his PNGs and turn them into a nice marked up page?

Thanks everybody.

6 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points
  1. Make a wireframe
  2. Write the semantic HTML, don't worry about the CSS yet
  3. Build a fixed width site
    • Keep it simple to start with, don't try to solve problems you don't have yet
    • Add in some small CSS3 only if the design calls for it
    • Maybe border-radius or box-shadow
  4. If you need a form add in some HTML5
  5. Try to stay away from a lot of Javascript for now
  6. Once you've got the first version fully working post it here and get some critques on your design
  • Now on to version 3 ...
  • Have you gotten sick of pasting your new on every page yet?
    1. If so add in some basic PHP, don't worry about a database for now
    2. Make your navigation, and any sidebars you use on multiple pages into PHP so that you only have to configure them in one place
    3. Finally, get some feedback on the new template-based version of your site
Jody Albritton
PLUS
Jody Albritton
Courses Plus Student 5,497 Points
Jody Albritton
Jody Albritton
Courses Plus Student 5,497 Points

Look at the underlying code on sites you like. The inspector tool on your web browser is your new best friend. If you go through all of the CSS stuff on tree house you will be off to a pretty good start.

Ryan Carson
Ryan Carson
23,287 Points
Ryan Carson
Ryan Carson
23,287 Points

Hi Jon

We're about to release a Learning Adventure called "Become a Frontend Developer ". It'll be perfect for you! :)

Hoping to set that live mid-Jan.

Thanks for being a Student!

Ryan

Joe Hirst
PLUS
Joe Hirst
Courses Plus Student 6,489 Points
Joe Hirst
Joe Hirst
Courses Plus Student 6,489 Points

Jon,

Treehouse are also going to be releasing a "Photoshop Foundations" Deep dive.

"Our Photoshop Foundations Deep Dive will release a new badge next month on Photoshop Slices and Saving for Web, which will teach you how to create and manage slices for user interface elements. It will also cover the basics of the Save for Web feature."

http://teamtreehouse.com/forum/course-request-psd-to-web

Jon Myers
Jon Myers
239 Points
Jon Myers
Jon Myers
239 Points

Loving the Treehouse.

You guys are awesome.

Thank you very much for the help.

Brad Wrage
Brad Wrage
1,365 Points
Brad Wrage
Brad Wrage
1,365 Points

@RyanCarson Looking forward to that!