Workflow (fluxo de trabalho) de um Web Designer

Muitas empresas e indivíduos que precisam da ajuda de um web designer para seus sites. Claro, eles querem que olhar tão profissional quanto possível para que pudesseatrair o grupo certo de audiência. Eles confiam na web designers para fazer seus negócios online bem sucedido e para web designers se também certificar-se que eles poderiam dar o que o cliente quer.

Mas, além de adquirir e fornecer um web design grande, também é importante queambas as partes sabem o fluxo de trabalho de projeto ou processo a fim de evitar certos equívocos. Isso também irá ajudar o cliente eo designer para chegar a acordo sobre um cronograma do projeto. Tenha em mente que o cliente deve conhecer o processo de design, para que eles não teriam dúvidas sobre qualquer coisa. Explicar tudo para o cliente e fazê-los entender o processo. Isso vai ajudar muito em ter uma boa relação de trabalho com eles. Neste artigo, damos-lhe um guia sobre como fazer o seu trabalhopróprio projeto web.

1. Consulta

Primeira coisa que estaria falando com seu cliente sobre o que suas exigências são, o propósito do site, quais são as coisas que eles querem colocar no seu site, as cores que optar por usar, as imagens que deseja usar, e muitos outros da informação. Certifique-se de reunir todas as informações que você precisa na reunião inicial para que você possacomeçar a fazer uma proposta de projeto para eles. Você também tem que saber o orçamento do cliente assim que você pode limitar-se sobre o referido orçamento. Antes de vir para a primeira reunião, preparar as perguntas que você precisa perguntar.Lembre-se também para atuar profissionalmente ainda você tem que ser simpático e acolhedor, ao falar com seu cliente online e offline.

2. Fazer uma proposta de projeto

Nesta etapa, você tem tudo preparado para o cliente ver. Mostrar-lhe sua idéia de concepção do projeto, sugeriu mapa do site, linha do tempo, as aplicações de sistema e software, o custo do projeto, o papel do cliente, manutenção de sites e search engine marketing, material de marketing sugeriu, condições de pagamento, as questões de direitos autorais eo processo de aprovação . Você precisa explicar e discutir cada detalhe do projeto. Se o cliente sugere algo, aceitá-lo, mas se você acha que não é adequado para o projeto, você pode sugerir outra coisa respeitosa. Você também precisa explicar por que você acha que sua idéia é melhor. Sempre dar uma explicação honesta. O seu cliente irá apreciá-lo, porque mostra que você se importa com o projeto e o cliente também.

3. Assinatura do contrato

Nunca se envolver em qualquer transação sem um contrato. Sempre tem um. Depois de mostrar a proposta do projeto eo cliente concordaram com isso, fazer um contrato e tê-loassinado por ambas as partes. Isto lhe dará uma garantia para você e seu cliente de que tudo que já tenha discutido e acordado não pode ser mudado mais. Certifique-se também que você vai acompanhar tudo no contrato. Pelo tempo que o cliente assina-lo, você pode começar a trabalhar no projeto.

4. Aquisição de materiais necessários.

Com o sinal para começar, você precisa dos materiais para o projeto. Assim, as coisaspedido de seu cliente, como imagens, conteúdo, logos e outros. É claro, você estáapenas fazendo o projeto e é o seu cliente quem determina o conteúdo. Certifique-se que você terá imagens de alta resolução, para que ela vai ficar bem no site. Certifique-se também para reunir tudo para que você não precisaria ser chamá-los de vez em quando para esperar por algum conteúdo faltando você deixou de perguntar. Isso vai provocar um atraso para o projeto e você vai estragar o seu cronograma de projeto.

5. Fazer alguma pesquisa

Faça alguma pesquisa sobre os concorrentes do seu cliente de modo que você saberá o que fazer com seu web site. Claro, você tem que fazer isso melhor do que o site do concorrente. Além disso, determinar algumas palavras-chave que seria eficaz paraSearch Engine Optimization. Você pode sugerir isso para o cliente e tê-lo incorporado no seu site. Você também pode sugerir alguns conteúdos que podem ajudá-los a conseguir uma classificação mais elevada. Diga-lhes os resultados de sua pesquisa. Eles certamente será feliz que você teve o esforço de fazê-lo, a fim de ajudá-los.

6. Faça um Mapa do Site e Molduras Wire

Desta vez você tem que fazer um mapa do site e armações de arame. Para garantir que o conteúdo do seu site é organizado e fácil de navegar, há uma necessidade de ter um mapa do site que é um fluxograma de páginas de um web. Fora isso, também é importante para fazer wireframes. Wireframes são esqueletos de páginas importantes em um site que será usado por usuários on-line para realizar uma tarefa particular.Ambas as coisas são importantes na tomada de um site.

7. Fotografia e Imagens

Há casos em que o cliente continuará a pedido de uma fotografia tiro exclusivamente para o site. Você tem que se preparar para isso. Às vezes, eles simplesmente fornecer-lhe as imagens. Apenas certifique-se que as imagens dão-lhe têm boa qualidade e alta resolução, para que ele aparecerá bem no site.

8. Criando o projeto do Web site

Depois de recolher as fotos e fazer o mapa do site e wireframes, você pode fazer o design do site. Lembre-se dos pontos importantes do seu cliente lhe deu durante a consulta. Olhe para suas anotações e não esquecer de nada. Coloque o conteúdo do seu cliente lhe deu. Após fazer isso, mostrar para seu cliente no formato PDF e deixá-lo comentar sobre ele. Se houver correções e outros insumos, incorporá-lo no projeto.

9. Tornar o site beta

Pelo tempo que o design do site é aprovado, é hora de você fazê-lo funcionar como um website. Criá-lo em formato XHTML. Em seguida, fazer a programação de páginas XTHML, folhas de estilo CSS, Javascript e validação de elementos dinâmicos como formulários web, etc Também preparar o local para Search Engine Optimization, utilizando as tags título certo tags, meta, palavras-chave e tags alt das imagens. Você também precisa testá-lo para a compatibilidade do navegador. Seria melhor se ele roda bem qualquer tipo de navegador do público usa. Após fazer isso, fornecer um link para o cliente para que ele pudesse ver o site.

10. Tornando o conteúdo final

Quando o cliente é feito verificando o site, e você ter incorporado todas as correções do cliente, agora você pode finalizar o conteúdo do website. Claro, você tem que mostrar o resultado final para o cliente apenas no caso de haver pequenos ajustes.

11. Lançamento do site

Procure um bom host para o seu site web. Existem muitos sites de hospedagem que você pode escolher. Leia opiniões desses sites e tentar comparar as características de cada um. Desta forma, você poderia escolher o direito host. Além disso, tente testes de usabilidade antes do lançamento final do website.
Se você trabalha com um guia particular ou processo, você não vai perder nada. Isto é muito vital para garantir que seu trabalho está em sua ordem correta. Mas todo fluxo de trabalho designer não é o mesmo com outros de fluxo de trabalho. Pelo menos, nós fornecemos-lhe um guia em um processo de design web. Se existem outros pontos importantes que você gostaria de adicionar, sinta-se livre para fazê-lo.

Caixa flutuante de Redes Sociais para o seu site

Vamos aprender como colocar uma caixa de redes sociais como a da imagem do lado que irá dar um toque a mais no seu site de criatividade. Mais cuidado, tem muita gente que não gosta!

1. COMEÇANDO

Primeiramente teremos de criar uma página HTML e adicionar alguns div devidamente identificados relativamente à estrutura da página.

  <div id="wrapper">

            <div id="page-wrap">

                    <div id="content">

                        <div id="main">

                        </div>

                        <div id="sidebar">

                        </div>

                    </div>

                    <!-- O Conteúdo acaba aqui -->

            </div>

            <!-- O page-wrap acaba aqui -->

</div>

2. SEGUNDO PASSO

Adicione uma div abaixo da div page-wrap com os seus botões das redes sociais, como o Facebook, Twitter, entre outros.

<div id="floating-box">

                <div id="box">

                    <!-- Aqui insere o código dos botões -->

                </div>

              </div>

3. INTRODUZIR DADOS

É necessário para questões de teste, ter algum conteúdo. Se está a introduzir a caixa flutuante num site existente com conteúdo, salte este passo. Se não, vá aqui e copie algum texto e insira nas div main e sidebar.




4. INTRODUZIR A MAGIA

Para que a magia aconteça, é necessário introduzir algum código jQuery na tag head.

$(function() {
     var offset = $("#box").offset();
     var topPadding = 15;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#box").stop().animate({
              marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });

5. ESTILIZAR

A página e a caixa flutuante necessitam agora de alguma estilização com CSS. Você poderá dar asas à sua imaginação e criar de acordo com o seu gosto, no entanto deixamos uma sugestão valiosa.

  <style type="text/css">

  * { margin: 0; padding: 0; }

  body { font: 14px/1.4 Verdana, Arial, sans-serif; font-weight: normal;background-color: #f2f2f2;float: left;width: 100%; color: #333333;

}

  #wrapper{width: 800px;margin: 0 auto;padding: 0px;}

  #content{float: left;width: 100%;border: 1px solid #B5076D;background-color: #FFFFFF;font-size: 12px;line-height: 20px;}

  #page-wrap {  position: relative;float: left; margin: 50px 0;}

  h1{font-size: 1.6em;color: #B5076D; font-style: italic;padding: 20px;}

  p { margin: 0 0 10px 0; }

  #main { width: 460px; float: left; padding: 20px; background-color: #f1f1f1;border: 1px solid #DDDDDD; margin: 20px;display: inline;}

  #sidebar { width: 215px; float: right;border: 1px solid #DDDDDD; background-color: #f1f1f1;margin: 20px; display: inline;}

  #sidebar ul{padding: 10px;}

  #sidebar ul li{font-size: 0.9em;margin: 0 0 0 20px;}

  </style>

Além do código acima, introduza este código CSS para embelezar um pouco a caixa

  #box{position: absolute;left: -70px;border: 1px solid #B5076D;

 border-right: 0px;padding: 10px;background-color: #FFF;}

  #box div{margin: 10px 0;}

E já está. Uma caixa flutuante para as redes sociais em 5 minutos!