Following A Web Design Process

Advertisement

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.
  • Site map
    A site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.
  • Contracts that define roles, copyright and financial points
    This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.
  • Gain access to servers and build folder structure
    Typical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.
  • Determine required software and resources (stock photography, fonts, etc.)
    Beyond determining any third-party media needs, identify where you may need to hire sub-contractors and any additional software you may personally require. Add all of these to the project’s budget, charging the client where necessary.

Resource links for this phase:

5

2. Design

The design stage typically involves moving the information outlined in the planning stage further into reality. The main deliverables are a documented site structure and, more importantly, a visual representation. Upon completion of the design phase, the website should more or less have taken shape, but for the absence of the content and special features.

  • Wireframe and design elements planning
    This is where the visual layout of the website begins to take shape. Using information gathered from the client in the planning phase, begin designing the layout using a wireframe. Pencil and paper are surprisingly helpful during this phase, although many tools are online to aid as well.
  • Mock-ups based on requirements analysis
    Designing mock-ups in Photoshop allows for relatively easy modification, it keeps the design elements organized in layers, and it primes you for slicing and coding when the time later on.
  • Review and approval cycle
    A cycle of reviewing, tweaking and approving the mock-ups often takes place until (ideally) both client and contractor are satisfied with the design. This is the easiest time to make changes, not after the design has been coded.
  • Slice and code valid XHTML/CSS
    It’s coding time. Slice the final Photoshop mock-up, and write the HTML and CSS code for the basic design. Interactive elements and jQuery come later: for now, just get the visuals together on screen, and be sure to validate all of the code before moving on.

Resource links for this phase:

3. Development

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

  • Build development framework.
    This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly.
  • Code templates for each page type.
    A website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.
  • Develop and test special features and interactivity.
    Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.
  • Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.
  • Test and verify links and functionality.
    This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Resource links for this phase:

17

4. Launch

The purpose of the launch phase is to prepare the website for public viewing. This requires final polishing of design elements, deep testing of interactivity and features and, most of all, a consideration of the user experience. An important early step in this phase is to move the website, if need be, to its permanent Web server. Testing in the production environment is important because different servers can have different features and unexpected behavior (e.g. different database host addresses).

  • Polishing
    Particularly if you’re not scrambling to meet the deadline, polishing a basically completed design can make a big difference. Here, you can identify parts of the website that could be improved in small ways. After all, you want to be as proud of this website as the client is.
  • Transfer to live server
    This could mean transferring to a live Web server (although hopefully you’ve been testing in the production environment), “unhiding” the website or removing the “Under construction” page. Your last-minute review of the live website happens now. Be sure the client knows about this stage, and be sensitive to timing if the website is already popular.
  • Testing
    Run the website through the final diagnostics using the available tools: code validators, broken-link checkers, website health checks, spell-checker and the like. You want to find any mistakes yourself rather than hearing complaints from the client or an end-user.
  • Final cross-browser check (IE, Firefox, Chrome, Safari, Opera, iPhone, BlackBerry)
    Don’t forget to check the website in multiple browsers one last time. Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.

Resource links for this phase:

5. Post-Launch

Business re-enters the picture at this point as you take care of all the little tasks related to closing the project. Packaging source files, providing instructions for use and any required training occurs at this time. Always leave the client as succinctly informed as possible, and try to predict any questions they may have. Don’t leave the project with a closed door; communicate that you’re available for future maintenance and are committed to ongoing support. If maintenance charges haven’t already been shared, establish them now.

  • Hand off to client
    Be sure the client is satisfied with the product and that all contractual obligations have been met (refer to the project charter). A closed project should leave both you and the client satisfied, with no burned bridges.
  • Provide documentation and source files
    Provide documentation for the website, such as a soft-copy site map and details on the framework and languages used. This will prevent any surprises for the client later on, and it will also be useful should they ever work with another Web developer.
  • Project close, final documentation
    Get the client to sign off on the last checks, provide your contact information for support, and officially close the project. Maintain a relationship with the client, though; checking in a month down the road to make sure everything is going smoothly is often appreciated.

As stated, this is merely a sample process. Your version will be modified according to your client base and style of designing. Processes can also differ based on the nature of the product; for example, e-commerce websites, Web applications and digital marketing all have unique requirements.

20

Documenting The Process

Create and retain two versions of your Web design process:
One for you or your team to use as a guide as you work on the back end, and one to share with clients. The differences between the two should be intrinsically clear: yours would be much more detailed and contain technical resources to help with development; the client’s would be a concise, non-technical map of the process from start to finish.

Common tools for documenting the business process are a simple Microsoft Word document, Microsoft Visio and mind-mapping software such as Freemind. If you’re ambitious, you could even develop your own internal Web-based tool.

Using The Process

By now, you should understand what a process looks like, including the details of each phase, and have some idea of how to construct your particular Web design process. This is a great first step, but it’s still only a first step! Don’t miss this next bit: knowing how a process can enhance your overall business and how to use it when approaching and interacting with clients.

Refining the Process

The process will be different for each designer, and for each project. Develop a process for yourself, and identify whatever is useful to you or your team. Only then will the process be truly useful. After all, freelancers can serve drastically different target markets.

Bulleted lists are well and good, but the process can be much more useful and elaborate than that. Many of the resources, tools and links posted on Web design blogs and Twitter feeds fit into different parts of the process. An incredibly useful way to refine the process is to add resource links to each phase, and to develop your own resources, such as branded document templates.

21

Some commonly used documents of freelancers:

  • Client questionnaire22,
  • Invoice,
  • Project charter,
  • Documentation for hand-off to client,
  • User accounts,
  • Database table charts,
  • Site map.

Files and Archive

Documentation and storage are important to grasp. As mundane as these tasks can be, they certainly help when tax season rolls around or when a small freelance venture begins to expand. You can never be too disciplined when it comes to efficiency in work and time. You could establish a standard document format and folder structure for all of your clients, or maintain a list or archive of previous clients and project files. You could employ anything from simple lists to all-out small-business accounting practices.

A Process Puts the Client at Ease

Many clients view Web development as a black box, even after you’ve tried to educate them on its methods. To them, they provide their requirements, suggestions and content, and then some time later a website appears or begins to take shape. They’re often completely unaware of major aspects of the process, such as the separation of design and development. Having an organized and concise process on hand can help organize a client’s thoughts and put their mind at ease, not to mention help them understand where their money is going.

Outlining my basic process as a freelancer is by far the most common first step I take with potential or new clients. A quick, high-level “This is how it works” discussion provides a framework for the entire project. Once you have this discussion, the client will better understands what specifically is needed from them, what you will be delivering at certain points in the timeline and what type of work you’ll be engaging in as you go along. Most of all, the discussion can nip any miscommunication or confusion in the bud.

Designers are often too deep into Web design to realize that most people have no idea what they do or understand their terminology or know the steps involved in creating a finished product. Starting fresh with a understandably “clueless” client can be daunting.

23

It’s a Business

It’s a business, and the steps outlined here are basically the path to small-business management. As you grow in clients or staff or contractors, you’ll find yourself with an ever-growing to-do list and a headache from all of the things to keep track of. Give yourself a break, and invest some time in finding tools to help you get the job done efficiently. An expanded process document is a great first step on this path.

Tips

  • Ask a non-technical friend to review your process. If it makes sense to them, it will make sense to your client.
  • Use the processes of other designers as a starting point to build or refine your own. See the related resources links.
  • Build document templates and Web apps into your process. This will save time and make you more professional.

Risks

One process cannot be applied to every project. Although your process will be useful when you first engage a client in the planning discussion, be sure to review it before the discussion takes place to ensure it fits the project.

Further Resources

Here are some links to resources that showcase sample Web design processes, as well as tools and templates to build integrate in your own process.

Have further resources to share? Post them in the comments.

(al) (il)

Footnotes

  1. 1 http://www.jumpchart.com/
  2. 2 https://www.dropbox.com/
  3. 3 http://www.mindmeister.com/
  4. 4 http://articles.sitepoint.com/article/bulletproof-web-design-contract
  5. 5 http://www.flickr.com/photos/opensourceway/5320589774/in/photostream
  6. 6 http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
  7. 7 http://colorschemedesigner.com/
  8. 8 http://www.typetester.org/
  9. 9 http://iplotz.com/
  10. 10 http://www.stripegenerator.com/
  11. 11 http://www.genfavicon.com/
  12. 12 http://www.iconfinder.net/
  13. 13 http://www.sxc.hu/
  14. 14 http://wufoo.com/
  15. 15 https://browserlab.adobe.com/
  16. 16 http://www.intranetjournal.com/articles/200411/pij_11_12_04a.html
  17. 17 http://www.flickr.com/photos/opensourceway/4370250151/sizes/m/in/photostream/
  18. 18 http://validator.w3.org/
  19. 19 https://browserlab.adobe.com/
  20. 20 http://www.flickr.com/photos/opensourceway/4749431843/in/photostream
  21. 21 http://www.flickr.com/photos/opensourceway/5537336155/in/photostream
  22. 22 http://www.noupe.com/how-tos/how-to-create-the-perfect-client-questionnaire.html
  23. 23 http://www.flickr.com/photos/opensourceway/4404008626/in/photostream
  24. 24 http://www.idesignstudios.com/blog/web-design/phases-web-design-development-process/
  25. 25 http://www.web-strategist.com/blog/2007/03/19/web-design-and-worflow-process-comparison/
  26. 26 http://webdesignfromscratch.com/design-process/web-design-process.php
  27. 27 http://web.appstorm.net/roundups/freelancing-tools/50-essential-web-apps-for-freelancers/
  28. 28 http://www.makeuseof.com/tag/3-websites-to-get-any-document-for-free/
  29. 29 http://fluidmedia.ws/webdevwiki/

↑ Back to topShare on Twitter

Luke Reimer is a web project manager, designer, and developer currently operating Fluid Media web design group out of Waterloo, Canada.

Advertising
  1. 1

    Aww, if only it would really happen like this! Just reading it makes me envy anyone that actually manages to work like this every time.
    Well written article, thanks.

    5
  2. 2

    This was a very informative article. Thanks for the helpful resources as well!

    1
  3. 3

    The smashingmagazine website has a pretty good design. Very little crap at the top to get in the way. Shame it doesn’t have a #TotalMarketing contact center, but you can’t have everything. Forget the article, learn from this site instead!

    -25
  4. 4

    Nice, I wrote an article about a redesign project plan I helped write last year.

    http://rmlumley.com/website-redesign-project-plan/

    7
  5. 5

    What a perfect world! Good ol’ waterfall approach, nothing to worry about sprint, backlogs and other iterative gobbledygook. Nice article though.

    -4
  6. 7

    “Just because code is valid, doesn’t mean it will sparkle with a crisp layout in IE 6.”

    Sorry, but I’m one of those people who says “I don’t care”.
    I won’t waste my time ruining good code to shoehorn it into a bad browser.

    33
    • 8

      Yes… and not. We must to warn to the client in the firts contacts about this. It’s important in every project list the compatibility browsers and versions. In our web projects we list IE7+, Firefox 3.6+, etc… Even in the contracts. IE6 is deprecated by Microsoft and we must protect about this legally and warn in the web footer about the list browsers.

      -4
    • 9

      I wonder if the IE development team knows they are the bane of a web designer’s existence….

      8
    • 10

      What a joke. Comments like this is what IT ‘professionals’ a bad name.

      1
      • 11

        oh ok. so you do all that work for no pay then? or do you just crank out crap designs?

        -2
  7. 12

    Er… what happened to usability testing?

    Even a generic web development process needs this important step. See, for example, the ISO standard on web development (ISO 9241-151 ‘Guidance on World Wide Web user interfaces’) and the ISO standard on software development generally (ISO 9241-10 ‘Ergonomics of human-system interaction: Human-centred design for interactive systems’). Both of these mandate usability testing.

    6
    • 13

      David, I completely agree. Why is there no reference or mention of usability testing in this process? Usability is the basis of how or why the user will want to interact with the site or choose to leave.

      No great design nor great coding will fix usability issues.

      1
  8. 14

    What I have found is that developing proper processes is really the key to maintaining any form of control in business. Since we have implemented some processes projects definately run smoother and are more organised.

    We do have many new processes we still need to add and we need to keep refining the processess that are already in place. You can always improve, tweak and make things work better – they key is to start :)

    0
  9. 15

    Great stuff. We’ve found having a clear process really helpful. You might find it helpful to take a peek at ours – we recently posted it on our blog at http://www.resounddesign.co.uk/blog/our-web-design-project-process-in-5-easy-steps

    -9
  10. 16

    A very timely article. Been wanting to use documented processes with my (future) clients. This will definitely start me off on the right path. Thanks =)

    2
  11. 17

    I’m sorry but this design process looks a good couple of years behind what many people are moving towards in terms of rapid prototyping in HTML/CSS rather than spending so much time in Fireworks/Photoshop because the general theory is that now sites are required to work in a wider range of devices a static, graphic visual doesn’t really represent how it will look and feel.

    I’d also argue that “dropping in the content” at the end is not a final thing, taking time to scope and spec what content will go into the site is what guides the design and structure. Not a photoshop visual.

    It’s not a “wrong” process per-se, as I’m pretty sure it mirrors what many designers were doing a couple of years back but responsive / adaptive sites these days require much more focus on content at the very start of the process, not the end.

    @welcomebrand

    15
    • 18

      I tend to agree with you. I think it’s important that there is at least some kind of process though. I worked for a small design firm that had no process whatsoever and it was an absolute nightmare.

      A two-year old process is better than no process.

      4
      • 19

        I’m not for a second suggesting having no process, that would be madness.

        Just that this process doesn’t really reflect the current methodology a lot of designers are adopting in terms of designing in browser etc.

        @welcomebrand

        -1
    • 20

      That is one of the biggest frustrations I have with the standard web design process: content is “dropped in” at the end. Mostly this seems to be so that the client can “see something” faster and feel the project is moving along.

      Really an issue in clearly defining the roles of each player involved in the process more than the process itself, but still a frustration. As always, communication between the designer/developer/development team and the client needs to be airtight in order for any process to work smoothly.

      3
    • 21

      I’m sorry, I take it you are a left brain or a failed designer that hides behind the content is king wall – not to say content is king. But content is Pope (above king in those times) if branding, uniqueness, emotions and beauty is achieved.

      Also, I take it that you don’t have a lot of experience with clients, because rapid prototyping will never be as fast as rapid comping in photoshop and clients change their mind a lot as a matter of fact. Especially in the bigger engagements where every Jack and Gill sits in the meeting and feels pressured to say something to justify their six figures salaries…

      So please, don’t push us down this templated approach because I already think most websites look the same especially in the handheld device world.

      2
      • 22

        I would suggest if you don’t think delivering actual content to users isn’t the most important function of a website then it’s perhaps you who is the failed designer.

        As it turns out, I have several years experience dealing with a wide range of clients both in an agency capacity and as a full time freelancer.

        The process this blog post outlines is (or was) very similar to the process I used myself until fairly recently when it became abundantly clear that when working on more responsive sites and projects, the back and forth in Photoshop (I use Fireworks personally) is time consuming, it’s slower to make mutliple updates across several pages and not to mention when rapid prototyping, all the while you’re shaving time off the actual build phase of a project.

        I do appreciate the problems we all face when a job has a number of stakeholders who all want their say (make this link red, make it green, make it bigger, change the font sitewide etc) but speaking from experience, at the very worst case it’s certainly not slower to work in HTML.

        Branding, uniqueness, emotion and beauty are all still required but if users can’t access your beautiful, unique message because your content strategy is bad then you’ve totally failed to design anything other than eye candy.

        Design is vital of course and having a great looking site is vital but it’s a means to deliver content first.

        I’m not really sure what you mean about the templated bit in your comment. I didn’t mention using templates.

        @welcomebrand

        4
  12. 23

    I recently created an infographic to share with clients that details a basic site’s creation. I’ve found it be a very valuble client educational tool. Anyone is welcome to make use of this if they like.

    http://www.simplesquare.com/blog/infographics/a-web-site-designed/

    10
  13. 25

    Design before development ?? Really?? Make things pretty and then wonder why they don’t work?

    Usability testing not on the list?? That’s where you’d find out that your pretty design didn’t work.

    Content an afterthought?? Gosh, once apon a time it was king.

    “Time for the boring part” – nice pitch to the clients. The site is about their content. for bleep’s sake. If you’d rather be doing fancy design nonsense then pay someone efficient to do those parts – but prioritise it otherwise you are building a site for yourself not for your client.

    All in all this is how I built my first site ten years ago. It had animated gifs and comic sans. Since then the process has been a bit refined.

    -3
    • 26

      Design will always take place before development. Design is so much more than “making it look pretty”. A designer should always at least have fundamental knowledge of the languages and technologies that will be used to build the site so that they can work within limitations and estimate development time.

      5
      • 27

        first: Research and Usability (wireframes, user testings, etc), then development and visual desing can go along the way, working in paralell. I think this article is written from the client perspective (the web designer thinking only on satisfy her client) and not from the user perspective (where we put users first).

        3
  14. 28

    Drop in a handful of “world is not perfect” bits here and there and this whole “process” will collapse. Unfortunately. But it will..

    -3
  15. 29

    ricelin(undirect)

    June 22, 2011 5:53 pm

    It’s so nice to share such information with us!Thanks a lot!

    0
  16. 30

    Thanks for the great post! Explaining your process to clients is a great idea. I’m just starting out and dumbly I didn’t think they needed to know. Some great info I can use to put a info document together. :)

    0
  17. 31

    Awesomeness, as usual. Thanks for the great resources guys :)

    0
  18. 32

    Kasper Andersen

    June 22, 2011 10:51 pm

    Woaw nice post! I have been looking for something like this to complete my strategy.
    Thanx!

    0
  19. 33

    Six Revisions just did a piece on Agile Web Development:

    http://sixrevisions.com/web-development/agile/

    While traditional processes like this are useful to learn, I’m not convinced that the process outlined above will live for more than a couple more years except in very high risk scenarios (i.e. banking, security, etc.).

    (Full disclosure, I wrote the piece over at six revisions)

    -2
  20. 34

    Hello all,

    Great discussion so far – I’m glad that this has helped some be introduced to the world of process design, and the critiques are always welcome.

    I think that the best, and most efficient, approach is always to have concurrent development when possible, and have the different aspects inform each other in a healthy way. For example, the framework being built, while the design is constructed, while the content strategy is begun; all after careful planning. This is especially true when working with a team rather than as an individual.

    This article was meant to provide a bare-bones (and yes, ideal) roadmap for those who don’t currently follow a process, so that they can get an idea of what it is, and how the general concept can improve their business.

    Do you use a different process for different types of projects? I’d love to get a glimpse at some of yours.

    5
  21. 35

    I think this is a nice, detailed overview. I think the only processes I differ on would be content and marketing strategy/SEO. I think that both of those items come higher on my list.

    If content isn’t started early it can sometimes have to get shoehorned into the layout or the layout was meant for more text than they come up with. The content should also drive the sitemap and how the end user will flow through the site. I prefer to work with the client on content from the start so that the sitemap and design work with the content to deliver a good end user experience. The content can certainly evolve and get polished over the course of the build, but roughs or detailed plans need to be established early I think.

    Marketing also comes up early since good code is so important for a well optimized site. The who you plan to reach and how you plan to reach them can really impact what features you decide to build in and how you organize the design of the page. For me those things are part of the beginning planning stage. I also think the launch of schema.org will add a small layer to that conversation as well since it will impact the code side.

    3
  22. 36

    This is a great article, thank you. To me, the takeaway isn’t the sample process, but instead to focus on creating, tweaking and implementing a process into your workflow. It will benefit you and your clients.

    Like most of the commenters, I would disagree with the flow of the sample but that’s not as important as the true message. I’d love to see some follow-up posts that detail individual processes. I’d lean towards the “content first” flow and am currently studying how to implement a mobile first/responsive workflow.

    2
  23. 37

    Hi Luke, a very helpful article. Havent cme across such a detailed & step-by-step guide for website designers in a long time. We happen to write a similar article on ‘Web Design Essentials’ on our blog. Do find time to express your views n the same. http://blog.vizzmedia.com/?p=437

    0
  24. 38

    it’s very impresive

    -3
  25. 39

    The importance of providing the right deliverables for the right audiences is certainly something you learn over time.

    I have been in far too many meetings where technical specs are being shown to sales directors and you slowly watch them become increasingly bored over the duration of the meeting.

    If you find your participants have started playing with their phones learn for the next meeting that what you brought to the table was the wrong media.

    Don’t think that doodling is the same however. As recent studies are uncovering there is a connection in certain people that doodling in meetings is a processing mechanism for what is being said. There are of course those who are genuinely bored!

    0
  26. 40

    I worked like this back in the days. I produced mock ups, wire-frame models, power points, endless pages of paper and joined meetings after meetings.

    Now I use WordPress to create the page and navigation structure and the RichWP FrameWork to create the design right in front of the client in one or two sittings (max. 4h each).

    Overall time to finish a project 3 to 8 hours (when the client is responsible for the content). While doing the set up with the client I have already given him a proper introduction into WordPress. No more mockups, no wire-frames, no unnecessary emails, less stress for me and cheaper project costs for the client. Win-Win!

    -2
  27. 41

    This a nice article, I would love to use it as a preferences for my projects. Beautiful concept and clear explanation on the points to followed to create a site on the net.

    -2
  28. 42

    This is a good article except that it’s missing an important part of the process which is researching and which should be there before planning.
    Read Jesse James Garret the elements of user experience to learn more about it.

    -1
  29. 43

    Great, you should take a look at this : http://www.designzzz.com/website-redesign-process-blasting-art/ a runtime web design process and brainstorming between designer, developer and admin :)

    -2
  30. 44

    Very informational post. I like what I read and the process defiantly puts the client at ease. Check out our site, digitaldesignzmedia.com

    -2
  31. 45

    Some of you are complaining the process is outdated, how about working somewhere where the design is given to us devs before the client has even seen it, let alone approved it.

    You’re then expected to develop as the designers change things (sometimes dramatically). So who cares if design processes like this are outdated, I’m sure there are others in the same position as me that would love some kind of process. Be grateful zealots.

    -1
  32. 46

    I would have to disagree with one point of this article. Under “Development” you have “Fill with content.” I think this is the completely wrong place to have the content step. Designing a site is always better if you have content beforehand. Knowing the message, the amount of copy, the nuances of the language, tone, etc., can really impact the flavor of the design. Design is supposed to enhance content, not simply frame it. In my experience a site designed with real content ahead of time turns out 10 times better in every case. I would suggest anyone reading this to try inserting the content step after wireframes and before design. Use the black-and-white layout to get an agnostic view of the information to be presented, which can then be enhanced through aesthetics. I understand however, that receiving content sooner is a rare luxury, but when it happens, it’s awesome. Give it a try!

    0
  33. 47

    Jaroslav Tesarik

    July 11, 2011 9:56 pm

    Great article. Thanks for sharing.

    -2
  34. 48

    Great post! Thanks for sharing your ideas with us.

    -2
  35. 49

    ERP Software Reviews

    -2
  36. 50

    I was searching for Web Design Process on Google to get ideas about process or flow charts which help me to draft steps for web design. Because, I am going to define web design process for my internal team of web designer. Here, I marked that: Content optimization is missing over here and also one important step in Web Design Process. What you think about it? Now a day, Maximum clients or business owners requite SEO friendly websites and good content on website with proper web design. Have you ever deal with this kind of stuff or issues for content optimization? I assume that SEO section or content optimization is one of important step during web design process and must require during implementation.

    @AnandHMistry

    1
  37. 51

    I like this nice overview. But what about usability testing? In my opinion there’s plenty more out there that you’re doing a great job at those processes.

    -1
  38. 52

    official cheap tory burch sale

    August 24, 2011 10:25 pm

    The wide width dress sandals from Softspots are extremely popular because of the high level of comfort they offer while retaining the style element.

    -1
  39. 53

    I read it and have try in my design process, thank for the resource

    -1
  40. 54

    good job. a sharing of experience will be

    -1
  41. 55

    good job

    -1
  42. 56

    wow great

    -1
  43. 57

    Very nicely put, a big thank you to Luke and all greats who inspire us.

    -1
  44. 58

    Thanks for the post, great info. I’m having some problems changing the meta data on Joomla. Any advice or help? The meta data fields are filled in, but the original page source isn’t changing. Any feedback would be great, thanks.

    -2
  45. 59

    Pretty good article. It’s definitely important to have a contract. With my company, we’ve learned very quickly that having the legalities mapped out is super important.

    -1
  46. 60

    If major companies advertise on your site, allow major reliable businesses to have place some advertising on your page.This can also help to increase visitor numbers and makes the site more appealing to visitors.

    0
  47. 61

    Great article. One good way to ensure that you’re going to be successful with your web project is to use a good project plan. I’ve created a free microsoft excel project planning tool and a free sample web project plan that is available freely for download from my blog at http://www.mlynn.org/2013/04/web-site-design-project-plan-free-project-template/

    0
  48. 62

    Georg S. Kuklick

    June 18, 2013 10:08 am

    Sounds like in the year 2000

    0
  49. 63

    Thank you for this article. I’m getting back into the business and have been so lost as far as what the process is these days! It doesn’t look that much different, and in fact I think it might be better. See, I remember throwing a bunch of things into a table and hoping the client would like it. I’m far more interested in having a methodical approach and being super creative for the visual part.

    0
  50. 64

    Nice outline of the process, although of course it’s never quite that linear :)

    I wrote a detailed outline of the process for redeveloping our own site (and same general one we use for clients) in case it helps anyone here:
    http://www.tiltedpixel.com/blog/the-new-tilted-pixel-how-a-website-gets-built

    But like your article, it’s important to recognize that there was a lot of overlap and iteration in the actual steps (steps 4-7 in mine). You’d get some items planned and design started (then coding), meanwhile for some items content hadn’t been written yet.

    In fact this could use some elaboration:
    “Fill with content.
    Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.”

    We find often times if the client is supplying the content, a huge part of the process is guiding them through it and keeping them on track. Otherwise projects can get delayed weeks or months as you wait for content. So I suggest working “pulling content from client” into the process! ;)

    0
  51. 65

    Perfect. It is very useful. I am a beginner, I hope this will be my motivation to keep learning web design process. Thank you so much.

    0
  52. 66

    Web design is a high priority. The web design process is definitely under rated. There are not enough people thinking about it seriously. Creating a web design that will keep your visitors engaged is a must. SEO is not enough, although it is important. Optimization should always include the design of the page as well. We have noticed that when we changed our colors to a more vibrant, color scheme that compliments our visitors stayed around longer.

    0

↑ Back to top