É a verdade que às vezes temos que e queremos produzir sites em um orçamento. Também é verdade que às vezes podemos apenas querer criar alguns sites por diversão, por isso não queremos gastar muito dinheiro com eles.

Felizmente, é aí que entra a web. Há tantos grandes avanços tecnológicos que nos permitem criar e criar websites, não apenas com orçamento, mas de graça. Desde o design da web até o desenvolvimento, há serviços totalmente gratuitos que nos permitem criar sites profissionais, não apenas sites baseados em modelos, remanescentes do final dos anos 90.

Hoje, escolhemos oito dos melhores sites para ajudar você a criar seu site - isso mesmo - tudo é baseado na Web e GRATUITO.

O design

Para muitos de nós que somos designers, podemos começar com o design do site. Ajuda-nos a visualizar o que queremos e nos dá uma ideia de como tudo vai ser configurado e funcionar. Agora, muitas vezes os designers usam programas como o Adobe Photoshop ou o Adobe Fireworks para criar um layout. Abaixo estão três aplicativos de edição de fotos que vale a pena experimentar.

Phoenix por Aviary

O que os desenvolvedores dizem:

“Desde o retoque básico de imagens até efeitos complexos, a Phoenix oferece os principais recursos de um editor de imagens de desktop com a simplicidade e a acessibilidade de um aplicativo baseado na Web.”

O que todo mundo está dizendo:

A forma como a Phoenix nos é apresentada é uma ferramenta excelente para manipulações e ajustes de imagens e similares. A grande coisa sobre Phoenix é que tem muitas das características que são familiares no Photoshop, mas são muito mais simples. Tudo o que é necessário está lá e é um pouco mais intuitivo do que softwares mais complexos como o Photoshop ou até mesmo o Gimp.

Uma vantagem adicional: a Phoenix é criada pela Aviary, que tem uma infinidade de outros aplicativos baseados na web, como um aplicativo de design de vetores e um aplicativo de efeitos de vídeo. Você pode salvar seus arquivos no Aviary (desde que seja um usuário registrado) e pode facilmente abrir projetos entre aplicativos. Isso é ótimo para qualquer designer ou ilustrador que queira tirar sua criação de vetores e criar um layout de site. Você também pode importar e trabalhar com arquivos PSD.

As desvantagens desta aplicação são que não há uma tonelada de filtros. Isso não importa muito se você estiver apenas fazendo alterações básicas nas fotos (recortar, transformar etc.), mas se você estiver aqui para criar um layout ou design mais complexo, convém experimentar um aplicativo diferente. Além disso, o Aviary salva seu trabalho por padrão sob uma licença Creative Commons, portanto, a menos que você faça alterações, você estará compartilhando todo o seu trabalho. Ele também pode publicar seu trabalho para que todos possam ver através da rede Aviary, se você quiser.

Editor de Pixlr.com

O que os desenvolvedores dizem:

“O Pixlr Editor é um editor de fotos on-line gratuito com um toque profissional. Corrigir, ajustar e filtrar suas imagens ... ”

O que todo mundo está dizendo:

Pixlr Editor praticamente se apresenta como o Photoshop online. Este aplicativo não é tão fácil de entender quanto o anterior, Phoenix. Existem tantos recursos e filtros neste Editor que são exclusivos deste programa, a maioria para edição e retoque de imagens. Seria muito difícil usar este aplicativo a partir do zero, a menos que você tenha algum conhecimento sobre retoque de fotos, bem como algum conhecimento sobre o Photoshop.

A sofisticação deste aplicativo permite mais layouts pesados ​​de imagem e designs complexos. Há uma abundância de filtros e ajustes que ajudam a personalizar a aparência de suas imagens e design. Não há muitos draw backs aqui, além de ser muito mais complicado do que a maioria dos aplicativos online, mas, por causa disso, há muito mais personalização que pode ser feita. Infelizmente, você não consegue abrir e editar arquivos PSD. No entanto, você não precisa ter uma conta para salvar os arquivos criados com o Pixlr Editor. Você pode salvá-los diretamente no disco rígido.

Splashup

O que os desenvolvedores dizem:

“O Splashup, anteriormente Fauxto, é uma poderosa ferramenta de edição e gerenciador de fotos. Com os recursos que os profissionais usam e os novatos querem, é fácil de usar, funciona em tempo real e permite que você edite várias imagens de uma só vez. O Splashup é executado em todos os navegadores, integra-se perfeitamente aos principais sites de compartilhamento de fotos e até possui seu próprio formato de arquivo para que você possa salvar seu trabalho em andamento.

O que todo mundo está dizendo:

Esta aplicação é uma boa mistura entre a simplicidade de Phoenix e a sofisticação do Pixlr Editor. Parece ser um aplicativo próximo, mas não completamente, de um copycat do Photoshop. Eu diria que não é tão intuitivo, como todas as ferramentas e botões não são os mesmos e pode ser um pouco confuso. No entanto, isso não altera o poder dos recursos de design.

A maior desvantagem que encontrei com o Splashup é que ele é construído com o Flash. Não é um grande negócio, mas provavelmente pode sugar muita memória e passar por muitos bugs e falhas. Também, novamente, eu não achei intuitivo e fácil de usar como os outros programas, principalmente por causa da implementação do Flash e da diferença em alguns botões.

A linha de fundo, no entanto, é que o Splashup é totalmente capaz de projetar um layout da web. Infelizmente, novamente, este programa não importa arquivos PSD, mas você também não precisa ter uma conta para salvar arquivos. Você pode salvá-los em seu disco rígido, bem como em uma variedade de outros locais (como Flickr, Photobucket, etc.).

Pintura Sumo

O que os desenvolvedores dizem:

Sumopaint é o mais versátil aplicativo de pintura e manipulação de fotos online. Atualmente, tem mais de 1 milhão de usuários ativos por mês e uma comunidade vibrante. ”

O que todo mundo está dizendo:

Muito parecido com os outros editores, Sumopaint leva uma punhalada bastante decente no mundo da manipulação de fotos e design. O que eu gosto sobre o Sumopaint é a integração de muitas das ferramentas que você encontra no Photoshop que não são encontradas em muitos dos outros editores online, como as ferramentas de varinha mágica e formas personalizadas. A configuração é muito semelhante à das versões anteriores do Photoshop, o que a torna muito intuitiva.

Ele possui um pouco dos recursos, filtros e ajustes mais sofisticados, o que torna mais fácil trabalhar com layouts complexos de design. Este editor é criado com o Flash, então também pode haver alguns problemas com isso, no que diz respeito a atraso e memória. Mas se você está nos editores baseados em Flash, este é obviamente o mais estelar dos dois (SplashUp).

Este aplicativo vem em vários idiomas diferentes, o que torna extremamente versátil. O Sumopaint possui uma grande comunidade de design de 4 milhões de pessoas que compartilham, colaboram, avaliam e remisturam o trabalho de cada um. Sumopaint é um dos mais fáceis de usar (especialmente quando vem do Photoshop) com alguns dos melhores recursos oferecidos.

A codificação

Dependendo do seu fluxo de trabalho desejado, você pode fazer seu projeto e codificar simultaneamente ou em duas fases separadas e distintas. Seja qual for o seu fluxo desejado, você tem que codificar seu site em algum momento. Existem muitos programas para download diferentes que usamos para codificar nossos sites, dependendo do que gostamos, mas eu juntei quatro dos melhores para web designers (não necessariamente desenvolvedores que são super fluentes em HTML ou CSS).

Gaveta

O que os desenvolvedores dizem:

“Drawter é uma ferramenta escrita em JavaScript e baseada na biblioteca jQuery. Ele fornece a você a possibilidade de literalmente desenhar o código do seu site. Ele é executado em todos os navegadores da Web, o que os torna realmente úteis e úteis. Cada tag é apresentada como uma camada que você desenhou.

Atualmente o Drawter está disponível na versão Pro, o que significa que ele é destinado apenas para webmasters - o conhecimento de HTML e CSS é necessário. O Drawter não é uma ferramenta para leigos, por enquanto, mas toda a equipe por trás do projeto está se esforçando para lançar uma nova versão chamada "Amateur". Em breve você será capaz de desenhar seus sites sem qualquer conhecimento de HTML ou CSS. Lançamento de 2010. ”

O que todo mundo está dizendo:

Como designer, o que me atraiu para o Drawter foi a capacidade de realmente desenhar o layout desejado com a régua baseada em pixels ao longo de ambos os eixos. Ele gera o código CLEAN para você e tudo o que você precisa fazer é nomear cada uma das suas seções ou divs criadas. Você pode personalizar seus divs com propriedades CSS, como cores de fundo e imagens, para ajudá-lo a ter uma idéia real de como será seu site. Você também pode brincar com as fontes e bordas e qualquer coisa para ajudá-lo a conceitualizar visualmente seu site.

O Drawter também possui muitos atributos diferentes e permite que você insira tags de formulário, tags de título e muito mais para HTML. Isso é ótimo para aqueles de nós que têm layouts que realmente exigem muito trabalho e atenção, especialmente se não temos talento para marcar. A maior desvantagem que encontrei para o Drawter é que é apenas no HTML4 - alguns podem achar que isso é um grande problema, outros não. Eu acredito que é uma daquelas coisas viáveis, especialmente se você sabe codificar em HTML5 e CSS3.

Construtor YAML

O que os desenvolvedores dizem:

"O Construtor YAML é uma ferramenta para criar visualmente layouts CSS baseados em YAML. Ele permite a configuração de características básicas de layout, como o número e o posicionamento das colunas de conteúdo, bem como a criação dinâmica de layouts baseados em grade, arrastando e soltando subtemplates. Não é bem WYSIWYG, mas perto!

O código gerado pelo Construtor é baseado na estrutura de arquivos do modelo “Projeto Simples”, para que o resultado completo possa ser copiado e colado diretamente, sem alterar nada. A marcação XHTML necessária, o layout da tela e os ajustes específicos do layout para o Internet Explorer são gerados automaticamente. ”

O que todo mundo está dizendo:

YAML Bulder é baseado novamente, mais ou menos em torno do CSS de um site do que qualquer outra coisa. O que eu achei atraente sobre o YAML foram os presets que eles já tinham - você tem seu website de duas colunas, website de três colunas, etc. Isso é ótimo se você quiser criar seu código primeiro, então entrar em um dos aplicativos de design a aparência do seu site.

Eu não achei tão fácil e intuitivo para usar como Drawter, onde você acabou de desenhar o que você queria. Basicamente YAML tem seus modelos e para ajustar e alterar tudo o que você deve encontrar as propriedades e, em seguida, digite tudo dentro Ele também não é tão vasto quanto Drawter, onde você pode fazer upload de imagens e alterar cores e inserir tags de formulário. Este é um pouco mais rigoroso na medida em que criar um quadro onde você depois ligar e chug suas imagens, bem como sua personalização. Acho que este focou um pouco mais na codificação e menos e no visual.

Mais uma vez, este editor não suporta HTML5 no momento.

jsFiddle

O que os desenvolvedores dizem:

JsFiddle é um playground para desenvolvedores da Web, uma ferramenta que pode ser usada de várias maneiras. Pode-se usá-lo como um editor on-line para trechos construídos a partir de HTML, CSS e JavaScript. O código pode então ser compartilhado com outros, embutido em um blog, etc. Usando essa abordagem, os desenvolvedores de JavaScript podem facilmente isolar os erros. Nosso objetivo é apoiar todos os frameworks ativamente desenvolvidos - ele ajuda a testar a compatibilidade ”

O que todo mundo está dizendo:

Esta é definitivamente uma aplicação mais para os desenvolvedores e marcar especialistas lá fora. Eu escolhi o jsFiddle porque ele permite que você trabalhe com diferentes bibliotecas JavaScript, como mooTools e jQuery. Ele também permite que você depure seu JavaScript e visualize a aparência do seu produto acabado.

O jsFiddle não é como os outros editores de marcação porque você tem que codificar tudo do zero aqui. É claro que isso pode ser ótimo, porque você tem mais controle sobre o que está fazendo, especialmente se souber exatamente o que deseja fazer. Muitos desenvolvedores não usam o jsFiddle para codificar páginas inteiras, mas elas o usam para depurar e resolver problemas com partes de seu JavaScript. No entanto, jsFiddle é mais do que capaz de ajudá-lo com todo o design do site.

Kodingen

O que os desenvolvedores dizem:

“Kodingen começou com dois irmãos (Devrim & Sinan) se unindo para dar algo de volta à comunidade de desenvolvedores.”

O que todo mundo está dizendo:

O que imediatamente atraiu para Kodingen foi o senso de comunidade que foi exibido. Em vez de se sentir como um editor da Web baseado em nuvem, ele realmente parecia uma rede social aberta. O objetivo do Kodingen é reduzir a quantidade de penugem que temos que suportar quando queremos criar, desenvolver, hospedar e atualizar sites. Geralmente, temos que ir a sites diferentes para cada etapa, mas a Kodingen torna isso uma loja única.

Quando você se inscreve, você recebe uma conta de hospedagem muito modesta (500 MB e 1 GB de largura de banda), mas novamente, o que eu gostei sobre isso foi o senso de comunidade. Há tantas linguagens de codificação suportadas e você está livre para se conectar com diferentes membros da comunidade para obter alguma ajuda ou se juntar a projetos. Isso é ótimo para aqueles de nós que são mais fortes no design do que no desenvolvimento e poderiam usar um pouco de ajuda de vez em quando para conseguir o nosso site onde ele precisa estar.

A maior desvantagem aqui é apenas que é Beta. Eles avisam antes que você entre para que seu URL e seus arquivos possam desaparecer no dia seguinte, então eles recomendam isso para colaborar e colaborar rapidamente. No entanto, se isso se tornasse um lançamento oficial, acho que qualquer pessoa interessada em web design e desenvolvimento deveria entrar nesse trem. Kodingen é tudo em um só lugar - não há sites pulando para fazer tudo funcionar em conjunto, é tudo em um só lugar, com a opção de fazer com que outras pessoas o ajudem. Eu não tenho certeza onde Kodingen pode dar errado.

Conclusão

Como web designers e desenvolvedores, claro, queremos usar a melhor qualidade para produzir a melhor qualidade e, felizmente, temos maneiras de fazer isso em um orçamento. Continue fazendo sua pesquisa e encontre ferramentas que ajudem você a criar sites melhores. Estes são apenas alguns dos aplicativos e sites da web de topo que ajudam pessoas com orçamento limitado.

Que outros aplicativos e programas deixamos de fora da lista que você ADORA usar?