Hi there, how you all doing?

I have been approached by a client to create their new website. I'm a student in conceptual development and design (mainly towards advertising), but I have only scratched on the surface when it comes down to coding. Today though, I have decided to really give it a go to hopefully be able to pay off some of my loans as a UI designer. My problem is that I don't know in which direction I should go in order to truly learn this craft so I'm now reaching out to you guys for some direction on how I should set up my workflow.

 

I am comfortable in Photoshop and Illustrator (this is basically where I'd like to set up the design and structure).
I am familiar with wordpress and I am aware of the PSD > Wordpress process. (This seems like great workflow, but I am afraid it comes with limitations?)

My final conclusion is that I should make my design in photoshop/illustrator, set it up in dreamweaver and then "export" it as a Wordpress compatible website so my client can make his own posts etc.
The design I am planning to make a lot of is attached to this post (a fixed background image ). I want ot be able to create my own icons and place them wherever I want to. The effects (rollovers etc.) can be found on a theme like this (http://www.elegantthemes.com/gallery/vertex/)

What kind of workflow would suit a person like me? I don't want to be limited, and I don't really want to write code, and I have a thing for wordpress.
Tutorials and tips are welcome, direct me!

Have a great day.

- Albin

 

My "theme":

http://postimg.org/image/k0ifpy7hp/

EDIT: Adobe Muse?

 

Edited June 30, 201412 yr by albinlalla

I think if you want to go with working for your client you have 2 options - hire a developer or learn how to code (that will benefit you in the long run). I would be dubious about how well the psd - wordpress will work. Im my opinion, cutting corners now will lead to issues later and the final project you deliver will be sub par.

 

Do you know which languages to use to build a Wordpress theme? I would suggest if the answer is no, or at least not comfortable with (insert language here), hire a developer.

OK here is the thing, and Im not going to pull any punches so I ask for forgiveness right away.

 

This is not the project for you. Plain and simple. You are trying to eat meat before learning how to drink milk. You either need to focus on just the design and hire out a developer to do this for you, or plain just give up the project. If you try to turn it into the website the client will be wasting his money as he will not be getting the quality he deserves.

 

DO NOT take on projects that you simply do not know how to do. I wouldn't dream on taking on major car mechanic jobs when I only know how to change my oil. Hire a developer... or quit the job. Think about the client first.

OK here is the thing, and Im not going to pull any punches so I ask for forgiveness right away.

 

This is not the project for you. Plain and simple. You are trying to eat meat before learning how to drink milk. You either need to focus on just the design and hire out a developer to do this for you, or plain just give up the project. If you try to turn it into the website the client will be wasting his money as he will not be getting the quality he deserves.

 

DO NOT take on projects that you simply do not know how to do. I wouldn't dream on taking on major car mechanic jobs when I only know how to change my oil. Hire a developer... or quit the job. Think about the client first.

I understand what you guys are saying here, but let's not talk about the client. It's a first project and my client is aware of that, there is no deadline and there are no money involved until I can present a good product.

 

I want to understand coding on a deeper level and I need someone to point out a direction considering workflow and what programs to use.

Walk me through your process and tell me what programs you use.

You're not pulling any punches. You're basically just patting my head.

Edited June 30, 201412 yr by albinlalla

If you want to know our process, be prepared for a lot of learning. You are going to have to get comfortable with code.

First off... Ditch the notion of using anything Dreamweaver. Some people use it, even for learning, But I believe it actually hinders them. Use Sublime. Use the trial/beta for version 3. Don't worry about paying for it right now. The trial is unlimited and fully featured.

 

Design:

I use Photoshop/Illustrator for the wireframe and mockup for the actual site design. Typically I will keep the main files in Illustrator because depending on your workflow (and it's mine Im talking about), Illustrator has the features to do multipage design for the web. It's by no means perfect, but its much better than Photoshop. Use PS for the photo manipulation.

 

Environment

You'll also want to set up a local coding and testing environment. I work off of a Mac so this is the setup that I use:
MAMP for local sever and database (you'll need this to install Wordpress locally)
Sublime for coding

Tower for version control (this would be optional for you right now, but something you'll want to get into at some point)

CodeKit for a bunch of things but mainly for CSS Preprocessing

Grunt for the same thing as CodeKit, but sometimes I'll use it if I don't want to use a program

 

Technology:

HTML/CSS This is your backbone of the site. Learn these, and learn them well.

Javascript. Almost all pages I do requires it, but a basic understanding for you would be good for now.

PHP: What Wordpress is built on. You'll need to learn the basics if you want any hope of doing much of anything in WP.

VirtualBox (got to test for IE, they don't like to upgrade. Get vm's from modern.ie)

Xcode: Has a iOS simulator to test digitally in iOS devices. You'll want to test in an actual device, but in a pinch this works (OSX only)

Misc other tools I use:
Responsive Calculator: My own tool for unit conversions

Transmit: FTP app

Icon Slate: Icon Creation

 

 

 

Learning Code. To get the basics down (and for free), use www.htmldog.com and then use a more advanced site like lynda or Treehouse. But htmldog will teach you HTML/CSS/JS for free.

 

Does this help any. Sorry about my post earlier, one thing that irks me is when a client doesn't get his moneys worth because someone took on a project he is incapable of doing it. But it looks like your client and you have an understanding, which is fine. It's when the client doesn't know, thats when it gets me riled up. But good on your for explaining it to him.

Look forward to learning and take your time. Learn the right way so you don't get bad habits. There is a lot of stuff for you to learn. Learn the code basics first, HTML first, then CSS, then JS. Then you can learn how to make a good WP Theme for your client. Also, don't be afraid to learn other CMS's out there. WP isnt the best CMS in all cases. In fact, Im not even a fan of it. But it also depends on what your client is happy with and can use. Keeping the client happy is #1.

If you want to know our process, be prepared for a lot of learning. You are going to have to get comfortable with code.

 

First off... Ditch the notion of using anything Dreamweaver. Some people use it, even for learning, But I believe it actually hinders them. Use Sublime. Use the trial/beta for version 3. Don't worry about paying for it right now. The trial is unlimited and fully featured.

 

Design:

I use Photoshop/Illustrator for the wireframe and mockup for the actual site design. Typically I will keep the main files in Illustrator because depending on your workflow (and it's mine Im talking about), Illustrator has the features to do multipage design for the web. It's by no means perfect, but its much better than Photoshop. Use PS for the photo manipulation.

 

Environment

You'll also want to set up a local coding and testing environment. I work off of a Mac so this is the setup that I use:

MAMP for local sever and database (you'll need this to install Wordpress locally)

Sublime for coding

Tower for version control (this would be optional for you right now, but something you'll want to get into at some point)

CodeKit for a bunch of things but mainly for CSS Preprocessing

Grunt for the same thing as CodeKit, but sometimes I'll use it if I don't want to use a program

 

Technology:

HTML/CSS This is your backbone of the site. Learn these, and learn them well.

Javascript. Almost all pages I do requires it, but a basic understanding for you would be good for now.

PHP: What Wordpress is built on. You'll need to learn the basics if you want any hope of doing much of anything in WP.

VirtualBox (got to test for IE, they don't like to upgrade. Get vm's from modern.ie)

Xcode: Has a iOS simulator to test digitally in iOS devices. You'll want to test in an actual device, but in a pinch this works (OSX only)

 

Misc other tools I use:

Responsive Calculator: My own tool for unit conversions

Transmit: FTP app

Icon Slate: Icon Creation

 

 

 

Learning Code. To get the basics down (and for free), use www.htmldog.com and then use a more advanced site like lynda or Treehouse. But htmldog will teach you HTML/CSS/JS for free.

 

Does this help any. Sorry about my post earlier, one thing that irks me is when a client doesn't get his moneys worth because someone took on a project he is incapable of doing it. But it looks like your client and you have an understanding, which is fine. It's when the client doesn't know, thats when it gets me riled up. But good on your for explaining it to him.

 

Look forward to learning and take your time. Learn the right way so you don't get bad habits. There is a lot of stuff for you to learn. Learn the code basics first, HTML first, then CSS, then JS. Then you can learn how to make a good WP Theme for your client. Also, don't be afraid to learn other CMS's out there. WP isnt the best CMS in all cases. In fact, Im not even a fan of it. But it also depends on what your client is happy with and can use. Keeping the client happy is #1.

Thank you! A truly great answer, I really appreciate it. I will update this thread with further questions as I progress. Really wish I had some in depth questions to counter you with but you really covered it all for me.

 

Have a great day!

 

- Albin

I suppose it's easier to paid someone who knows css, html etc coding specialist I mean. It's too time-consuming to do it on your own. You can hire freelancer for onetime job. Some elements you can take from other sites, specialized on web design

I think you should learn coding or hire some good developer to do the development work.

Yeah, It's the best way to do what you need. My friend toiled creating the apps appeareance for on of the IT companies , trying to make it in his own. Finally he hired programmer who do all the coding in three hours)))

Edited August 12, 201412 yr by asellus