WEBDESIGN
Atividade Estruturada
Professor Constantino Neto
Campus Praça XI
Erik Lopes de Oliveira
2011.0224.0125
2013
Medicina Legalis
Objetivos
Este site foi desenvolvido para compor o projeto de identidade visual do cliente
atualizando o site, de forma a se adequar a nova marca e proporcionar a divulgação da
nova identidade da empresa.
Publico-alvo
O publico-alvo deste segmento é um pouco restrito, como o cliente presta serviço de
perícia técnica médica no ramo judiciário. O projeto tem como target a cartela de
clientes de meu cliente e apresentação pessoal para novos clientes. Se trata de uma
imagem estritamente profissional e sóbria.
PESQUISA DE SIMILARES
http://www.imep.com.br/index.htm
Instituto de medicina pericial
http://www.perito.med.br/
Perito med brasil
MARCA, ESTUDO DE CORES E SIMILARES
Marca do cliente
Estudo de cores:
Tipografia:
Principal: GEORGIA
#cead55 – Cor principal
ABCDEFGHIJKLMNOPQRSTUWYVXZ
abcdefghijklmnopqrstuwyvxz
#5c534f – Cor principal
Apoio: CALIBRI
ABCDEFGHIJKLMNOPQRSTUWYVXZ
#e5e6e8 – Cor de apoio
abcdefghijklmnopqrstuwyvxz
MAPA DO SITE
WIREFRAME
LAYOUT DA INTERFACE
TELAS DO SITE
AVALIAÇÃO HEURÍSTICA
0 – Não é considerado, totalmente, um problema de usabilidade
1 – Problema apenas estético: não necessita ser consertado a menos que
tenha tempo extra disponível no projeto
2 – Problema menor de usabilidade: o concerto deste problema deverá ser
baixa prioridade.
3 – Problema maior de usabilidade: é importante conserta-lo, para isso deverá
ser dado alta prioridade
4 – Catástrofe de usabilidade: é obrigatório conserta-lo, antes do produto ser
divulgado
INFORMAÇÃO PRINCIPAL: 1
INFORMAÇÃO ADICIONAL: 1
INFORMAÇÃO - CONTATO: 0
MAIN PAGE LOAD: 2
BLOG PAGE LOAD: 3
CONTACT LOAD: 0
ANEXOS:
Código fonte Main page (Somente para avaliação)
<!doctype html>
<html lang="pt-br" itemscope itemtype="http://schema.org/Person">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-Tema desenvolvido para: Medicina Legalis
Theme URI: http://www.medicinalegalis.com.br
Descrição: Tema desenvolvido para site pessoal.
Versão: Alpha 0.1
Autor: Erik Lopes de Oliveira - Contarte
Autor URI: http://www.erikoliveira.com
tags: medicina legalis, Dr. leandro, medicina forense, consultoria médicoforense
Copyright 2012 - Medicina Legalis
-->
<TITLE>Medicina Legalis - Consultoria medico pericial</TITLE>
<META NAME="author" CONTENT="Erik Lopes de Olvieira - Layout e
desenvolvimento">
<META NAME="subject" CONTENT="consultoria e perícia em medicina
forense">
<META NAME="Description" CONTENT="A Medicina Legalis é uma empresa
de consultoria médico pericial que presta serviços para pessoas físicas e
jurídicas.">
<META NAME="Classification" CONTENT="Dr. Leandro Duarte de Carvalho
CRMMG 37.977, consultoria e perícia em medicina forense">
<META NAME="Keywords" CONTENT="consultoria médica,medicina,medicina
forense,medicina legal,perito forense,perícia médica,períto médico,medicina
legalis.">
<META NAME="Geography" CONTENT="Brazil">
<META NAME="Language" CONTENT="Portuguese">
<META HTTP-EQUIV="Expires" CONTENT="never">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="PUBLIC">
<META NAME="Copyright" CONTENT="Medicina Legalis">
<META NAME="Designer" CONTENT="Erik Lopes de Oliveira">
<META NAME="Publisher" CONTENT="Contarte">
<META NAME="Generator" CONTENT="NotePad++ v1.6.5 UNICODE">
<META NAME="distribution" CONTENT="Global">
<META NAME="country" CONTENT="Brazil">
<meta name="rating" content="general" />
<meta name="robots" content="ALL" />
<meta http-equiv="refresh" content="600">
<!-- FOLHA DE ESTILO CSS -->
<link rel="stylesheet" media="screen,projection" type="text/css"
href="css/style.css">
<link href="jquery.zrssfeed.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/logoicon.ico">
<link rel="icon" href="images/logoicon.ico" type="image/x-icon"/>
<link href="//fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet"
type="text/css">
<link href="css/fontdeck.css" rel="stylesheet" type="text/css">
<!-- JAVA SCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="jquery.vticker.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>-->
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- SCRIPT EXE -->
<!-- -----------------------------------------SCRIPT DO SLIDER -->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- -----------------------------------------FIM DO SCRIPT DO SLIDER -->
</head>
<!-- INÍCIO DO CORPO -->
<body>
<div id='corpo'>
<!-- HEADER -->
<header>
<!-- hold do header - logo e nav -->
<div id="headerwrap">
<span id="clock"></span>
<script>
<!-var dayarray=new Array("Domingo","Segunda-feira","Terçafeira","Quarta-feira","Quinta-feira","Sexta-feira","Sábado")
var montharray=new
Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agost
o","Setembro","Outubro","Novembro","Dezembro")
function getthedate(){
var mydate=new Date()
var year=mydate.getFullYear()
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//Alterar o tamanho da letra aqui
var cdate="<small style='position: absolute; right: 0px; bottom:0%; marginbottom:0px; margin-right:5px;'><font color='cead55'
face='arial'><b>"+dayarray[day]+", "+daym+" de "+montharray[month]+" de
"+year+" </b></font></small>"
//"+hours+":"+minutes+":"+seconds+"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function goforit(){
if (document.all)
setInterval("getthedate()",100)
}
//-->
</script>
<div id="logo">
<a href="index.php" id="logo"><img src="img/logo.png" alt="logo medicina
legalis"/></a>
</div>
<!-- NAVEGAÇÃO -->
<nav>
<ul>
<li><a class="left" href="index.html">home</a></li>
<li><a href="Drleandro.html">Dr. leandro</a></li>
<li><a href="../wordpress/index.php">notícias</a></li>
<li><a class="right" href="contato.html">contato</a></li>
</ul>
</nav>
</div>
<!-- fim do header wrap -->
</header>
<!-- INÍCIO DO SLIDER -->
<div id="slider_wrapper">
<!-- Start of slider -->
<div id="slider" class="nivoSlider">
<img src="img/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="img/slide2.jpg"
alt="" title="#htmlcaption" /></a>
<img src="img/slide3.jpg" alt="" />
<img src="img/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em>
caption with <a href="#">a link</a>.
</div>
</div><!-- fim do slider -->
<!-- fim do slider_wrapper -->
<div class="clear"></div>
<div id="wraper">
<div id="intro">
<p class="xcolor" style="margin-bottom:1.7em !important;">A
Medicina Legalis é especializada em Medicina Forense.</p><h1 class="hcolor"
style="border-bottom:1px dotted #cead55;padding-bottom:5px;margin-bottom:5px;">Consultoria médico pericial.</h1>
<P class="color" style="textalign:justify;float:left;width:70%;margin-right:30px;">Médico perito forense,
mestre em medicina e professor de fisiologia da FCMMG, Dr. Leandro Duarte
de Carvalho é focado em consultoria e soluções médico-legal (médicopericial) de atuação cível. A Medicina Legalis Consultoria MédicoPericial<span style="font-size:12px;">®</span> presta serviços de
consultoria para pessoas físicas e à justiça.</p>
<p style="font-size: 16px; letter-spacing: -0.03em; line-height:
25px;color: rgb(119,119,119); font-family: georgia,serif; font-style: italic; fontweight: normal; padding:10px; text-shadow: 0px 1px 0px rgba(255, 255, 255,
1);">Especializações: Medicina Pericial, Medicina do Trabalho, Medicina do
Tráfego, Ergonomia e Fisiologia.</p>
<p class="xcolor" style="textalign:justify;float:left;width:70%;margin-right:30px;margin-top:10px !important;
font-size:25px !important;background:none">Elaboração de laudos oficiais em
diversas áreas da Medicina. </p>
<a class="contato_link" style="margin-top:1.5%;"
href="Drleandro.html"><strong>saiba mais</strong></a>
</div>
<div class="clear"></div>
<div id="coluna_esquerda">
<h2 class="hcolor">NOTÍCIAS <img
class="incon" alt="tweet" src="img/wordpress_social.png"/><p style="font-size:
16px; letter-spacing: -0.03em; line-height: 25px; margin: 0; color:
rgb(119,119,119); font-family: georgia,serif; font-style: italic; font-weight: normal;
padding:10px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);background:
url(img/stripes_black.png);">Fique por dentro das últimas notícias do
blog.</p></h2>
<div>
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://www.webprev.comuf.com/wordpress/?feed=rss2', {
limit: 4,
linktarget: '_blank'
});
});
</script>
<div id="test"></div>
</div>
</div>
<div id="coluna_direita">
<h2 class="hcolor">TWEETS <img class="incon"
alt="tweet" src="img/tweet.png" alt="tweeter icon"/><p style="font-size: 16px;
letter-spacing: -0.03em; line-height: 25px; margin: 0; color: rgb(119,119,119);
font-family: georgia,serif; font-style: italic; font-weight: normal; padding:10px;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);background:
url(img/stripes_black.png);">Siga <a class="twt_link"
href="https://twitter.com/intent/user?screen_name=in_sighters">Medicina
Legalis</a> no Twitter.</p></h2>
<script charset="utf-8"
src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: '470',
height: 700,
theme: {
shell: {
background: 'transparent',
color: '#353535'
},
tweets: {
background: 'transparent',
color: 'rgb (119,119,119)',
links: '#CEAD55'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('in_sighters').start();
</script>
<br>
</div>
<div class='clear'></div>
</div>
<footer>
<div id="footer_wraper">
<div class="coluna1">
<p><a href='#'>© 2012 - medicinalegalis.com.br</a></p>
<small>Designer: <a href='http://www.erikoliveira.com'>Erik
Lopes de Oliveira</a></small>
</div>
<div class="coluna2">
<img src="img/footer_signature.png" alt="medicina legalis"/>
</div>
<div class="coluna3">
<h3>redes sociais</h3>
<div class="subcoluna1">
<a href="http://www.facebook.com/contato.erik"><img class="icon"
alt="tweet" src="img/facebook.png"/></a>
<a href="http://www.facebook.com/contato.erik">facebook</a>
</div>
<div class="subcoluna1">
<a href="http://www.twitter.com/in_sighters"><img class="icon"
alt="tweet" src="img/twitter.png"/></a>
<a href="http://www.twitter.com/in_sighters">twitter</a>
</div>
<div class="subcoluna1">
<a href="../wordpress/index.php"><img class="icon" alt="tweet"
src="img/wordpress_social.png"/></a>
<a href="../wordpress/index.php">blog</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Download
