Blog UX – user experience. Psychologia w IT, marketing, testy A/B

Oto mój prosty projekt landing page, czyli klasyczna strona lądująca mająca na celu zbieranie adresów email. Do pobrania za darmo. Prosty formularz z elementem graficznym, jak masz ochotę to śmiało modyfikuj. Przydatny do prostych zastosowania z zakresu product launch. Oparłem go na CSS3, z Googlowskimi fontami by ładniej się prezentował. Korzystajcie do woli 🙂 Poniżej kod. Na końcu do pobrania paczka z plikami do wgrania na serwer. Pamiętaj tylko o zmodyfikowaniu inputów i podpięcia swojego systemu do zbierania maili.

landing page

Kod HTML landing page

<!doctype html><html lang="en">
<head>
<meta charset="utf-8">

<title>Sing up form</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="wrapper">
<h1>Download free ebook</h1>
<h2>Na ekranie zostanie wyświetlone okno, które służy do automatycznej konfiguracji nowego konta zewnętrznego.</h2>
<img id="book_img" src="img/book.png">
<form>
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</p>
<div class="form_field">
<label for="formName">Email:</label>
<input id="formName" value="example@example.com" type="email" name="formName" required />
<label for="formName">Password:</label>
<input id="formName" type="password" name="formName" required />
<label for="formName">Confirm password:</label>
<input id="formName" type="password" name="formName" required />
</div>
<p>*Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony</p>
</form>

<div class="bottom">
<p id="back_tekst" >Back to the website</p>
<input id="send_button" type="submit" value="Download" />
</div>

<!-- proszę zostaw mojego referalla, to nic nie zaszkodzi Twojej stronie a mi będzie miło :) -->
</div>
<p id="footer">Formularz został zaprojektowany przez <a href src="http://ux.marszalkowski.org/">ux.marszalkowski.org</a></p>
</body>
</html>

Landing Page Style CSS

Najpierw reset styli przeglądarki (reset.css):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'Raleway', sans-serif;
line-height: 25px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

button {
outline:0 !important;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

A potem style landing page (style.css):

* {
box-sizing: border-box;
}

body {
background: #024359;
margin: 10;
}
div#wrapper {
background: #42ADE3;
margin: 0 auto;
width: 700px;
height: 100%;
border-radius: 2px;
}

#websiteLogo {
padding: 20px;
}

header {
display:block;
}

.button-login{
padding: 25px 20px 20px 20px;
line-height: 40px;
cursor: pointer;
float: right;
}

form{
width: 450px;
}

h1{
font-family: 'Roboto Condensed', sans-serif;
color:#F7F7F7;
font-size: 32px;
padding-top: 20px;
padding-bottom: 5px;
margin: 0;
text-align: center;
}

h2{
font-family: 'Roboto Condensed', sans-serif;
color:#F7F7F7;
font-size: 16px;
padding: 14px;
margin: 0;
text-align: center;
}

.form_field{
padding-left: 20px;
padding-bottom: 5px;
}

label{
font-family: 'Roboto Condensed', sans-serif;
color:#F7F7F7;
font-size: 18px;
margin-top: 12px;
display: block;
}

#formName{
background: #024359;
border: 0;
font-family: 'Roboto Condensed', sans-serif;
color:#F7F7F7;
padding: 10px;
width: 380px;
margin-top: 10px;
font-size: 15px;
}

p{
padding-left: 20px;
padding-right: 30px;
padding-bottom: 5px;
font-family: 'Roboto Condensed', sans-serif;
color:#B3E3F2;
font-size: 15px;
text-align: justify;
}

.bottom{
background: white;
padding: 25px;
height: 90px;
border-radius: 2px;

}

#send_button{
font-family: 'Roboto Condensed', sans-serif;
float: right;
background: #42BA1A;
color:white;
font-size: 20px;
border: 0;
width: 240px;
padding: 10px;
}

#back_tekst{
font-family: 'Roboto Condensed', sans-serif;
color:#5B9EB5;
font-size: 17px;
float: left;

}

#footer{
font-family: 'Roboto Condensed', sans-serif;
color:#5B9EB5;
font-size: 13px;
text-align: center;
}

#book_img{
float: right;
padding-top: 6%;
padding-right: 4%
}

a {
color: cadetblue;
text-decoration: none;
}

Paczka plików do pobrania

Typ od psychologii i IT, czyta w ludziach by wiedzieć więcej o stronach www.

View Comments

There are currently no comments.
Next Post

Dołącz do newslettera UX

 

Serdeczie zapraszam Cię do zapisania się do mojego newslettera o tematyce: UX, marketingu oraz projektów IT. 

Nie udostępniamy adersów email innym podmiotom.