Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Calling all Web Designers :)

I am starting to make a website for a small business in my hometown and it will be my first proper project. I have made sites in the past, which I have done for leisure. I am fluent in HTML and CSS. I have got the clients requirements and what he wants on the website etc. I am stuck on what steps I should follow after finalising the requirements. I have searched the web and could not find anything relevant to my questions because the info is outdated.

My questions are:

What is a web designers workflow in 2014? (Because everything is changing so fast) Do I create wireframes of the site and then design them in photoshop and then code the designs?

I just want to know how the "design" processes works, like what steps I need to take in order to make the website.

Thanks in advance.

share|improve this question
2  
It depends entirely on the project, the team, and the client. There is no stock answer for this. –  DA01 Aug 5 at 2:19
    
sketch sketch SKETCH! –  SaturnsEye Aug 5 at 7:55
2  

4 Answers 4

up vote 24 down vote accepted

Discovery and Scope

Sit down with the client to determine, goals, purpose, and needs. I would hope you have drafted a quote of the purposed site. You should also discuss turn-around time and if anything is needed that you cannot provide. You need to figure out how the site will be structured. Such as responsive, tablet and phone only, desktop only, desktop and tablet only. You need to figure out if the design is a multi-phase design target, such as the client will want to release a desktop version and want a full mobile app later on.

Content Mapping

Hopefully you have been given all the content that is desired for the site. You should map out the site and its functionality. Decide how the scalability is for future modifications, decide how the code may be structured if its for a CMS or app.

Example: enter image description here

Mockup

After you have your "tree" or "map" completed with the approval of the client I would work on a hand sketch or mockup tool. There are a large amount of questions on this topic if you do a search in the top right

Example: enter image description here

Style Tile

Designing in Photoshop for web design defeats the purpose of today's age. I dont know many people that still use Photoshop because the amount of time it takes you to make a fancy button you could have spent that same amount of time and coded in the browser. If I have to use an application per a special request I will deploy it in Illustrator or InDesign. I would advise migrating to design a style tile such as:

enter image description here

With the purpose of the tile you are not handing a client a design and putting yourself in the corner of "this doesnt look like the design you gave me". Also, if you are planning a site there is no reason to spend the time laying it out in Photoshop for responsiveness because you will spend a lot of time designing for certain devices, etc. etc. If you HAVE TO design the full site I would consider Illustrator, as stated, for its SVG and ability to export elements for your site compared to Photoshop. In some degree you could even use InDesign for formatting the content but I would only use Photoshop for image manipulation and if I'm going to do that I would probably roll with ImageMagick. I take the Style Tile a level further than others and code it into a single page so I have knocked out a preliminary task of my master .css file.

Wireframe

I prefer to deploy designing in the browser if you haven't noticed. Now these days I may use Illustrator for a sketch of the site or mockup of the site but I usually deploy a default templated .css file with no more than 6 colors in a grey scale and I code everything for the structure of the site since most people cant get a design understanding and want something to play with. I sometimes go ahead and do this in PHP since its easier to deploy for a CMS. I then will develop a simple sub-domain with the clients PROVIDED fonts in a black and white manner so the entire site's functionality is present and they can go through it. Since I haven't spent the time adding all the content or colors (because I use dummy text reference: "Alternative to Lorem Ipsum (dummy text) for websites") I can easily modify any changes that are present if they dont like a certain element based on a device.

Colorize and content

Once the client has signed off on the structure of the site and functionality I will write up the rest of the CSS and add the requested animations or JavaScript specifics. Since I have the style tile approved and if I developed it correctly I can simply copy the CSS over and be set.

Debug, Debug, Debug

The final step before client sign-off is debug and make sure my code is solid with no errors. If everything is correct I should have a smooth release. This step also includes serving testing and load testing, if that is what you have priced and offered. Personally, I'm a firm believer that any designer should be aware of what they are developing for just like you would, hopefully, be doing when it comes to a print design. If the client can't afford a true hosting provider it could limit the performance of the site and all they will say it is your fault and you did something wrong.

Training

I typically bid in my brief/quote training on CMS sites. Some users have no clue what they are doing so I will bid for an afternoon with an hour over padding for after questions to make sure to go over anything or make sure they are using my design to the upmost capabilities.

Some other topics that may help since you're asking a basic question:

share|improve this answer
    
thankyou for your detailed response. Is this the order that i should go by because I have seen many people do the wireframes first. And also would you recommend doing all the above i.e. style tiles, wireframes and mockups. Thanks –  user3830113 Aug 4 at 20:54
    
Thats up to you to figure out. Since you're new at it mess around till you dial in what YOU like. Everyone may have a different procedure to the process. –  Matt Aug 4 at 21:06
    
Ok. Thanks for your help.. –  user3830113 Aug 4 at 21:08
1  
Nice answer. Did you use Visio for your first two pictures? –  Conor Aug 5 at 13:58
    
Don't forget about the content. Do you put it in, does the client? Is there a dataset that needs to be imported/migrated? –  allcaps Aug 5 at 22:15

I am also a web designer who has just started in the field. I have done a few projects now, though. For me, my workflow goes like this:

  1. Initial Design & Development Meeting
    This is when I gather all relevant information, including expected completion date, make a list of items needed from my client, etc.
  2. PhotoShop Mockups
    At this time, I find a design or two or three that are fitting for my client and make mockups in Photoshop using their branding, colors, styles, etc. I send these over and discuss what should be changed/kept on each one, then let the client decide which design they like best.
    NOTE: If you're using WordPress to build on, you can go to http://themeforest.com and check out tons of themes. From there, you can take screenshots and do your mockups, then you can also provide a live demo (without the client's customizations, obviously). If your client likes one of these mockups, you then purchase the theme and can alter however you need to. This is what I tend to do. I never use a theme (or anything else for that matter) without giving proper credit/payment/etc. to the original creator. :)
  3. Development
    Then I finally start actually developing the site in a development environment (NOT the client's live website, but a subdomain if possible - IE dev.clienturl.com) I send over updates to my client every time I feel like a page is getting close to complete, that way if there are issues, we can fix them right away.
  4. ALWAYS FOLLOW UP
    Even after your client's website has gone live and they seem satisfied and have not asked for further alterations, be sure to follow-up. Just make sure everything is functioning as it should, per their expectations. I also recommend writing up a little survey for each client to finish once the website has gone live for about a week. You can use comments from here as testimonials on your website.

If you need any help with anything, contact me through my website. I have tons of resources I can share with you for things like contracts, post-production surveys, initial questionnaires, etc. http://anchorsawaydesigns.com/

share|improve this answer
1  
I would be careful recommending someone go to a site and basically take their ideas for their own project.. –  Matt Aug 4 at 20:53
    
Are you referring to my comment about using ThemeForest? If so, I purchase the theme and alter it for my client if that is what my client wants. –  Alicia Uhacz Aug 4 at 21:12
    
That should be in your answer for clarity. –  Matt Aug 4 at 21:19
    
Sorry about the confusion there, then. That is my fault. I assumed people would guess I was paying for whatever theme ended up being used. Thanks for pointing it out, though! –  Alicia Uhacz Aug 4 at 22:54
    
This is common, but I really encourage people to avoid PhotoShop designs. –  DA01 Aug 5 at 2:20

try and get as much info as possible from the outset, then follow a staged approach something similar to below. Try and keep your client informed as much as possible, as you won't want to be developing something in isolation only to find out later that it doesn't meet their expectations. If you invest in a good wireframing tool (I use balsamiq) then half the job is done for you.

  1. Requirements gathering
  2. Wireframing
  3. Design mockups
  4. Design finalised
  5. Development
  6. Hosting

Good luck.

share|improve this answer
    
thanks for your answer. I have done my wireframes for the website. You mentioned "mockups", how are they different to wireframes and what software do you use for them. thanks in advance –  user3830113 Aug 6 at 14:46
    
@user3830113 there is no hard-and-fast rule as to what makes a wireframe a wireframe vs. a mockup. In general mock-ups tend to be a higher fidelity, and tend to focus on visuals rather than flows or functions. But in a lot of situations, wireframes and mockups may be one and the same. It all depends on the particularities of your project and team. –  DA01 Sep 15 at 22:42

Hi dude its nice you are starting new project.

Steps for your Need:

  1. first you Decide what technology u want to use for your project i mean single page scrolling,multiple page etc.

  2. Then accordingly prepare sketch for your layout and workflow.

  3. Now start designing your layout in the tool you like i do with photoshop but you can use your liking.

  4. After that its good that you show ur layout to client for any changes ie. colour, fonts etc. so that you can it doesn't make headache at time of html.

  5. Now, After confirmation of clients. Its time to start coding with Html and Css.

  6. After it it time to pass it over to Developer for Further Language base coding ie. PHP,.Net etc.

Enjoy............

share|improve this answer
    
Step 1 can be tricky. It's good, but there should be several steps before that--where you determine the best technology based on the needs of the project and client. Also, I'd argue that Step 4 can MAKE a headache out of HTML. Best to get into HTML sooner than later, IMHO. –  DA01 Sep 15 at 22:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.