Website Design Assignment Evaluation – Unit 44

Research into Portfolio Websites and the design thereof, as well as the technical aspects behind the creation of them, was conducted in the initial stages of the assignment. Regarding the technical aspects I investigated both the programming languages and coding styles used to create web pages, as well as how the structure of the world wide web operated, with an emphasis however on the communication between the client-side and server-side in relation to web development and access.

The research into Portfolio Websites and their design allowed me to identify good and bad elements, of which I then used to inform my own design process; avoiding bad design choices while ensuring that the good elements of design that I have analysed help inform my own work. The combination of written analysis and mood boards create a wide coverage of the design elements, allowing one to analyse and decipher the thought process behind certain design decisions, of which help inform one’s own work.

This slideshow requires JavaScript.

After having completed my research I moved onto sketching out my designs, ideating various wireframe compositions, flow-charts, pages, and design styles, accompanied by annotations and notes to further help the ideation process. Once I had settled on a design style; minimalistic and elegant, utilising negative space and clear font styles, I moved onto digital wireframing using Illustrator.

In this stage I was able to further fine-tune and trouble-shoot layout issues, using rulers and measurements to establish the desired composition and style. Once happy with the over-all layout I moved into Muse to begin creating the finished site.

For the settings of the site I made sure the Max Page Width was 1200, the Min Width 320, and the Min Height 1000, with there being 0 for Margins and Padding.

Inside the document, breakpoints were created at 450, 960, and 1200, rough estimates of different device screen sizes. This, in conjunction with Responsive Width and Height settings, as well as Pinning and composition changes on certain breakpoints, helps to create a website that contains Responsive Web Design elements.

Starting out with the actual website design, I made sure to use a Master page first. On this master page, I made sure to include all the elements that I wished to persist throughout every page on the website, these being; my name, short summary of my ‘position’, and the categories in the site.

To create this ‘header’ I created text boxes, and after some experimentation with font, settled on Batang and Batang Che for my name and sub-heading. Arial was used for the Categories section, with careful placement of each word/text box with the help of rulers. Once happy with the placement of these elements, I created a box that allowed me to hyperlink certain areas of the web-page with other pages.

After testing out the different break-points I realised that the numerous text-boxes were not aligning properly when resized. Therefore, I went into Illustrator and created a PNG of the categories section. Once completed, I moved back into Muse and placed the image, creating multiple boxes for each individual word/category that linked to their relevant pages. To make sure that the Responsive elements of the webpage worked, I ensured that Responsive Width and Height were ticked, certain elements were pinned in the right places at the right breakpoints, with composition changes being made in the relevant breakpoints as well.

As mentioned before I opted to go for a minimalistic approach for my portfolio website, allowing my artwork to be the focus. The Home page allows one to navigate to the Portfolio, Services, and About pages through interaction with the images presented. A certain hierarchy is established on this page, and persists through the others, with the placement and size of the images helping to create a composition that grounds the page and guides the eyes; this is especially true once the font, and placement thereof, is taken into consideration.

The inclusion of a pure white background, with the header parallaxing behind due to the careful placement of layers, helps to create a readable and easily digested format that allows the artwork and information presented to be the focus.

I decided to split my portfolio up into two sections, ‘Paintings’ and ‘Drawings’, with preview images at the main portfolio page that entices the viewer to investigate my body of work. This does, however, create one extra click for one to access my artwork. Although, the structure of this system provides the user with a degree of control, placing in their hands the illusion of choice as they decide which half of my gallery to view. Not only that, but the other gallery is easily accessible from the sections presented near the top of the page, with the current page highlighted in bold.

This type of design, one where the user always knows exactly where they are on the web-site and how to navigate back or to other pages, helps to create an enjoyable experience for the person viewing your work. The presence of good User Experience design directly correlates with the careful design of the User Interface, allowing all who happen upon the site to understand exactly the purpose of it, as well as how to navigate the pages.

The gallery used to display my artwork in my portfolio is a Responsive Lightbox Widget supplied by out lecturer, allowing use to upload thumbnail and full-sized images into a gallery that adapted to the web-page’s size and orientation. The resizing of the images for use as thumbnails was done in Photoshop, with short descriptions being made using the Widget’s menu. To ensure that the gallery operated smoothly, a separate element had to be added first, allowing the gallery to work as intended.

This slideshow requires JavaScript.

Lastly, I included various information regarding my services, skills and proficiencies, about myself, as well as ways to contact me.  For the Contact page I used the built-in Hyperlinking functionality in Muse, highlighting the relevant text and adding a hyperlink to an email address or external web-page. Once completed, I published the site to Business Catalyst after naming it ‘ryannothard-portfolio’.

This slideshow requires JavaScript.

The link to the website is here: ryannothard-portfolio.businesscatalyst.com

Advertisements

3D Obstacle Course Animation Evaluation

The beginning stages of the assignments consisted of mainly research, where we investigated various animation techniques, tools, and software packages. Tying in with those topics was research regarding the production pipeline of animated films and the jobs thereof, as well as a Pixar short film.

The analysis of the Pixar short film ‘Piper’, and the comparison to another one of their short films (‘For The Birds’), formed a basis for aforementioned research. Investigation into this topic was conducted both through online sources and a more traditional approach; book-based research.

Once the research had been completed we moved onto Development, where we began to plan and develop our animation, as well as the traits our character would possess. Initially, the intended character was meant to be the Fuse model we had modelled after ourselves, dressed in whatever attire we wished. However, the document we were provided with did not support the rig it was imported with and a replacement character was provided for us to use.

Before animating, storyboards and blocking sheets were created in my sketchbook, ensuring that I had a clear understanding of the main keyframes and movements within the obstacle course. Supplementing this are sketches detailing and expanding upon the Fuse character and his traits, of which were to influence his navigation of the course. Filmed references were also gathered and used to help create accurate animations.

This slideshow requires JavaScript.

For the animation we had to set the frame rate to 25 (Television output), with renders exported at 1280×720.

Regarding the actual animating of the character through the course, I made use of various tools and techniques. For the manipulation of the character I used various movement and rotation tools, selecting areas on the rig/skeleton and moving them through space. Once I was happy with the placement and where it sat on the timeline (paying attention to the current frame in relation to the previous, in the context of the set framerate) I set a Keyframe using the shortcut ‘S’.

The Graph Editor allowed me to view the differences in position of the various joints on the character, allowing me a degree of manipulation over the timing of the movements even after keyframing them. However, there are diminishing returns regarding this functionality, especially once the graph editor becomes ‘crowded’ and ‘noisy’ due to the multitude of lines and keyframes present.

To ensure naturalistic movement, I made use of filmed reference, as well as acting out the movements in my room as I was animating them. Fine-tuning and careful manipulations of the joints helped to create more natural movement, with the character seemingly balancing themselves as they move through space.

This slideshow requires JavaScript.

The animation quality improved as the time went on, with the beginning containing many errors that I was unable to fix later due to the graph editor containing a plethora of keyframes, all of which would have needed to be edited. Looking back, I could have vastly improved the animation quality if I had spent more time reviewing each movement and set of keyframes before moving onto the next.

To up the production quality, I found a free lava texture online (of which is referenced below), applying that to the ground. In addition, I added several light sources of varying warm colours, as well as adding a more metallic material (via editing the material properties of a Blinn shader) to the obstacles.

This slideshow requires JavaScript.

For the tracking camera I added it via this method; ‘Create’ -> ‘Cameras’ -> ‘Camera and Aim’ -> ‘Create’ -> ‘Three Point Circular Arc’ -> ‘Constrain’ -> Attach camera to arc via ‘Attach to Motion Path’ -> ‘Constrain’ -> ‘Parent’ or ‘Point’ Camera’s Aim with character -> manually position Camera Aim on character using keyframes, utilising the graph editor to ensure the camera moved at a pace that matched the character’s movement.

This slideshow requires JavaScript.

I initially used a regular Camera and a manually drawn Motion Path, however, the method described above was more efficient.

This slideshow requires JavaScript.

When rendering I ensured that the ‘Renderable Camera’ was set to the one attached to the Motion Path, as well as changing the Frame/Animation extension to ‘name.#.ext’. After applying all the relevant settings, I moved onto exporting, trying out different export types before settling on Targa (tga). Before rendering all the frames, I rendered the first 10, ensuring time was not wasted. I then used FCheck to determine whether the frames were exported correctly, once satisfied I moved onto rendering the entire animation. To get these frames into a proper video format, I imported them into Adobe Premiere as an ‘Image Sequence’, and then finally exporting the final video before uploading to Youtube.

This slideshow requires JavaScript.

Ideally, I would have spent more time on the overall animation, as well as experimented with each movement individually within a separate document to perfect them before moving onto the final animation. However, time was a constraint as the brief had been delivered late. Regardless, I managed to complete the animation in time for the intended deadline. We were then notified of us receiving an extension, however, as mentioned earlier editing of the completed animation would of taken up too much time and other assignments became priorities.

References

Area by Autodesk. (2007). Lava Shader Effect | Tutorials | AREA by Autodesk. [online] Available at: https://area.autodesk.com/tutorials/lava_shader_effect/ [Accessed 20 Jan. 2018].

3D Obstacle Assignment Treatment

Working Title: Unit 52 – Obstacle Challenge

 

Genre: 3D Animation

 

Duration: 30+ seconds

 

Outline: A character in military garb, created using Adobe Fuse, will be navigating an obstacle course in a 3D environment. He will traverse the obstacles before him, overcoming them with speed and agility as per his character traits.

 

Character Breakdown: The character is military-themed, created using Adobe Fuse, and possesses character traits such as; efficient, agile, fit, and precise etc.

 

Audio: There will be no audio for this animation.

 

Rationale: The military theme of the character will allow me to animate the character in a way that makes navigating the course seem easy, with the character quickly and efficiently overcoming the obstacles.

 

Research: Research is to be conducted into animations that have already been created, job roles, subject terminology, animation technology, motion, animation techniques, as well as animation tools and software.

 

Requirements and Resources: The resources required would be a sketchbook, stationery, a computer, Adobe Fuse, and Autodesk Maya.

 

Constraints and Contingency: Time constraint is a major factor, as the assignment begin date did not coincide with the date the brief was received. To resolve this, extra work and sacrifice of free time is required.

 

Legal and Ethical Considerations: I must assure that I do not infringe upon any copyright and/or plagiarism laws regarding my research.

 

Budget: Potential costs would include the items listed in ‘Requirements and Resources’, however, these items have already been previously acquired.

 

Schedule: The entire assignment should take one to two months to complete, however, due to time constraints it must be completed in under a month.

Pixar Animation Research – Unit 52

The Pixar animation pipeline is thus;

Story:

The Director of the film organises his/her team in order to fulfil their vision, initially a script is created, and then a storyboard. Story artists created a series of storyboards and conceptual drawings that they then pitch back to the Director, Writers, and Producers.

Editorial:

Editors are ever-present throughout the creation of the movie, however, at the beginning of the pipeline they work primarily upon creating an animatic utilising the storyboard panels.

Art:

Visual Development artists create, using whatever medium they desire, the look and feel of the film. Before the visual development artwork is pitched to the Director, the Art Director and Production Designer must approve the created work.

Modelling:

Here, the 3D artists build and create the models for characters, buildings, props, and various other elements within the film. They work under a modelling supervisor, working closely with the art department, utilising 3D artwork from the artists. For the characters, they create an armature and wireframe before moving onto sculpting.

Rigging:

Riggers (Character TDs) place the joints, muscles, and fat underneath the skin, allowing the animators to manipulate various nodes to create a believable performance.

Surfacing:

Texture/Surface Artists use a material library to texture various objects within the environment, each different one interacting with the lighting in different ways.

Rough Layout:

The Director of Pre-Visualisation and their team use the pre-created animatic and storyboards to create a rough 3D animation, using a 3D camera to block out the cinematography and rough character positionings.

Final Layout:

The Final Layout Supervisor and their team prepare the shots for animation, positioning the start-points of all the characters in the scenes. The use a master-shot to co-ordinate this, replacing the rough character models with higher resolution versions. After the Animation Team has created the rough animations, the team that works on the Final Layout work upon Set Dressing, Stereo Pass, and Final Composition.

Animation:

The Animation Department, with the Character Animators working under the Supervising Animator, begin working upon animating the characters, using the pre-created ‘puppets’/models that the Modelling, Rigging, and Surfacing Artists worked on. They utilise reference found online, and/or create their own, essentially acting for the characters and using that as a basis for their final animations. They figure out how the characters move in space and conduct themselves.

Crowds:

The Crowd Department, headed by the Crowds Supervisor, create the crowds seen in the film. This task is not handled by the Character Animators as the amount of characters on screen would be too much to individually animate. Several animations are created and then applied to a variety of characters, creating an algorithm that decides which animations to use and when.

Character FX:

The Character FX Department work on anything attached to a character that moves, such as hair, fur, prop and clothes (anything that a character interacts with). This Department is overseen by the Character Effects Supervisor.

FX:

FX Artists work on the effects present in the film, such as footprints, leaves rustling, colour changes, and explosions etc.

Technical Directors supervise and oversee the entire pipeline, stepping in to help fix any issues that may arise.

Matte Painting:

Matter Painters, led by the Lead Matte Painting, use colour keys created by the Art Department to help inform their paintings. These paintings, using digital paint, 3D models, and photographic images, form the many backgrounds of the film.

Lighting:

The CG Supervisor works with the Lighting Artists, using computer generated lights in combination with the other supplied artwork with the help of compositing software.

Image Finalling:

Image Finalling Artists clean up artifacting and various other visual errors in the final footage of the film, ensuring that there are no discrepancies in the final product.

Sound Design:

A Composer writes and records a score with an Orchestra, the goal of these musical pieces being to increase the emotional impact of the film. The Final Mix is created after the score has been created, with audio levels, equalisation, and various special treatments are added to the final version of the film.

Pixar Animated Short ‘Piper’ Analysis:

For the Animated Short ‘Piper’, by Pixar, various animation techniques and software programs were used to push technical and visual boundaries in the realm of computer generated animation.

Among the software used, such as; REYES, RIS, Mudbox and Autodesk Maya (Modelling), SideFX Houdini (animated FX), RenderMan Primvars and RenderMan Denoise (Final Rendered Images), and The Foundry’s Katana and Nuke (Look Development and Lighting) were several in-house software programs and packages that helped Pixar push the aforementioned boundaries, with them being; Pixar’s USD (Universal Scene Description), Pixar’s GIN, Presto (Rigging, Layout, and Animation), as well as the Presto Sculpting Brush (used to easily sculpt and manipulate models, helping the animators to create the multitude of feathers present on the characters’ bodies).

Both Forward and Inverse Kinematics have their uses, allowing the Animators to accomplish a variety of different tasks with the tools and software present.

The animation quality, as well as the visual look and feel of the short film, is several major leagues ahead of a previous animation Pixar had created, called ‘For The Birds’, with the many leaps in technical development (Software and Hardware) allowing Pixar to create visually stunning and technically astounding feats of animation, of which is furthered by the stories being depicted in these animations. These leaps are even more astounding when one reads about the history of Pixar, such as in the book ‘Creativity, Inc.’, a rather eye-opening read regarding the creation of Pixar, as well as the difficulties the company and its members faced.

References

Catmull, E. (2015). Creativity, inc. [Place of publication not identified]: Corgi.

Debruge, P. (2016). How ‘Finding Dory’ Pre-Show Short ‘Piper’ Bypassed the Pixar Pipeline. [online] Variety. Available at: http://variety.com/2016/film/news/pixar-piper-animated-short-film-finding-dory-1201807835/ [Accessed 23 Jan. 2018].

O’Hara, H. (2016). How Pixar hatched Piper: the cutting-edge tech behind the cute Finding Dory short. [online] The Telegraph. Available at: http://www.telegraph.co.uk/films/2016/06/18/how-pixar-hatched-piper-the-cutting-edge-tech-behind-their-cutes/ [Accessed 23 Jan. 2018].

Pitzel, S. (2017). Character Animation: Skeletons and Inverse Kinematics | Intel® Software. [online] Software.intel.com. Available at: https://software.intel.com/en-us/articles/character-animation-skeletons-and-inverse-kinematics [Accessed 23 Jan. 2018].

Pixar Animation Studios. (n.d.). Piper. [online] Available at: https://www.pixar.com/piper#short-films/sanjays-super-team-main-1 [Accessed 23 Jan. 2018].

Seymour, M. and Pederson, L. (2017). The tech of PIXAR part 1: <em>Piper</em> – daring to be different. [online] fxguide. Available at: https://www.fxguide.com/featured/the-tech-of-pixar-part-1-piper-daring-to-be-different/ [Accessed 23 Jan. 2018].

Trandafir, L. (2016). How LANDR Was Used to Make Pixar’s Best Short Film in Years | LANDR Blog. [online] LANDR Blog. Available at: https://blog.landr.com/landr-pixar-piper/ [Accessed 23 Jan. 2018].

Wolfe, J. (2017). ‘Piper’ and the Development of Pixar’s Presto Sculpting Brush. [online] Animation World Network. Available at: https://www.awn.com/animationworld/piper-and-development-pixar-s-presto-sculpting-brush [Accessed 23 Jan. 2018].

 

Website and Browser Research – Unit 44 Web Design

A web browser is a ‘client’ that is run on your computer, which is able to contact, and request information from, web servers. The information (usually pages constructed using Hypertext Markup Language [HTML]) that is requested via an HTTP/S query (a query language is sometime used) by the client is then located on a database (a collection of organised data) by the web server (however, if the web page is a simple HTML document then a database would not be required), and sent to the client/web browser, which then displays the information. The location of the information requested is usually denotated by a URL (Uniform Resource Identifier), an example being www.youtube.com, with a protocol commonly appearing at the beginning of the URL [examples; HTTP, HTTPS, or FTP]. However, one does not need to type out the full URL, instead, a shortened version will usually suffice.

When searching for a domain name, specifically the root of a domain (such as exampledomain.co.uk), the webserver will initially attempt to find a page named index.html (or .htm/.php/.asp). Index will usually be the name of a domain’s home page.

Other than HTML, web browsers may make use of other technologies and techniques such as JavaScript, Bootstrap, AJAX, and CSS.

HTML (Hypertext Markup Language) relates to the coding language one uses to create a webpage. Utilising hyperlinks and the ability to alter text, it is a powerful and intuitive way of creating an interactive webpage. HTML-based webpages are comprised of code, usually in short lines, that are typed into a text-file, saved, and then viewed through a web browser. The information one is presented with is no longer strings of code, but instead in a much more coherent visual format. This is due to the web browser, on the client side, rendering the information it has received for the user.

CSS (Cascading Style Sheets), on the other hand, is a language that deals with the layout and formatting of documents created using HTML, with it handling certain things such as; colours, background, images, and fonts. CSS functions, as a language, extremely similarly to that of HTML.

AJAX (Asynchronous JavaScript And XML) is not a programming language, rather, it uses a combination of JavaScript/HTML (displays and uses data), and a browser built-in XMLHttpRequest object (requests data from a web server). AJAX enables web pages to update segments/parts of themselves without the need to refresh/reload the entire page. This is achieved through its ability to exchange data with a web server in the background, updating certain areas asynchronously from the rest of the web page.

The scripting language JavaScript enables the user to create content that updates dynamically, usually requiring a foundation of HTML and CSS coding and structure to be in place for it to work optimally.

A common framework and toolkit used for HTML, CSS, and JavaScript is Bootstrap, which allows the user to create responsive, mobile-based web pages utilizing a component library. It makes use of Sass and jQuery for its various components and plugins. Bootstrap enables a user to efficiently prototype and create responsive web page designs, allowing there to be a dynamic cross-platform functionality present.

Another framework one may use is AngularJS (JavaScript), of which can be added to an HTML page using a <script> tag. AngularJS allows the user to extend HTML attributes, as well as bind data to HTML.

A cookie is a file that is stored on a web page user’s computer, containing data regarding a specific client and website. The information stored in that cookie can be accessed by the client computer or web server, usually under the intention of personalising web pages towards the user.

HTTP, HTTPS, and FTP are all protocols that contain certain rules of information exchange (usually between web browsers and web servers/clients, with HTTPS being a secure and encrypted connection. FTP (File Transfer Protocol) is the protocol used by clients and web servers in the transfer of computer files on a network.

CMS is a Content Management System, of which allows you to control the content of your website, enabling a user who has little experience in programming languages the opportunity to easily and efficiently edit their website.

PHP (Hypertext Preprocessor) is an open source scripting language that operates by interacting with servers, which execute the scripts it presents, returning information to the browser as HTML.

SQL (Structured Query Language) is a language that allows you to access and interact with databases. RDBMS (Relational Database Management System) is the basis for SQL, which stores data in objects called tables, these being collections of data entries that relate to one another, with the table utilising rows and columns to help structure the information.

ASP.NET is a framework that allows a user to create dynamic web pages, a highly desirable feature due to this era of multi-platform design for webpages/sites.

Regarding the specific parts of a website, particularly the combination of both visual and functional/technical aspects, there are a variety of components one has at their disposal.

The header and banner of a site displays to the user what the website is about and what kind of content they may expect to find on there, with the logo and name of the site’s owners displayed prominently, supporting the branding of the site and organisation it represents. The header and banner usually persist throughout the navigation of the website, staying fixed (referred to as a sticky menu), with navigational bars and categories allowing the user to efficiently travel throughout the site.

A ‘hamburger’ button is usually  comprised of three horizontal bars. Upon clicking on this icon, a menu usually appears. While useful for decluttering web pages, it may provide User Experience issues on mobile devices/platforms due to the dynamic design elements that may overly clutter the screen when opened. Adding to this issue, the usual positioning (as well as the extra click required to access certain categories/navigational menus) deters users from continuing to use the site.

A gallery is extremely useful for portfolio websites, with a visitor of a site being able to view smaller thumbnails of your work before accessing higher resolution versions of them. A slideshow or ‘lightbox’ widget may be used for this kind of content, allowing you to showcase your work in an easily accessible format.

Using social media icons and links (hyperlinks utilising HTML) will allow you to direct users to other web pages, enabling you to expand your online presence and increase traffic through a variety of sites and profiles.

A footer allows you to have certain information persist throughout your site, whilst remaining unobtrusive, and provide an area for contact information to be always present during navigation.

The main image types that would be used on my portfolio website would most likely be JPG’s and PNG’s, with a .png having the added advantage of transparency. This will allow me to create images and input images that integrate seamlessly with the rest of the web page. The file format .gif will allow me to upload animations to the site that play constantly, providing a clean way to improve the content and User Experience without cluttering the site with links to external video platforms.

However,  .svg file formats will be extremely useful when it comes interactive and responsive design, enabling me to create vector images, featuring animation, that may be interacted with. My logo or categories/sections may use this format, providing an opportunity to create interesting interactive and animated designs that help make navigating the site an enjoyable experience, as well as perpetuating and reinforcing my own personal branding.

Font Awesome is a site that enables users to easily download and use icons that are widespread and easily recognisable at various sizes, allowing you to efficiently create a coherent site without needing to manually create every single icon. Not only that, but it helps to ensure consistency regarding the visual style of the icons and components within the web site.

The images will most likely be hosted on the web server itself, with video being embedded via links through external sites such as Youtube or Vimeo. Utilising these external services to host videos takes strain off the web server, as processing that kind of information may cause the web page/site to slow down, thus providing a poor User Experience.

Inline frames allow you to embed external documents (this includes web pages) within an HTML document, enabling the user to add more content without cluttering the web page. An example would be thus; http://a.

Responsive Web Design refers to the method used to create a website designwhich enables it to be displayed well on a variety of screens, devices, and platform sizes and orientations. In order to create a responsive design for a web page, one must use HTML and CSS to enable the content to react dynamically to different screen sizes and ratios.

 

References

Beal, V. (2018). What is Query (Database Query)? Webopedia Definition. [online] Webopedia.com. Available at: https://www.webopedia.com/TERM/Q/query.html [Accessed 19 Jan. 2018].

Bem, N. (2018). CMS Website Design (Content Management System). [online] Navegabem.com. Available at: https://www.navegabem.com/services/website-design/cms-website-design.html [Accessed 19 Jan. 2018].

En.wikipedia.org. (2018). ASP.NET. [online] Available at: https://en.wikipedia.org/wiki/ASP.NET [Accessed 19 Jan. 2018].

En.wikipedia.org. (2018). Database. [online] Available at: https://en.wikipedia.org/wiki/Database [Accessed 19 Jan. 2018].

En.wikipedia.org. (2018). File Transfer Protocol. [online] Available at: https://en.wikipedia.org/wiki/File_Transfer_Protocol [Accessed 19 Jan. 2018].

En.wikipedia.org. (2018). Scalable Vector Graphics. [online] Available at: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics [Accessed 19 Jan. 2018].

Getbootstrap.com. (n.d.). Bootstrap. [online] Available at: http://getbootstrap.com/ [Accessed 19 Jan. 2018].

Html.net. (n.d.). Lesson 1: What is CSS?entutorial – HTML.net. [online] Available at: http://html.net/tutorials/css/lesson1.php [Accessed 19 Jan. 2018].

Html.net. (n.d.). Lesson 2: How does CSS work?entutorial – HTML.net. [online] Available at: http://html.net/tutorials/css/lesson2.php [Accessed 19 Jan. 2018].

Informit.com. (2006). How Web Browsers Work | How a Web Browser Works | InformIT. [online] Available at: http://www.informit.com/articles/article.aspx?p=680307 [Accessed 19 Jan. 2018].

Mozilla Developer Network. (2018). What is JavaScript?. [online] Available at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript [Accessed 19 Jan. 2018].

Rouse, M. and Lingan, J. (n.d.). What is Web server? – Definition from WhatIs.com. [online] WhatIs.com. Available at: http://whatis.techtarget.com/definition/Web-server [Accessed 19 Jan. 2018].

Shannon, R. (2012). What is HTML? | HyperText Markup Language explained. [online] Yourhtmlsource.com. Available at: http://www.yourhtmlsource.com/starthere/whatishtml.html [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). AJAX Introduction. [online] Available at: https://www.w3schools.com/xml/ajax_intro.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). Bootstrap Get Started. [online] Available at: https://www.w3schools.com/bootstrap/bootstrap_get_started.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). Introduction to AngularJS. [online] Available at: https://www.w3schools.com/angular/angular_intro.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). PHP 5 Introduction. [online] Available at: https://www.w3schools.com/php/php_intro.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). SQL Introduction. [online] Available at: https://www.w3schools.com/sql/sql_intro.asp [Accessed 19 Jan. 2018].

Whatarecookies.com. (n.d.). What are Cookies – Computer Cookies – What is a Cookie. [online] Available at: http://www.whatarecookies.com/ [Accessed 19 Jan. 2018].

Www-sld.slac.stanford.edu. (n.d.). Spining the World-Wide Wed – World Wide Web Protocols. [online] Available at: http://www-sld.slac.stanford.edu/sldwww/beamline/protocols.html [Accessed 19 Jan. 2018].

Alternatives (2015). The Ultimate Guide to Hamburger Menus and their Alternatives. [online] Apptimize. Available at: https://apptimize.com/blog/2015/07/the-ultimate-guide-to-the-hamburger-menu/ [Accessed 19 Jan. 2018].

En.wikipedia.org. (2018). Responsive web design. [online] Available at: https://en.wikipedia.org/wiki/Responsive_web_design [Accessed 19 Jan. 2018].

Gandy, D. (n.d.). Font Awesome Icons. [online] Fontawesome.io. Available at: http://fontawesome.io/icons/ [Accessed 19 Jan. 2018].

Garsiel, T. and Irish, P. (2011). How Browsers Work: Behind the scenes of modern web browsers – HTML5 Rocks. [online] HTML5 Rocks – A resource for open web HTML5 developers. Available at: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ [Accessed 19 Jan. 2018].

Smashing Magazine. (2011). Responsive Web Design – What It Is And How To Use It. [online] Available at: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/ [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). HTML iframe tag. [online] Available at: https://www.w3schools.com/tags/tag_iframe.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). HTML Iframes. [online] Available at: https://www.w3schools.com/html/html_iframe.asp [Accessed 19 Jan. 2018].

W3schools.com. (n.d.). HTML Responsive Web Design. [online] Available at: https://www.w3schools.com/html/html_responsive.asp [Accessed 19 Jan. 2018].

6 Portfolio Websites -Research Task 1-

A Dandy Punk:

Design-wise, this site displays a tend towards the illustrious, whimsical, and strange, featuring an edited photo as a background with scratchy, ink-like text and drawings littering the ‘pages’ of the site. While cohesive in its style, the website’s design and layout comes off as messy and untidy, the scratchy lines, lack of readability, and haphazard use of font creates a difficult viewing experience.

There is a bio/about me page, video/showreel pages, drawings/artwork page, and contact page, as well as social media links in the bottom right corner. A copyright is present at the bottom of the page as well. While there is a similarity between this and other sites’ use of certain features, this one attempts to add a unique flair by naming them with the archetype, world, and character the artist is building for himself (personal brand). Bio is renamed ‘ego’, the video section is renamed ‘viddy-well’, drawings are renamed ‘squid-inkings’, and contact me is named ‘summon’.

The lesson I take from this site is to craft a personal brand for myself, however, I must not let it take over and control the design of the site. Instead, I should use it to supplement the overall design direction, as well as help communicate the market that I am aiming towards.

This slideshow requires JavaScript.

Courtney Autumn Martin:

This site possesses a nice, clean aesthetic, with a cohesive colour palette that utilises white, grey, orange, and a few cooler colours as accents. The first image that appears on the page, as you are taken immediately to her illustration section, is one that show-cases the artist’s style, the content of their work, as well as creates an anchor to the rest of the site via colour, composition, and art-style.

The use of colour is utilized in a way that highlights key areas and sections of the site, as well as the page that you are currently on. Orange and grey are then recognized by the user as colours that indicate different levels of interactivity, allowing the user to effectively navigate the site, increasing the User Experience.

Font-wise, the text is clean and clear, readable and structured through a clear hierarchy of font size and styles.

The artist’s logo and name are present at the top right, with the categories and pages navigable from the top bar, allowing the user to travel throughout the site easily and efficiently. Social media links are placed in the top right corner, with contact me/email me/hire me links, utilising the aforementioned use of colour, dotted strategically and conservatively around website and its’ pages.

The portfolio itself is clearly broken up into different areas and art style types, allowing the artist to showcase their different skills to a variety of prospective employers, while still maintain a cohesive style and direction.

The placement, design, and structure of sections, icons, and categories are minimalistic and non-cluttered, something that is extremely useful to utilise when crafting one’s own website. This is especially so when the designs of the elements are custom made, as they must be coherent with the rest of the website, supporting it while not overpowering the art-work the artist wishes to display.

This slideshow requires JavaScript.

Ferris Norman:

Although this website uses a minimalistic and shape-based hierarchal layout, the overall placement and presentation feels rather cluttered and compact. There is little negative space between the images and content in the middle of the page and the navigational bar on the top of the screen. This problem is present throughout the website, all though this is presumably helpful for showcasing the work you wish to push toward the viewer, it makes it difficult to navigate the website. This is especially the case when the navigational bar at the top is replaced with another one, and one must realise that the three shapes/symbols/designs next to the artist’s logo and name at the top of the screen are actually categories that you can use to navigate with. They do relate to the logo of the artist in regard to shape design and colour scheme, however, this use of colour and shape in such a way is mostly absent from the rest of the site.

The only place that this specific colour scheme is present is on the first page of the website, where the artist wishes to show off some of their best work. While this use of a colour scheme and shape language is good for building a brand, and allowing the artwork to speak for itself without the rest of the website fighting for competition, the lack of cohesiveness actually contradicts this carefully crafted identity.

Contact me and social media/business sites and information are present at the bottom of the page, allowing a user of the website to easily contact the artist via the links and information provided.

Including an omni-present contact me/information section at the bottom of every page will make it easier for a prospective employer to contact me, increasing the chance of them doing so. One must carefully craft a good User Experience, brand identity, and body of work, all of which guides a viewer and prospective employer towards a narrative and persona that you have built for yourself. This narrative and persona helps to ensure the correct target audience is achieved, helping you to break into the industry that you desire to enter.

This slideshow requires JavaScript.

 

Gerhard Richter:

One is greeted with, immediately, a site that is formatted and structured in a way that is not conducive of a good User Experience. The body of work present in the gallery is compacted into a tiny space, taking up very little room on the webpage. The artist’s name is in a simple font, while cohesive with the use of font throughout the website, it is not an indicator of creativity. The majority of the site relates to biographies, quotes, exhibitions, literature, and news. The overall layout, use of colour and design, composition, and flow of the website is, as a whole, more reminiscent of a piece of library management software than an artist’s online portfolio.

While the colour in the artwork helps them stand out sharply from the rest of the site, of which utilises font/text and a few shades of grey to organise sections, it does not do so as effectively as it could. The scale of the images of the page pushes them out of the spotlight, with the majority of the page being taken up by vast swathes of grey, broken up by black text in simple fonts.

Social media, copyright, credits, disclaimers, and contact links are present at the bottom of the website, with a search bar, accompanied by language options, at the top right of the site.

Depending on how interconnected, busy, and in-depth my site is, I may need to consider adding a search bar for easy navigation. The use of social media and contact links may be a favourable choice as well, depending on the amount of social media accounts relating to art, business, and personal brand/marketing are used.

This slideshow requires JavaScript.

Jakub Javoraj:

The Art Station portfolio service is incredibly effective, with the artist able to organise their work via sections, or leave it in an ‘ALL’ display. The artwork itself is displayed in neatly arranged blocks, listed five across, more appearing down the page as you scroll. One is able to navigate to the Home page, and Resume via the top right of the screen, with the artist’s own custom logo and personal branding present at the top left.

The style, hierarchy, and composition of the website utilises white, blue, dark grey, and a slightly light dark grey, to structure and organise the pages that the user visits, linking them through the aforementioned colour and hierarchy structure. This is furthered by the use of blue, ensuring that the user is able to see what page they are on, as well as linking the interactivity of the site with the artist’s email address, urging one to click on it via association.

Inside the resume section, the user is able to find the artist’s various social media and contact links, as well as a summary/biography of the artist, including their software proficiency, skills, location, job title, show reel, and experience/past clients list.

Overall, the Art Station portfolio website provides the artist with a clear, informative, and cohesive design template that ensures a prospective employer is able to easily navigate and view your work, as well as gain the necessary information regarding you, your character, and your skills before attempting to contact you via the information provided.

Social media, contact, and copyright is present at the bottom of the screen, their designs and colours separating and integrating them with the rest of the site simultaneously. There is also a navigational button at the bottom right of the screen that appears near the bottom of the web page, allowing you to quickly re-visit the top of the page without the need to scroll back up.

It would be wise to include a clean, minimalistic design structure to my site, utilising colour, contrast, subtle variation in font style, professionalism, ease of use, and a body of work that is clearly evident upon entering the site.

This slideshow requires JavaScript.

Umberto Sculpture:

This site utilises a neutral colour scheme, with red being the accent colour throughout, of which helps to highlight certain key features, links, and the page you are currently on. While the work of the artist is clearly showcased, the formatting and structure of the rest of the website is lacking. While there is an interesting parallax effect present on one page, the rest of the site suffers from poor formatting and hierarchy, with text and elements being off-centred, their design and structure appearing as though they come from ‘get rich quick’ websites, staving the user off from interacting any further.

Negative space is used; however, tangents are threatened to be created at multiple points throughout the site, removing the effectiveness of the negative space through the poor placement of both it and the elements within the site.

An interesting technical aspect (such as the parallax effect) may be useful to include in my website, however, I do not want to distract away from my body of work, as well as the industry and career direction I wish to display.

This slideshow requires JavaScript.

 

References

a dandypunk. (2017). a dandypunk. [online] Available at: https://www.adandypunk.com/ [Accessed 13 Jan. 2018].

Javora, J. (n.d.). Jakub Javora. [online] Jakub Javora. Available at: http://javoraj.com/ [Accessed 13 Jan. 2018].

Martin, C. (n.d.). Courtney Autumn Martin Art. [online] Courtney Autumn Martin Art. Available at: https://www.camartinart.com/illustration [Accessed 13 Jan. 2018].

Norman, F. (2015). [Ferris Norman] DESIGN | ART | MOTION. [online] [Ferris Norman] DESIGN | ART | MOTION. Available at: https://www.ferrisnorman.com/munich [Accessed 13 Jan. 2018].

Richter, G. (2016). Gerhard Richter. [online] Gerhard-richter.com. Available at: https://www.gerhard-richter.com/ [Accessed 13 Jan. 2018].

UMBERTO | Sculpteur Animalier | Bronze. (n.d.). UMBERTO | Sculpteur Animalier | Bronze. [online] Available at: http://www.umbertosculpture.com/ [Accessed 13 Jan. 2018].

Live-Action Video-Game Trailer Ideas

Trailer 1 (L.A. Noir):
Synopsis/Narrative: Murder in alleyway (interchangeable setting), calling card of serial killer is Ace of Spades card. Killer uses a spade to kill his victims. Shots of investigation, tension, disagreements/arguments, and chase/fight scenes occur and escalate throughout the trailer, interspersed with scenes of a spade being dragged across a surface.
Visual/Audio Design:  Neo-noir, police lights, neon lights, contrast highlights areas in frame/composition. High contrast, night tine, bright lights/neon lights, reflections, blood on rusted metal (spade). [Killer takes care of spade? It was used to bury a family member/friend?]
Human voices, silences are contrasted by sharp scraping of spade, sudden sounds of a spade swinging and hitting something.
Motorhead Ace of Spades song?
Themes of gambling and alcohol etc.
Main Characters: 
-Lead Detective: old school and (hypocrisy? Contrasts?) plays by the rules/book, stern, stubborn
-Rookie Detective: Eager to work, uses unconventional methods, falls under investigation/framed.
-Ace of Spades Killer: Illusive mysterious, related to nookie detective. (Dynamic between these two characters, the rookie detective suspects his/her family member [clues?].
Trailer 2 (Resident Evil/Silent Hill):
-Synopsis/Narrative: Butcher’s house is haunted, people go in to investigate (dared?). They find a house infested with re-animated body parts/abominations. They attempt to find and kill the butcher’s family/soul/body in the basement (locked behind a variety of seals/locks/doors -> must acquire keys by performing ‘SAW-like’ tasks). A friend of the main character/s was taken (upon entering the house/beforehand?). This character was possibly taken apart and urge into an abomination (must be fought? Must be put out of their misery? Must be saved?).
Trailer depicts seemingly disembodied hands/arms reaching out of a gloomy darkness, across the screen, and into the camera. It appears to be conscious in a way, seeking and reaching out to prey before looking sharply at the camera. Scream is heard ->  cut to black. During the appearance and movement of the limb, audio of people talking about entering the house/news reports regarding house (and/or missing person and/or family wo used to live in the house [local legend?])
Tag line at end of trailer: RISK LIFE AND LIMB -> Release Date -> THE BUTCHER’S COVEN
Audio and Visuals: Extremely dark, low-light/gloomy visuals, body parts and figure are barely illuminated, reaching out of the darkness and appearing seemingly out of nowhere. Hushed voices, sounds of slithering/creaking, thudding, and gurgling etc.
Chanting, sudden booming voices, whispers/whispering?

Film Noir Evaluation

 

For our Film Noir Assignment, we were tasked (in groups) to shoot and act out given scenes, with each group being assigned different scenes of which all tie together to create a cohesive story. Once each individual group had shot their scenes, they were then to be shared and edited by each group, applying a greyscale filter and various adjustments.

Our group started by discussing our given scene, figuring out who would be delegated what work and how we were going to accomplish this task. Firstly, a storyboard was created, of which informed our shoot. We decided on our actor, camera operator/s, and director/s, then moving onto shooting, of which consisted of a free-form series of shot selections informed by the storyboard, as well as our knowledge of and research into Film Noir/cinematography.

We worked as a team when it came to filming and directing, giving and receiving feedback and making use of our limited time on the set. Once we had recorded all that we needed, we moved onto editing our own scene, of which was then distributed with the other’s groups clips.

Upon receiving all the footage, we moved onto editing both the visuals and audio, attempting to create a suspenseful narrative through the use of shot selection and audio effects, distorting the voice of the actor in order to create a wind-like audio effect in the background, helping to connect scenes and create tension when needed. The cuts between scenes, with voices overlaid over choice shots, helped create a cohesive narrative and story, aided by the aforementioned audio connections.

A black and white filter was then placed over the footage, with adjustments to the values and contrast as well, helping to create the Film Noir vibe created through the subject matter, delivery, editing, and story.