Part I - Index

groanaberrantInternet και Εφαρμογές Web

2 Φεβ 2013 (πριν από 4 χρόνια και 4 μήνες)

180 εμφανίσεις

Aaron Bell


Design & Build a Personal Website

Comprehensive Research of Design Elements

Layout Design

As quoted from Wikipedia it is a great definition of Layout Design


Beginning from early

illuminated

pages in hand
-
copied books of the

Middle Ages

and
proceeding down to intricate modern magazine and catalog layouts, proper page design has
long been a consideration in pr
inted material. With print media, elements usually consist
of

type

(text),

images

(pictures), and occasionally place
-
holde
r graphics for elements that are
not printed with ink such as

die
/
laser cutting
,

foil stamping

or

blind embossing
.

Since the advent of

personal computing
, page layout skills have expanded to

electronic
media

as well as print media. The
electronic page

is better known as a graphical user interface
(
GUI
) when

interactive elements

are included. Page layout for
interactive media

overlaps with
(and is often called)

interface design
. This usually includes interactive elements
and

multimedia

in addition to text and st
ill images.

Interactivity

takes page layout skills from
planning attraction and eye flow to the next level of planning

user experience

in collaboration
with

software engineers

and

creative directors
.
[
citation needed
]

A page layout may be designed in a rough paper and pencil sketch before producing, or
produced during the design pr
ocess to the final form. Both design and production may be
achieved using hand tools or

page layout software
. Producing a

web page

may require
knowledge of

markup languages

along with

WYSIWYG editors

to compensate for
incompatibility between platforms. Special considerations must be made for how the layout of
an

HTML

page will change (reflow) when resized by the

end
-
user
.

Cascading style sheets

are
often required to kee
p the page layout consistent between

web browsers
.

[
edit
]Grids versus templates

Grids

and

templates

are page layout design patterns used in

advertising campaigns

and
multiple
-
page publications, including

websites
.



A

grid

is a set of guidelines, a
ble to be seen in the design process and invisible to the end
-
user/audience, for aligning and repeating elements on a page. A page layout may or may
not stay within those guidelines, depending on how much repetition or variety the design
style in the serie
s calls for. Grids are meant to be flexible. Using a grid to lay out elements
on the page may require just as much or more graphic design skill than that which was
required to design the grid.

Aaron Bell




In contrast, a

template

is more rigid. A template involves repe
ated elements mostly visible
to the end
-
user/audience. Using a template to lay out elements usually involves less graphic
design skill than that which was required to design the template. Templates are used for
minimal modification of background elements a
nd frequent modification (or swapping) of
foreground content.

Most desktop publishing software allows for grids in the form of a page filled with automatic
dots placed at a specified equal horizontal and vertical distance apart. Automatic margins and
bookl
et spine (gutter) lines may be specified for global use throughout the document. Multiple
additional horizontal and vertical lines may be placed at any point on the page. Invisible to the
end
-
user/audience shapes may be placed on the page as guidelines for

page layout and print
processing as well. Software templates are achieved by duplicating a template data file, or
with

master page

features in a multi
ple
-
page document. Master pages may include both grid
elements and template elements such as header and footer elements, automatic page
numbering, and automatic table of contents features. ..

[
edit
]Front
-
end versus back
-
end

With modern media content retrieval and output technology, there is much overlap
between

visual communications

(
front
-
end
) and

information technology

(
back
-
end
). Large print
publications (thick books, especially instruc
tional in nature) and electronic pages (web pages)
require

meta data

for automatic indexing, automatic reformatting, database publishing,
dynamic page display and end
-
user interactivity.

Much of the meta data (
meta tags
) must be
hand coded or specified during the page layout process. This divides the task of page layout
between artists and engineers, or tasks the
artist/engineer to do both.

More complex projects may require two separate designs: page layout design as the

front
-
end
,
and function coding as the back
-
end. In this case, the front
-
end
may be designed using an
alternative page layout technology such as

image editing software

or on paper with hand
rendering methods. Most image editing software
includes features for converting a page layout
for use in a "What You See Is What You Get" (
WYSIWYG
) editor or features to export graphics
for desktop publishing software. WYSIWYG editors an
d desktop publishing software allow front
-
end design prior to back end
-
coding in most cases. Interface design and database publishing
may involve more technical knowledge or collaboration with information technology
engineering in the front
-
end.




Aaron Bell


Design
& Build a Personal Website

Comprehensive Research of Design Elements

Current Web Technologies

As quoted from Wikipedia it shows a small list and definition of web technologies

Technologies


The client
-
side/web browser technologies typically used in Web 2.0

development are
Asynchronous JavaScript and XML (
Ajax
),

Adobe Flash

and the

Adobe Flex

framework,
and
JavaScript
/Ajax frameworks such as

Yahoo! UI Library
,

Dojo Toolkit
,

MooTools
, and

jQuery
.
Ajax programming uses JavaScript to upload and download new data from the web server
without undergoing a full page reload.

To allow users to continue to interact with the page, communications such as data requests
go
ing to the server are separated from data coming back to the page (asynchronously).
Otherwise, the user would have to routinely wait for the data to come back before they can do
anything else on that page, just as a user has to wait for a page to complete
the reload. This
also increases overall performance of the site, as the sending of requests can complete quicker
independent of blocking and queueing required to send data back to the client.

The data fetched by an

Ajax

request is typically formatted in

XML

or

JSON

(JavaScript Object
Notation) format, two

widely used structured data formats. Since both of these formats are
natively understood by JavaScript, a programmer can easily use them to transmit structured
data in their web application. When this data is received via Ajax, the JavaScript program then

uses the

Document Object Model

(DOM) to dynamically update the web page based on the
new data, allowing for a rapid and interactive user experience. In short,
using these techniques,
Web designers can make their pages function like desktop applications. For example,

Google
Docs

uses this technique to create a Web
-
based word processor.

Adobe Flex

is another technology often used in Web 2.0 applications. Compared to JavaScript
libraries like jQuery, Flex makes it easier for programmers to populate large data grids, charts
,
and other heavy user interactions.
[23]

Applications programmed in Flex, are compiled and
displayed as Flash within the browser. As a widely available plugin independent of

W3C
(World
Wide Web Consortium, the governing body of web standards and protocols), standards, Flash is
capable of doing many things which are not currently possible in

HTML
, the language used to
construct web pages. Of Flash's many capabilities, the most commonly used in Web 2.0 is its
ability to play audio and video files. This has allowed for the creation of Web 2.0 sites where
video media is seamles
sly integrated with standard

HTML
.

Aaron Bell


In addition to Flash and Ajax, JavaScript/Ajax frameworks have recently become a very popular
means of creating Web 2.0 sites. At their core, these frameworks do

not use technology any
different from JavaScript, Ajax, and the DOM. What frameworks do is smooth over
inconsistencies between web browsers and extend the functionality available to developers.
Many of them also come with customizable, prefabricated 'widg
ets' that accomplish such
common tasks as picking a date from a calendar, displaying a data chart, or making a tabbed
panel.

On the server side, Web 2.0 uses many of the same technologies as Web 1.0. New Languages
such as

PHP
,

Ruby
,

ColdFusion
,

Perl
,

Python
,

JSP

and

ASP

are used by developers to dynamically
output data using information from files and databases. What has begun to change in Web 2.0
is the way this data is formatted.

In the early days of the Internet, there was little need for
different websites to communicate with each other and share data. In the new "participatory
web", however, sharing data between sites has become an essential capability. To share its
data with o
ther sites, a web site must be able to generate output in machine
-
readable formats
such as

XML
,

RSS
, and

JSON
. When a site's data is available in one of these formats, another
website can use it to integrate a portion of that site's functionality into itself, linking the two
together. When this design pattern is implemented, it ultima
tely leads to data that is both
easier to find and more thoroughly categorized, a hallmark of the philosophy behind the Web
2.0 movement.


Also from the notes given and researched a few to list are:



Java, Javascript, Jscript



Liveconnect



ActiveX



Java Beans



Microsoft



Sun



Netscape




Aaron Bell


Design & Build a Personal Website

Comprehensive Research of Design Elements

Best practices

Below are a few practices which in my opinion excel among other sites.


http://www.rolex.com/de#/rolex
-
watches/gmt
-
masterii/photo





Aaron Bell


Design & Build a Personal Website

Comprehensive Research of Design Elements

Best practices

Below are a few practices

which in my opinion excel among other sites.

https://zurb.notableapp.com/website
-
feedback/123999/VW
-
Lust
-
example/screenshot




Aaron Bell


Design & Build a Personal Websit
e

Comprehensive Research of Design Elements

Best practices

Below are a few practices which in my opinion excel among other sites.

http://www.giorgioarmani.com/




Aaron Bell


Design & Build a Personal Website

Comprehensive Research of Design Elements

Two Freelance Designers

Below is the analysis of Chris Spooner

http://www.spoongraphics.co.uk/


Let it be known that my website was heavily influenced from his websi
te and work.

I intended to use the same colours and texture blend of his banner/bar.

As well as the way his page was constructed, and text wise, this being an assignment my website won’t
be shown to actual clients so the text shouldn’t really matter.



Aaron Bell


De
sign & Build a Personal Website

Comprehensive Research of Design Elements

Two Freelance Designers

Below is the analysis of Chris Spooner

http://jasonsantamaria.com/


This site even though it has a nice left
-
side
d design and it’s quite clean and defined, I chose not to be
influenced by it, being the reason that Chris Spooner’
s design was more lenient in the sense that I could
let the graphics be low quality.