responsive website, artist portfolio
This website portfolio showcases the
technical and artistic exploration of Tristan Griffin from 2011 to
2015. Acting as a first point of contact and center for Tristan's
social networks.
Tristan Griffin 2015
For project 4/capstone project the
outline was to produce a website which would function as our
portfolio, to design and create a ‘portfolio’ website which
showcases works produced within the course and/or your ideal
profession (ie print journalist, graphic designer, photographer,
video editor, etc). The portfolio can be used as an online resume
showcasing your skills. The portfolio can be done in any software of
your choice, but needs to be handed in as a link, and it was not to
be in a CMS . The portfolio needs to utilise creative aesthetic.
My arts practice
focuses on the relationship of religion, contemporary society and the
human condition and I explore this concept through various mediums,
including painting, drawing, printmaking, sculpture and now digital.
The website will need to reflect my artistic approach.
My intention for
the website was:
- Act as a first point of contact
- Act as a center for my own social networks and creative practice
- Be responsive and web/mobile friendly
- Display my technical abilities in traditional and digital mediums
- Reflect who I am and what I do
- Minimalise functional elements, such as menus
The website has
only the minimum essential pages, these being
- Selected works
- Image Archive
- Contact page
- About/CV
- Links to 20 blogger pages ( artwork/event content details )
This restriction
is to minimise the visitors chance of getting lost in the content.
Instead a large
amount of content has been added into these four pages. The Selected
works page is also the landing page of the website presenting
visitors with my artworks.
To create the
website the following code languages were used:
HTML, all
pages
CSS, all
pages
Jquery,
selected artworks/image archive
PHP,
contact page
Javascript,
selected works/image archive
Break
down of page content
Shared
page content
The menu found on
every page uses a left slide out menu. The intention was to hide as
much of the basic funtionality of the website as possible. When
opened the menu pushes the content (which is in a container) to the
right to reveal the menu and social share buttons. Facebook,
google plus and Pintrest were my choices of social networks as these
are the ones I use the most ( excluding instagram ).
Selected
works Page
This page is
presented in a psudo 3D gallery environment. And is navigated by
clicking on the left and right buttons found at the bottom of the
screen
- Features 15 artworks
- Each artwork has a didactic panel located under left/bottom of the artwork
- each of these didactic panels is then linked to a blogger page which contains more images and content for the artwork. Tho in the case of interactive artworks the link will take the visitor to the artwork.
Image
Archive page
This page is
displayed as a seamless tiled image gallery and features 80+ artworks
created between 2012 – 2015. By clicking on a thumbnail image a
jquery popup is opened with an enlarged image and the gallery is
dimmed to focus on the artwork.
About/CV page
The CV content covers only my fine arts
practice since 2011. The contact form sends an email to
tristan.griffin@hotmail.com
using the mailer.php file ( ive chosen not to use captcha as I
personally find it annoying, I may change this if I receive spam from
the website)
Contact page
This page has two purposes, to provide
links for myself to my social networks (facebook, pintrest , youtube,
griffith university and instagram ) and to act as a contact point for
potential clients.
NB: The use of blogger as the linked
content from the selected works is to take advantage of monetising
the pages with adsense. This is building apon the pages already
created in the interactivemedia group project website.
www.tristangriffin.info
is hosted by hostPapa.com, their servers are not compatable with
filezilla ( not supporting TSL connections ) the alternative was
smartFTP.com.
Rationale
and research
Choice of main page
functionality
For
the general functionality of the website, particularly the landing
page, I was interested in a non-traditional aesthetic. I initially
researched image mapping with generators such as
http://imagemap-generator.dariodomi.de/.
I moved onto parallax menu movement using CSS3 to provide depth
(provide link and screen shot) tho I found that this method was
resource heavy and detracted from showcasing my artwork. The next
step was to create a website which would scroll horizontally.
This
was inspired by the aesthetic of http://soulwire.co.uk/experiments
and http://www.secrettechnology.com/
web design layout.
This
horizontal scrolling layout can be found at
www.artworkprocess.com/tristangriffin/horizontalScrolling/index.html.
The
biggest problems with this layout was the load time due to the need
for all the large images having to be buffered on loading and the 3D
animated dropdown menu that I had implemented. It used jquery which
overrode a lot of content additions ie image popups. The menu also
pushed the content downward which, due to the horizontal scrolling on
the website, meant that the content would not be accessible or
viewable.
To
solve the menu I implemented a pure css menu which required some html
markup to create the menu list and a container for the content, and
the rest was handled with CSS styling. The advantage of this type of
menu is that I did not have to be worried about
jquery/javascript/php/css code conflicts. It is simple, clean and
mobile friendly.
The
next step was to search for a gallery system which would showcase my
selected artworks. I explerimented with MANY carousel galleries,
popout/up panels etc. I chose to explore 3D css galleries choosing
the 3D image gallery room from tympanus.net
(http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/
) which I then modified/repaired to suit my needs as it was not
properly responsive and had a few bugs ( which was noted on the
website).
To
shrinking images for thumbnails and creating webfriendly images (
some were over 5MB ) I used a free thumbnailer program. The
thumbnails have been used in the Image Archive to improve load time :
Images max size 1000px H/W thumbnails max size 200px H/W.
Easy
thumbnails --> http://www.fookes.com/easy-thumbnails
I had
difficulty finding a solution to popups for image viewing. I
experimented with w3 schools jquery popup windows
(http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image),
but found that making the image/window responsive was sluggish. The
final solution was intergrate fancybox
(http://fancyapps.com/fancybox/
) . This solution is responsive and mobile friendly (and for the
future has the capability for adding a caption).
“fancyBox
is a tool that offers a nice and elegant way to add zooming
functionality for images, html content and multi-media on your
webpages. It is built on the top of the popular JavaScript framework
jQuery and is both easy to implement and a snap to customize.
“ (fancybox 2015)
The
final time intensive implimentation was the Social networking
buttons. Most were designed for CMS applications like wordpress,
tumblr, joomla etc. For example www.addthis.com
and www.sharethis.com . I
ended up creating my own inspired by the base code of
https://simplesharebuttons.com/html-share-buttons/.
Social share buttons
for facebook, google plus, pintrest and twitter.
Conclusion
The creation of this portfolio has been useful as a tool to assess
my own own skills and professional growth. Having all these artworks
and write ups gathered in one space allowed me to see what I have
accomplished, strengths, weaknesses, and identifed what might need
improvement. But more importantly has assisted in helping me
determine the direction of my future practice, this being the
intergration of digital into my long term arts practice and
maintaining my arts diversity while explore my conceptual development
further.
As is the case with any part of an online presence, just creating a portfolio is not enough. It is going to need to tweaked and updated as time goes on. Due to time restrictions there were a few features that I was unable to add that I will be adding in the near future:
- adding of descriptions to images in the Image Archive , and social 'like' buttons
- adding of sound to the interface buttons on hover
- expanding the CV to include previous job activities OR creating a table system which relates to specific professional fields. IE fine arts, technology, management.
No comments:
Post a Comment