15种方法可以制作出色的网站

这篇文章最初出现在问题213.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

+$There isn’t a single economic authority who was suggesting that 2011 was going to be a great year from a financial standpoint. While governments and industries continue battling the fallout from the banking crisis, major economies are perpetually teetering on the brink of recession. Profit warnings are commonplace and throughout every field of business, budgets are therefore strained, squeezing what’s available for online work.

+$Web designers and developers are certainly not immune to the crunch. Taxes and costs are rising, but many can expect to have to work harder to maintain income levels, and resources may be stretched across the board. We aim to help. We’ve broken down the website-creation process into 15 bite-size stages, including initial planning and content strategy, design, coding, testing, feedback, delivery and maintenance. We’ve also asked a number of experienced designers and developers in the field to recommend free or affordable tools, services and resources they think can best help you to simultaneously save money and make your working life easier.

+$Naturally, there’s some crossover between some of the stages of site creation, and so some tools make multiple appearances. Also, one person’s ‘shoestring budget’ is another’s extravagance, but we’ve attempted to focus on products that are recognised within the industry as great value for money. Nonetheless, if we’ve missed your favourite little-known inexpensive tool that you think .net’s readers should know about, write to us at+$feedback@netmagazine.com+$and let us know.

+$1) Planning products for less

+$When designing on a shoestring, the need for careful planning and time-tracking is of the utmost importance. Here are some cheap and free tools that can help:

+$You need to carefully plan your time when working to a tight budget. Joel Morgan, graphic designer at+$centresource+$, Recommends Mind-mapping App+$Mindnode+$(iOS and Mac) for sorting initial ideas. A single user licence is $19.99, but+$Freemind+$is a free alternative.

+$To organise thoughts into task lists,记住牛奶+$provides free online to-dos with reminders, sharing and location functionality. In broadly similar territory is+$Doris+$(free online, £1.19 for iOS) and for simpler online to-do lists there’sTa-da List+$WorkFlowy+$, which user experience designer+$Sjors Timmer+$says “stands out through its simple, flexible design”.

+$For Development Work,+$Linked By Air+$partner Dan Michaelson recommendsPivotal Tracker+$, (free), which he says “is iterative, focused on ‘releases’ and lets you prioritise tasks”.

+$For time-tracking, Dan Fields, director of interactive production forBKWLD,建议收成+$, also useful for expenses and invoicing. Designer安东尼卡尔扎迪拉+$considers+$toggl+$the best bet. There’s a free plan, but for $5 per month you get access to Basecamp, iCal and RSS integration, reports and the ability to track earnings. There’s no contract, so you needn’t pay every month.

Remember the Milk provides a free online means of managing tasks, with optional reminders via various services

+$Remember the Milk provides a free online means of managing tasks, with optional reminders via various services

+$2) Competitive tools for project management

+$Project management tools can be extremely costly, but there are bargains to be had out there if you know where to look. Good news: these guys do

+$Robust project-management is a must for collaborative work, or even relatively complex solo jobs.大本营37signals的+$is a firm favourite with many designers. Alec East, founder of+$THBOOM!+$, says it “scales as you need it and there’s no contract”. Its emphasis on communication and collaboration makes the $49 per month fee seem reasonable, but if money’s tight, there’s a basic plan (15 projects, 5GB storage) for $24 per month and a free plan (one project, no file-sharing).

+$Glasscubes+$also offers a free-for-life basic option (two workspaces, unlimited users) as does乱堆+$(one Workspace).

+$Jocelyn Kirby, head of marketing forMetakinetic+$considers+$Milestone Planner +$a good alternative to Basecamp, saying its relatively low cost of £120 per year gets you a “highly intuitive, intelligent project management tool created with agencies in mind”.

+$Dan Fields suggests you consider the codeoriented代码库+$(from £5 per month), which combines project management with Git, Mercurial and Subversion hosting.

+$If paying is a deal-breaker, then Travis Roberts, developer for+$centresource,建议+$Redmine+$, which has “great version control integration”. Fields adds that谷歌文档+$can also be a “great cure for everything – have Gmail host your email, and use Documents and Spreadsheets to manage resources”. He feels the suite is “unparalleled in terms of the feature-to-cost ratio, because the cost is zero”.

先生+$creative director Mike Sullivan suggests addingEvernote的+$to the mix: it’s free and it enables you to collect, store and access information from just about everywhere.

Basecamp is a firm industry favourite for project management, and there's a free (albeit limited) version

+$Basecamp is a firm industry favourite for project management, and there's a free (albeit limited) version

+$3) Inexpensive tools for content strategy

+$Affordable applications and handy web articles can help you create content strategy deliverables without breaking the bank

+$You shouldn’t think of site content purely in terms of management, hence the current move in the industry towards ensuring content strategy is a defined part of the website-creation process. This area of production concentrates heavily on research, the structure of content and how content scenarios can be validated. There’s crossover with project management and wireframing, and some tools covered in the later feedback and SEO sections are relevant – for finding out more about your audience and what potential visitors might search for.

谷歌文档+$is the recommended free tool of choice for everything else. Content strategist and copywriter Relly Annett-Baker (+$supernicestudio.com+$) has created several simple templates for content strategy deliverables using Google Spreadsheet. However, for collecting larger volumes of written material and tacking research clips to it, she recommends buying代书+$($45 for Mac and imminent for Windows). You can also get a headstart by creating templates based on content strategies from luminaries such as+$Leen Jones+$Erin Kissane

For collecting large volumes of written material and integrating research, Scrivener is the ideal port of call

+$For collecting large volumes of written material and integrating research, Scrivener is the ideal port of call

+$4) Low-cost resources for persona creation

+$It’s important to know who’ll be using your site before you forge ahead with content and design, and free or cheap tools can help you out

+$When working on persona creation, you need facilities for carrying out tasks such as recording interviews, compiling and interpreting results, and formatting and presenting defined personas. For recording, any free audio recorder should be suitable when doing interviews in person (such as+$QuickTime Playe+$r for Mac or语音备忘录+$for iOS), but a checklist in a text document may be sufficient. Richard Caddick, managing director ofCxpartners+$, Recommends Java-based+$Freemind+$for mind maps, while谷歌文档+$should be sufficient for formatting results as straightforward biographies in Document.

+$Free online resources can save you further time. The+$Fluid Project+$wiki provides useful tips on both creation (+$wiki.fluidproject.org/display/fluid/Persona+Creation+$) And Formatting (+$wiki.fluidproject.org/display/fluid/Persona+Format)和+$LUXr+$offers a ‘persona cheat sheet’ for download at+$luxr.posterous.com/persona-cheat-sheet-0

Get up to speed quickly when it comes to persona formatting by checking out examples on the Fluid Project wiki

+$Get up to speed quickly when it comes to persona formatting by checking out examples on the Fluid Project wiki

+$5) Affordable online and offline wireframing

+$If you covet Adobe Illustrator or Fireworks for wireframing, realise that there are better, more affordable alternatives out there

+$With web designers and developers increasingly understanding the value and importance in quickfire prototyping regarding a site’s structure and architecture, robust wireframing tools are key. The cheapest is+$pencil And Paper+$, wryly recommended by Nikolas Head, tech lead for+$We Love+$. He says nothing beats it for rapidly getting layout and functionality ideas down, enabling fast iterative wireframing.

+$For the next step – sharing and updating – getting online is the best bet.谷歌文档+$now includes Drawing, which is free and offers sharing, and Morten Just has created useful templates to speed things along (+$googledocs.blogspot.com/2010/05/rapid-wireframe-sketching-in-google.html)。+$SlickPlan+$is also handy for creating site maps and flow charts.

+$For more emphasis on interactivity, try只知更鸟+$(from $9 per month for two active projects),+$Jumpchart+$(free for a single 10-page project, then from $5 per month) andHotGloo+$(from $7 per month for one project). On the desktop, things are pricier, with的OmniGraffle+$(£59.99, Mac OS X) andBalsamiq Mockups+$($79, requires Adobe AIR) being firm favourites, despite the latter’s penchant for Comic Sans. However, bargains also exist, including open source vector editorInkscape中+$(Mac And Windows),+$Apple Keynote+$(£11.99 from the Mac App Store) and适用于iPad的iMockups+$(£5.99), Which UX Designer阿拉尔巴尔干+$considers a “pure joy”.

Mockingbird is a great online tool for rapidly creating wireframes. It's fees are low and there's a save-disabled free version

+$Mockingbird is a great online tool for rapidly creating wireframes. It's fees are low and there's a save-disabled free version

+$6) Bargain-basement tools for design

+$When you’re working on a site’s visual design, it pays to have handy tools available to inspire you and to speed up the creative process

+$Unless your shoestrings are made of platinum and you’re reading this feature ironically,
+$anything ‘CS’ won’t be on your radar. However, tools exist for anyone who can’t afford Adobe’s powerhouse, or who wants extras to augment tools they already own. The most famous isGIMP+$, a free Photoshop alternative for Windows, Linux and Mac that’s limited but usable if you can’t afford a commercial equivalent. For vectors, tryInkscape中+$(Mac And Windows).

+$Inspiration is important in design. For experimenting with colour palettes, try the freeAdobe KulerCOLOURlovers+$, and the iPhone apps+$Color Expert+$(£5.99) And+$cliqcliq Colors+$(£1.79).

+$If you’re looking for imagery,Flickr的+$DeviantART+$are two essential resources (although thoroughly check image licences before using anything you find on those sites), and both+$Web Snapper+$for Mac ($15) And+$SnagIt+$for Mac and Windows (£38.95) enable you to save full-window grabs of websites you’re keen on.

+$Opera software web evangelist丹尼尔戴维斯+$recommends scouring the web for free icons, clip art, grids and UI:+$Open Icon Library+$iconSweets 2名词项目图标+$by Dmitry Baranovskiy,+$Open Clipart+$, UI Elements (+$365psd.com+$), 960-pixel Grid Templates (960.gs+$) and iOS UI templates (+$www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/)。

+$And Joel Morgan recommends staying online when you’ve a design fragment you don’t want to waste time and money sourcing:TinEye+$is an increasingly competent reverse image search, and+$What The Font+$does much the same with typography. And on typography, web fonts cost money, but if you’re strapped for cash,Typekit+$gives you a single freebie (one site, two fonts from the trial library), and+$Google Font Directory+$has a growing selection.

Kuler provides huge scope for editing colour schemes

+$Kuler provides huge scope for editing colour schemes

+$7) The best SEO tools that money can't buy

+$Give your sites a fighting chance in the battle for search-engine supremacy, all without having to part with a single penny

+$With Google being the leader of search and a proponent of ‘free’, its tools naturally come recommended for working with SEO. “Generally,Google网站管理员工具 谷歌分析+$are essential for SEO insight,” says Alec East. “You can see which keywords Google considers important on your sites, which ones are driving visitors to your sites, which sites link to you and a lot more.” He also recommends the free+$SEO Sorcerer+$, which rifles through a page and provides succinct analysis on page headers, structure and content.

+$Tim Gibbon, director of元素+$, Adds That+$Google’s Webmaster Tools+$enable you to create site maps based on the protocol outlined at sitemaps.org, which Bing, Yahoo and others adhere to.+$Bing+$also offers free tools at+$bing.com/webmaster

+$Additionally, Gibbon Recommends+$Integrity+$(OS X) And+$Xenu Link Sleuth+$(Windows) for weeding out dead and poorly directed links, which can negatively impact on SEO.

+$Extensible browsers also boost SEO with free plug-ins.+$SEO For Firefox+$provides a useful overview of resources,Web开发人员+$addons.mozilla.org/en-US/firefox/addon/web-developer/+$) offers tools that can unearth SEO niggles, and+$Chrome SEO Tools+$can be found at+$chrome.google.com/webstore/search?q=seo

Google's the top dog for online research, so, unsurprisingly, its free tools are great for SEO

+$Google's the top dog for online research, so, unsurprisingly, its free tools are great for SEO

+$8) Great online resources for outsourcing

+$When you can’t complete a project on your own, you’ll need to get some help. When working on a shoestring, only the most cost-effective will do

+$This is the part of the feature guaranteed to set off the controversy alarm. Outsourcing is commonplace in the web industry, enabling agencies and freelancers to take on jobs they’d otherwise have to turn down. However, add ‘on a shoestring’ after ‘outsource’ and you can get perilously close to ‘exploitation’, so make sure you tread carefully.

+$A good first port of call for odd jobs you need to farm out for a low cost is+$freelancer.co.uk+$, which boasts two million signed-up ‘freelance professionals’, covering every weboriented field. All you need to do is post a project, await bids, select a freelancer and pay them when the job’s done. Similar sites includeElance+$Guru Employer+$. Take care when using such services, though – clear communication is key, and they’re best for clearly defined targets rather than the more subjective aspects of website creation (such as visual design). Still, if you want to brave the murky waters of cheap competitionoriented design outsourcing, point your browser at+$crowdspring.com99designs.com

+$Less controversial services include the gem+$tidypsd.com+$, which for $9 takes a messy PSD and organises its myriad layers into usefully named ones in folders, and a couple of services recommended by Sjors Timmer:+$Fiverr.com+$provides a list of things people will do for five
+$dollars (such as quick but handy usability tests on your website), while+$psd2html.com+$offers an affordable (although not exactly cheap) service for converting Photoshop documents into website templates.

Online design 'competitions' are questionable when used for commercial purposes, but they match shoestring budgets

+$Online design 'competitions' are questionable when used for commercial purposes, but they match shoestring budgets

+$9) Economical services for collaborative work

+$Chances are you rarely work on projects alone, and there are plenty of free services out there to assist with collaborative projects

+$Successful design studios thrive because of collaboration between team members, who may be located anywhere in the world. Whatever action you’re doing, chances are there’s a free (or at least cheap) tool to help.

+$Convince team members and clients to sign up toSkype的+$– top tip: go on about free phone calls until they get the hint – and that’s calls and video-conferencing dealt with. For conferencing with whiteboarding and screen-sharing,+$Vyew+$offers an ad-supported free version that can be used by up to 10 people.

+$If sharing words is your concern,谷歌文档+$is the obvious choice, with its Office-like components and online documentsharing. However, also check out text document tool+$Writeboard+$by 37signals, which provides group editing, rollback capabilities, and the ability to compare versions of documents. Like Google Docs, Writeboard is free.

+$If you’re writing code rather than words, it’s worth thinking about working withGitHub上+$. “It’s really useful to have your codebase browsable online,” says Dan Michaelson, adding that GitHub also acts as a version control repository. It’s free for open source projects, and plans otherwise start at $7 per month.

+$For sharing more general documents,Dropbox的+$SugarSync+$offer free file-sync/sharing accounts, as doesCloudApp+$. And for when working on collaborative development, Alec East says颠覆+$is a must and absolutely ideal if you’ve got freelance or remote workers in your team.

For collaborative projects, Dropbox gives you 2GB of storage for free

+$For collaborative projects, Dropbox gives you 2GB of storage for free

+$10) Low-cost tools and boilerplates for coding

+$If you’re panicking about software cost, calm your nerves by discovering the many inexpensive or free text editors, libraries and boilerplates

+$Many applications exist for working with code, from free, robust tools to those that cost you but nonetheless provide plenty of bang-per-buck.+$Coda For Mac+$is in the latter camp, costing $99, but justifying its place in this feature by offering great value – bundling an FTP client, Subversion support, a WebKit preview, a JavaScript console and more. No-frills
+$all-purpose Editor+$TextMate+$(€44.85) is also popular, as is+$CSSEdit+$(£24.18), with its ability to override live sites with local style sheets. But if you’re lacking two pennies to rub together, Morgan Adams, owner of Adams Immersive (+$adamsi.com+$), Suggests Downloading的TextWrangler+$. He uses it for coding and text cleanup, and notes that along with powerful find-and-replace, it boasts syntax colouring and tools for dealing with odd line-breaks, white space and problematic characters.

+$On Windows,+$phpDesigner+$comes recommended for PHP, CSS, HTML and JavaScript editing, although, like Coda, its €69 commercial licence might prove too rich for some. The free, open source记事本+ ++$can ably fill much the same gap, and+$PSPad+$provides another free editor for Windows users.

+$Eschewing single-platform applications, Alec East recommends日食+$, an integrated development environment that he says is “great for almost any hand-rolled coding”, boasting auto-complete, error-checking and extensions for version control. He also likes the+$Firefox Web Developer+$extension, which brings a host of dev tools to the browser, including the ability to edit CSS and HTML, and萤火+$, which provides the means to inspect and modify code in real-time.

+$More free tools come recommended by Jonathan Andrew of+$We Love+$(welove72.com):JSLint的+$is an online tool for auditing JavaScript, and can enable you to diagnose and fix problems and errors, while+$RegExr+$is a Flash app that “helps with what can be a hugely frustrating task of creating Regular Expressions”.

+$Time (and money) can also be saved by giving yourself a headstart on any given project, rather than starting from scratch each time:+$html5boilerplate.com+$html5reset.org+$provide base templates for robust websites. Should you need insight into the technology, read+$diveintohtml5.org+$– Mark Pilgrim’s excellent+$Dive Into HTML5+$book, online for free perusal; and bookmark support charts at+$findmebyip.com/litmus+$quirksmode.org/compatibility.html

Freebie TextWrangler is a hit among Mac users; it's a robust text editor with a first-rate find-and-replace function

+$Freebie TextWrangler is a hit among Mac users; it's a robust text editor with a first-rate find-and-replace function

+$11) Inexpensive tools for testing websites

+$When designing on a shoestring, testing is doubly important, whether dealing with perceived UX issues or fixing display and functionality bugs

+$For usability testing, Mac app银背+$comes highly recommended. At $69.95 it’s not cheap, but as UX consultantLeisa Reichelt+$(disambiguity.com) says, “You get all the features you want from screen-recording software without the ridiculous price tag we were used to paying for software like Morae.” If you’re strapped for cash, though, she recommends you “send PDFs via email to research participants and pick up the phone”. In the middle ground,+$Usabilla.com+$offers one free active test with 10 participants.

+$For in-browser testing, free options exist for online, local and mobile testing.Adobe BrowserLab+$is the best choice for providing screengrabs of how sites render. For working locally, explore free x86 virtualisation systemVirtualBox的+$– it’s available for Windows, Mac and Linux, but it’s handy for Mac users wanting to test in Windows without dual-booting. For dynamic sites, useMAMP+$(Mac),+$Wampserver+$(Windows) OrXAMPP+$(Windows/Mac/Linux) to create a local Apache distribution containing MySQL, PHP and Perl. For multiple Explorer installs, useIETester+$; for debugging, work with萤火+$; and for mobile tests,Opera Mobile Emulator+$Opera Mini Simulator+$Firefox for Mobile Simulator

Clearleft's Silverback isn't free, but it's great value for money when compared to competing products in the field

+$Clearleft's Silverback isn't free, but it's great value for money when compared to competing products in the field

+$12) Affordable tools for getting feedback

+$Whether you’re wanting feedback about a website you’re working on from a client, strangers or your peers, there’s a service that can help

+$Here, we’re looking at tools for getting feedback regarding a website. Clearly, there’s some crossover with usability testing, so Silverback gets another nod, but there are plenty of other tools available that can provide you with feedback on your designs.

+$Metakinetic senior designer Dan Ruffle (+$metakinetic.com+$) isn’t alone in being a big fan of+$Five Second Test+$(from free), saying it’s “great for getting quick feedback from strangers regarding the first-sight impact of your designs”. He also recommends+$Get Signoff+$(from $10 per month) as a means of getting client feedback and viewing design revisions.+$Apollo+$(free) And显着+$(from free) also provide the means to get feedback on design, content and code on any page of a website.

+$For some people, feedback means ‘peer review’.+$Concept Feedback+$has a community section where designers share constructive feedback. To post your own work, you simply have to review five other concepts. Elsewhere,Dribbble+$remains popular with high-profile designers, since it provides a handy show-and-tell for nuggets of graphic design. (Note that Dribbble participation is on several levels – you begin as a ‘spectator’ and can be ‘drafted’ by a member.)

+$MericanMade founder Dann Petty (+$mericanmade.com+$) is a big fan, and adds that+$Forrst+$is a similar site for developers (and is also invite-only).

Dribbble is invite-only, but if you can work your way into the party, it's a great place for getting feedback from peers

+$Dribbble is invite-only, but if you can work your way into the party, it's a great place for getting feedback from peers

+$13) Hosting on the cheap

+$Even when you don’t have a small fortune to spend on hosting websites you’ve designed, there are quality options to consider

+$Although Alec East rightly warns that “you really can’t cut corners on hosting,” meaning you should avoid the absolute cheapest options in favour of hosts that offer a good combination of price and quality. This is what a number of designers reckon you receive with+$Dreamhost+$. “You get shared hosting at $8.85 per month for unlimited everything and they have SVN,” enthuses Mark Eagleton, developer for+$ground(ctrl)

+$Meanwhile Dan Michaelson is a fan of “no-frills VPS provider”+$Slicehost+$(from $20 per month), arguing that the company is easier to use than more full-service providers “because you get just the options you really need in the dashboard”.

+$If you’re really tight for cash, though, you can host for less.WordPress.org+$gives you a blog
+$you can point a domain at, and Aral Balkan notes that if you’re desperate, you can even useDropbox的+$to serve a static site: “Put it in the Public folder, copy the URL to it, and, if you like,
+$forward your domain to it”. Also investigate+$Amazon’s Web Services, 如+$Simple Storage (S3)

There was almost unanimous praise for Dreamhost among the designers we spoke to

+$There was almost unanimous praise for Dreamhost among the designers we spoke to

+$14) Low-cost solutions for site maintance

+$Free and affordable content management systems combined with costeffective issue-tracking reduce the cost of maintaining your sites

+$When designing websites on a shoestring, a CMS boosts flexibility and enables the client to update a site’s content; free products includeWordPress的的Joomla+$Radiant要么Drupal的+$. Alternatively, Consider栖息+$(£35 per site), which justifies its cost by being usable and making it easy to retrofit an existing site.

+$When a site’s complete, you’ll need to know when it goes down. For one-off checks, try+$isup.me+$; but if you’ve got multiple sites to maintain, investigate+$Are My Sites Up?+$, which starts from $35 per year for tracking up to 25 sites.

+$For issue-tracking, the free+$Bugzilla+$can be used if you have the means to maintain it. Elsewhere, recommended hosted issue-tracking services include+$DoneDone+$($15 per month for three projects) and+$Sifter+$(from $14 per month for three open projects).

Perch is an affordable CMS that makes it easy to retrofit a site - great value, even for those on shoestring budgets

+$Perch is an affordable CMS that makes it easy to retrofit a site - great value, even for those on shoestring budgets

+$15) Top products for bargain delivery

+$It’s important to pick the right products for uploading websites and then billing and invoicing clients, but these things needn’t break the bank

发送+$is the FTP client of choice for many. There’s no doubt its features (including droplets, folder linking, synchronisation) are handy time-savers – great if you’re designing on a tight budget – but it’s Mac-only and costs $34. If that’s too pricey,Cyberduck的+$is a competent Mac alternative, and+$FileZilla+$remains a popular cross-platform FTP client. Otherwise, if you’re a Firefox user, the freeFireFTP的+$ably does the job of file transfer.

+$For a free, open source solution for creating and managing invoices, there’s+$Siwapp+$. If you’d prefer a free hosted solution,CurdBee+$offers an ‘easy, fast and secure online billing experience’, albeit with branded emails. Upgrade to ‘pro’ for $5 per month and you gain access to customisable emails along with support for taxes, your domain, PDF output and reminders.

+$Elsewhere,+$Project Bubble+$(from $7 per month) bundles invoicing with project management and time tracking;FreshBooks+$provides, according to developer斯蒂芬妮·路易斯+$, “inexpensive customisable online estimates, time-tracking and invoicing services, including excellent year-end reports” (it’s free for three clients, and from $19.95 per month thereafter);收成+$starts at $12 per month for three users and unlimited clients; and+$Kashoo+$(for $9.95 per month, provides useful online accounting tools that are just perfect for a small business.

If you've only a few clients, FreshBooks is a free way to manage invoices

+$If you've only a few clients, FreshBooks is a free way to manage invoices


翻译字数超限