Design for the Internet: Critical Report

Freddy Diaz Student ID: 14009459

Introduction
This paper will analytically and reflectively explore and explain the ideas and
design decisions in consideration of the Design for the Internet website,
www.freddymdiaz.com, which was built through Dreamweaver CC. It will provide
rationale behind the website, including deliberations on such conceptualisations as
content, navigation, target audience, interactivity, infrastructure and technical
approach.
Design Concept and Content
'Simplicity is the ultimate form of sophistication' (Leonardo Da Vinci). This
statement, really drove my design concepts and decisions for this website.
Furthermore, 'the principles of good human-to-computer interface design are
simplicity, support, clarity, encouragement, satisfaction, accessibility, versatility, and
personalization' (Lee, 2007).
Before coming up with the final design concept for the website, I considered,
Rhode's statement that, 'adding sketching to the design process is a great way to
amplify software and hardware tools. Sketching provides a unique space that can
help you think differently, generate a variety of ideas quickly, explore alternatives with
less risk, and encourage constructive discussions with colleagues and clients'
(2011). As it can be so useful and it is perhaps common good practice to create an
illustrated mock-up on paper, I drew some concept ideas, as well as created more
refined digital graphic design layouts.
'When youre sketching, your mind is free to play and explore other directions
that surface. Sketches help filter out rabbit hole ideasconcepts that are
impossible to produce or impractical to deliver on. Drawing out ideas works as an
early detection systemrevealing potential issues before significant time is invested'
(Rhode, 2011). This certainly was revealed for me with the creation of my website
design concepts.
1

After settling on the general idea of the layout, I moved forwarded into the
creation of digital wire-frame designs using Adobe Photoshop. The various initial
mock-up designs were basic samples to exhibit potential header, content and
navigation and their possible positions within the site. I was inspired to create Design
1 Half & Half (fig. 1), because of visual research into other websites, such as Lukas
Haider and CIMO Cafes. This type of layout appeared to be a popular method
among both individuals and organisations. The main recognisable feature being, the
display media within large dimensions of the site, usually on 'half' of the page with
the other 'half' containing simple, complimentary content.

Figure 1.
Additionally, it was apparent that several sites had their logo contained on the
left space of the header, with the menu items on the right. This wire-frame was not
chosen for the final website design structure because I did not possess the
appropriate imagery to compliment this design. Ultimately, this felt like a good
example for an organisation opposed to a creative individual, showcasing a portfolio
of visuals and skills.

I was inspired to create the Design 2 Full Page Media (fig. 2) wire-frame
because of websites like Socio Design and Google Glass, which utilise simplicity,
including minimal content and media. Also, the media typically encompasses the
entire website dimension or a large portion of it.

Figure 2.
In regards, to Design 3 Single View, App Style (fig. 3), simplicity again was
the inspiration for this concept. After research and training, through resources, such
as Lynda, it was highly recommended to make a mobile version of a website first.
Taking this suggestion, I considered a tablet-like design, inclusive of touchscreen capabilities, in order to remove the menu items, scrolling and typical
navigation, for more simplified usability. This was the most experimentalist of all
designs. Without navigation, the content would be displayed, when the user touches
or clicks on each tile. This would activate a light box containing content reflecting the
subject matter listed on the tile.

Figure 3.
However, as this was my first website creation, I felt it would be more
appropriate to create a more standard website. After my skills are developed, further
experimentation can be pursued.
In the end, the inspiration for these three concepts and the actual creation of
them, helped inform my final concept. I fused the positives of the three designs and
created the final design. Currently, simplicity appears to be the most effective and
popular feature in website design.
It took time and several attempts, until I was satisfied with the cohesion of the
emergence of simplicity, large dimension encompassing media, and the displaying of
multiple creative images. Simplicity was key to appropriately showcase content in
order for it to appear high-quality, sophisticated and/or important. I find beauty in
simplicity and 'a beautiful design will give the user the impression that the site is easy
to use, whether it is or not. Also, it is more probable that the design will be used
because the human psyche is inexorably drawn towards beauty' (Lee, 2007).
'A personal portfolio website is all about promoting you. You are a brand, and
your name is a brand name. No one is going to know about your brand unless you
get it out there; and if youre a Web designer, developer, writer, gamer or any other

type of creative, then its essential that you have a good portfolio website' (Munroe,
2009). I reviewed Monroe's tips in consideration of my website design, including
logo, portfolio, language and communication, social networking, blog reflections and
implemented careful decision making.
However, 'some people believe that web design starts and stops with
branding. Their view is the visual identity of the brand is easily applicable to the web
through the transference of common elements such as logo, colors and typography'
(Lee, 2007).
Considering typography, I was inspired by advertising uses of big and bold
font, in effort to catch potential consumer's awareness. I also implemented large,
eye-catching text styles within my page headers. In deliberation of the exhibition of
my creative work, I chose the simplest template of gallery widget and edited it to best
reflect my 'flat' design. After all, 'if you want a golden rule that will fit everybody, this
is it: Have nothing in your houses that you do not know to be useful, or believe to be
beautiful (William Morris, cited in Powers, 2014).
In recognition of the logo and a desire for simplicity and linear clarity, I
implemented an opposing colour activation affect to indicate to the user that they
have accessed the link. The colour of the menu items is blue, whilst the logo is in
white. Only when a menu item has been accessed will it turn white, like the logo,
further indicating usability and cohesion.
Additionally, considering content organisation, I organised 'information at each
level of the Web site so that it shows a clear and logical structure to typical users'
(U.S. Dept. of Health and Human Services, 2006).
The use of video and video implementation was carefully deliberated.
Although Dreamweaver commonly facilitates HTML 5 for video configuration, I
utilised youtube and vimeo embedding, because these videos originally existed
through hosting on these sites. These videos are large files, therefore to avoid
loading issues, embedding was the most appropriate option.
Target Audience, Interactivity and Usability

As I chose to showcase my creative work, I understood that such content

would be mostly accessed by professionals within creative industries, clients
interested in creative services and generally, the target audience would include
young and/or design forward trending individuals.
Interactivity is basic for this site, as I was mostly interested in the overall
website's point of view being the main focus. Overly complicated interactivity could
have potentially distracted from the overall feature of simplicity, which I was
attempting, as well as the content of the website.
'Visual consistency is the consistent use of design elements such as
typography, layout, colors, icons, navigation, images, and backgrounds. While users
can overcome certain inconsistencies (e.g., entry fields, pushbuttons), consistent
interfaces can reduce errors and task completion times. It can also reduce learning
curves, and increase user satisfaction' (U.S. Dept. of Health and Human Services,
2006).
Due to the simplicity of the website, usability is quite straightforward and
accessible for most users. 'Conducting usability studies prior to and after a redesign
will help designers determine if changes actually made a difference in the usability of
the site. One study reported that only twenty-two percent of users were able to buy
items on an original Web site. After a major redesign effort, eighty-eight percent of
users successfully purchased products on that site' (U.S. Dept. of Health and Human
Services, 2006). Therefore, I tested my website functions through every stage of the
creation process. The Usability Guidelines also suggested to 'use background
images sparingly and make sure they are simple, especially if they are used behind
text' (U.S. Dept. of Health and Human Services, 2006).
Infrastructure and Technical Approach
Initially, I created a working prototype in Wix to test my ideas. As a designer, I
wanted to focus mostly on the graphic elements first, before considering
development. As I was still learning, attending modules at University and online
training at Lynda, the development phase came later.

At the start of the second stage, I began to design, using a mobile layout first.
However, the lack of flexibility hindered my development process and was deemed
counter-intuitive. I then reverted back to standard desktop development.
Due to complications and inconsistency with navigation in Dreamweaver, i.e.
the menu items shifting positions, from page to page, I decided to avoid this issue
and built a template in Adobe Muse. This was then exported to Dreamweaver and
furthered, in terms of functionality and usability. 'Navigation is a key factor visitors
use to decide if youre trustworthy or not. And trustworthiness is critical' (Powazek,
2006).
Starting with the Design for the Internet module, I quickly became immersed
into Web Development and Design, wanting to make a shift from Video to Web. I
wanted to learn the coding language used to build sites. Adobe Dreamweaver is a
fantastic tool in the development field, but it is just that, a tool and I wanted to learn
the bare bones HTML5 and CSS3 Code to start building sites from scratch, which is
an essential trade skill to have as a Web Developer. Using Treehouse's online
courses in Web Development, I started to learn, build and practice making sites
using HTML code with CSS to stylize them in the process. I wanted to implement
these new skills in my own site, but quickly found, that I was still a novice in coding
and needed much more training before attempting this.
Conclusion,
'A successful visual design does not take away from the content on the page
or function. Instead, it enhances it by engaging users and helping to build trust and
interest in the brand' (U.S. Dept. of Health and Human Services, 2006). After testing
the various deliberations of the design conceptualisations, I conclude that my
decisions were made to achieve this as best as possible.
In retrospection, I am aware where my design and management decisions of
the content of the website could have been improved. 'Less is more is probably the
most well-known catch phrase of the minimalist movement' (Chapman, 2010) and in
some instances, my focus on simplicity may have affected the view-ability of some of
my content, such as the viewing of my videos. Instead of the positioning of my
7

videos for consistency with cohesion, I could have implemented a light box for better
user accessibility.
Additionally, even though I found the current layout effective in usability and
design, in recognition of the 'now' page, a different approach with the displaying of
those images, could have been improved.
Now that I've achieved the successful creation of this website, I feel confident
to approach features, such as interactivity and visual engagement, with greater focus
in future website projects.

Word Count: 1, 941

8

References
Chapman, C. (2010) 'Principles of Minimalist Web Design', Smashing Magazine, 13th
May. Available: http://www.smashingmagazine.com/2010/05/13/principles-ofminimalist-web-design-with-examples/ (Accessed: 5th January, 2015)

Lee, S. (2007) 'Human-to-Human Design', A List Apart, 26th June. Available:

http://alistapart.com/article/humantohuman (Accessed: 5th January, 2015)
Munroe, L. (2009) '10 Steps To The Perfect Portfolio Website', Smashing Magazine,
26th February. Available: http://www.smashingmagazine.com/2009/02/26/10-steps-tothe-perfect-portfolio-website/ (Accessed 5th January 2015)
Powazek, D. (2006) 'Where Am I', A List Apart, 08th August. Available:
http://alistapart.com/article/whereami (Accessed: 05th January 2015)

Powers, P. (2014) Rich Media Content Lecture, London Metropolitan University.

U.S. Dept. of Health and Human Services, (2006), The Research-Based Web
Design & Usability Guidelines, Enlarged/Expanded edition. Washington: U.S.
Government Printing Office.
Rhode, M. (2011) 'Sketching: the Visual Thinking Power Tool, A List Apart, 25th
January. Avaiable: http://alistapart.com/article/sketching-the-visual-thinking-powertool (Accessed: 5th January, 2015)

Images:
Figure 1.
Diaz, F. (2015) Adobe Photoshop, Personal Creation
Figure 2.
Diaz, F. (2015) Adobe Photoshop, Personal Creation
Figure 3.
9

Diaz, F. (2015) Adobe Photoshop, Personal Creation

10