Author Archive

28
Jul/11

The Open Source Movement

by Luke Reimer under Design, Feeds, Web Design

  

The open source movement or philosophy is something that I am truly passionate about, and something that can have beneficial effects for all industries related to technology and its use. In this article, I’ll outline information about the philosophy, what it means for the web design industry, how you can benefit as a designer, and how you can contribute.


It’s all about participation – picture by opensourceway

One of my favourite attributes of the world of open source is its relatively innocent and philosophical nature. Too often we can get wrapped up in the dollars and cents of our industry and lose the core passion that brought us to it in the first place. Open source philosophy and resources can be a sweet glimmer of idealism that works to support the overall community through the work and generosity of its members. Not only does the result improve the quality of the web we work with, but it also aids us in each of our commercial projects by lending efficiency, solutions, and ideas that may have been a struggle to work out independently beforehand.

What is the Open Source Movement?

From a high level perspective, open source is a license (or lack of license!) that allows end users to first obtain a product or creation for free, and second to modify it as they see fit without restriction. What this does is increase distribution and improves the product over time. Keep in mind that this is quite a general definition and that open source resources can be licensed in a variety of ways – this to be covered shortly.

Beyond being a simple license designation, there is a growing philosophical and subjective side to the open source movement centering around the concept that all information should be shared with all individuals, everyone freely given opportunities to use the information, and everyone free to contribute. From a high level view, this should theoretically create more benefits over time than a privatized and competitive industry inserting limited resources and seeking financial gain.


Brand vs. Community – picture by opensourceway

A popular and well-known proponent of the open source philosophy is Canonical Ltd., the organization which releases free Linux operating system packages and develops a thriving community of software developers.

For example, imagine a PHP content management system that could go down two paths – the open source route, or the privatized route. Through the open source path, users are free to modify the code to perfectly match it to their projects, and submit any enhancements or improvements that they can offer back to the community to make the next release a better product. Under the privatized route, a team of developers would work on the project perpetually, fuelled by revenue made by selling licenses for distribution. This comes with restrictions on modifications and commercial use.

What’s The Catch?

It’s not all sunshine and smiles however, as there are benefits and detractors for each path. The benefits of open source production have been touched upon, as well as the downside of privatized competitive industry. Conversely, what are the downsides of open source and the upsides of privatization?


In a World of Registered Trademarks – picture by opensourceway

The downside of open source is that it relies on a community to support it and propel it forward. With no community, the product will be dead in the water like a sailboat with no wind. Active participants are the key ingredient to positive open source progress, and without them, the entire system breaks down. The upside of privatization, along the same lines, is that it requires no community but rather pulls from a talent pool and job market to bring the top software developers under one roof, and guarantee their input through salaries paid from the sales profits. Regular releases, diligent support, and some level of quality are all guaranteed under this model.

Overall, open source has more potential for quality, but comes with no guarantees. Privatization comes with certain guarantees but has limited potential as development is not open to the entire world. The last piece of the puzzle is political – socialist idealists generally love the open source concept, while competitive capitalist proponents may be more inclined stand beside privatization and the benefits of competitive industry.

A full description of the philosophy and its practice can be found on www.opensource.org and in this Wikipedia article.

What Does It Mean For Our Community?

Whether you’ve heard of or understood the concept of open source before, you’ve most certainly interacted with it inside the web design community. Free web templates, most content management systems, and a ton of the content featured by online web design magazines and resource lists all fall under this category. There are a ton of resources out there dedicated to moving the web design industry forward by providing free products and services as well as total transparency into the process and the source code.

To give it some perspective, try adding the phrase “open source� when you’re looking for a piece of software or a web resource using Google. Whenever you see those words on a web site, you can be guaranteed that it’s 100% free with no strings attached, and hopefully has a supporting community that you can tap into for specific questions. This is something I especially value when looking for and using a CMS.


The Open Source Success – picture by opensourceway

Under the open source philosophy, the potential for the web design community is limitless. Working together to share knowledge, resources, and best practices will propel everyone forward. The best part is that following this line of thinking will not detract from our opportunities for web design revenue. Open source resources can usually be used within commercial projects, and there remains a huge amount of potential web clients available. Indeed, continued collaboration should simply enhance the skill and experience of each designer and create a better web from the inside out.

“These changes, among others, are ushering us toward a world where knowledge, power, and productive capability will be more dispersed than at any time in our history”
- Don Tapscott, Wikinomics

Know Your Licenses

Web content isn’t simply divided between open source and commercial – there are a wide variety of licenses that fall on a scale of requirements and restrictions of use. For example, the GNU GPL (General Public License) is a “copyleft” license with details concerning source code, permissions, modifications, and more.

A comprehensive list of common software licenses can be viewed here on the GNU web site.

GPL (General Public License)

The GNU General Public License is probably the most commonly found license in application within the web design industry. Under this license you are free to modify the resource to meet your needs and even redistribute it as long as you make the source files available when doing so. GPL resources can be used in commercial projects under the right to sell copies. Full details and explanations of the terms of the GPL can be found here.

Creative Commons Licenses

Many readers will have heard of the Creative Commons. This group currently has 6 types of licenses that are also commonly used. Each of these allows others to copy and/or modify work, but only if they give credit to the author in whatever form they request. These 6 license differ in other ways, however, such as some allowing commercial redistribution and some not, and some allowing modification and others requiring none. Read all of the details here.

MIT License

The MIT license originated from the Massachusetts Institute of Technology and is also known as the “X11 License”. This type of license allows users to modify, copy, merge, publish, and/or sell the resource provided that they include a copyright notice and the MIT license permission text. Lastly, the license stipulates that there is no warranty or guarantee included with any MIT licensed resources – essentially freeing the authors from any risk of liability through their use.

The Public Domain

Often resources are completely released into the “public domain”, which means that the copyright holder waives all rights to the work and in a sense lets it into the wild with no restrictions or licenses applied. If you find these resources, use them however you’d like.

And More…

There are literally hundreds of software and web resource licenses – and many of those have multiple versions. It’s important to understand the terms of a license agreement and to be careful when using licensed materials. Great resources to read full license text and learn more are Wikipedia, Creative Commons, GNU, and The Open Source Initiative.

When In Doubt…

Contact the author! Licenses need to be taken seriously and the terms followed diligently. If any communication is unclear, or if no license type is listed at all, open licensing can’t be assumed. The best course of action in any scenario of confusion is to contact the author of the work directly and ask for specific permissions of use. Simply taking a resource and using it, or even giving credit to the author directly in its application, may not be acceptable and could even lead to legal repercussions – not to mention affecting your credibility and brand.

In fact, approaching the author of a resource with a request for its use, even uses outside the stipulations of the license, can prove beneficial. Once an author (or copyright holder) produces a resource and licenses it they will always retain the write to waive restrictions or copyrights.

How Can I Benefit From It?

I’ve already mentioned the overall benefits of free and modifiable products and services, but I’ll list some specific examples here to get you started on the right path:

Popular Open Source Projects

Web Editors

Photoshop Alternatives

Office and Web Tools

More

As you can see, open source alternatives provide the means to do everything you would ever need to accomplish during a web design project – without shelling out thousands of dollars for software licenses! It is the beginning or independent designer’s best friend.

How Can I Contribute?

This article wouldn’t do the open source community justice if it didn’t include an urge for contribution. In this community of ours we need to give as well as take – it’s great that there are so many free resources out there, but when was the last time that you created and distributed one of your own? The entire philosophy and optimism for growth rests on this principle – please give back what you can, where you can, and when you can!


The Fortune Cookie says… – picture by opensourceway

This doesn’t need to entail creating your own daunting software project, or slaving away on a free icon set. Instead, it can simply mean contributing suggestions for improvement to existing systems and communities, creating a simple plugin for a CMS, and the like. Diversity is also an important concept when contributing – take a look at what’s out there and think about what you can contribute that is both unique and useful. Be aware of these opportunities to help move our community forward and strive for an improved web.

For example, the lead developer at Fluid Media runs and maintains a GitHub social coding account to provide source code for projects as well as to contribute bug fixes found in any systems that we use.

  1. Identify a Need

    This can occur in one of two ways. First, you can observe what open source resources are currently available to the web design community and identify an area where there are few or no resources. Second, you may already have resources or even code snippets that have been used or are currently being used as part of commercial web design projects. Did you figure out the most efficient sticky footer yet? Share it!

  2. Package and Prepare

    If you’ve spotted a need or a gap in the existing resources – or something you’ve already created that could aid others in the community, put together the source files and published files, provide a bit of documentation, and presto – you’re ready for release. If you’re selecting a specific licensing path, be sure to stipulate it as clearly as possible to avoid any violations, as well as linking to the full license text and details.

  3. Publish

    There are hundreds of ways to provide the community with your open source work ranging from GitHub for code snippets to DeviantArt for icon sets and graphics. Many authors also host tips, tricks, code, graphics, or project source files on their own web sites. It’s always great to see web designers helping web designers.

Conclusion

The open source philosophy is something that I truly believe in, and open source resources are products and technology that I use often in my projects as I’m sure we all do. The talent is out there, as well as the various avenues to provide solutions – it’s up to us to keep the ball rolling and share our discoveries with the overall community to improve the web as a whole.

(sp)(rb)

Leave a Comment more...

22
Jun/11

Following A Web Design Process

by Luke Reimer under Design, Feeds, Web Design
Advertisement in Following A Web Design Process
in Following A Web Design Process  in Following A Web Design Process  in Following A Web Design Process

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:

Process99 in Following A Web Design Process

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:

Process77 in Following A Web Design Process

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.

Process66 in Following A Web Design Process

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.

Process551 in Following A Web Design Process

Some commonly used documents of freelancers:

  • Client questionnaire,
  • 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.

Process331 in Following A Web Design Process

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)

© Luke Reimer for Smashing Magazine, 2011.

Leave a Comment more...

  • Categories

  •   

  • Recent Posts

  • Archives

  • Pages

  • Meta

    • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress