Net Art

https://austinclayinteractivedesign.000webhostapp.com/netart/index.html

Art is something that relates to color and how it can be used to create depth and focus. Also using repetition of key shapes to create to iteration based work is important. This repetition is not only in reusing the shapes, but scaling and rotating them to give them their own properties to them. Also at the same time adding motion to it, to show how all these things works together to create a unique work while it is spinning in a circle. Also allowing the viewer to look at how color and motion can change the depth and the look of a peice. By this I mean giving the viewer a choice be it limited or open one that allow them to pick the color of the work. By giving the viewer the power to choose the color of the piece, it is always changing  from person to person on how the final work looks. Causing the viewer of the work to change the color scheme and how many layers there are at one given time, causes the onlooker to be the one who has final artistic choice not the artist.

So the piece is one shape that has been repeated to make an iterative art piece where the same shape gets smaller and smaller slowly moves up to create this spiral effect. Then it was copied and rotate twice to add layers to it create depth in. To add to this the color and the different choices of color creates different amount of depth in the work. Then it was rotated show how motion adds to depth, space, and form. The shapes and coloring were all done in illustrator. The spiral was made using an effect called transform that allows me to pick how my iterations of the shape I wanted and how they would be placed. After this I simple coded them into html as images that had zero opacity and change to be shown when the color was clicked on based on which layer it was in. I made a toggle so only one color from that layer could be used at a time. Also I made an overall toggle for that layer to off all colors. I had the opacity transition  set on bezier curve for 1s so it had a slow in and slow out with fast in the middle to make the transitions between the colors smooth and clean looking. The motion was created by using a setinterval that started on load so it was rotating initially, but it could be stopped using a clearinterval with a boolean that turned it to false. Then one could restart it by hitting the play button, this reran the setinterval making it true. The boolean was made so you could only hit the play button once and not multiple times to speed up the rotation. I wanted the viewer to still to have a limited amount of influence over the work so I only allowed them to choose from 6 color options for each layer. I wanted the viewer to realize that gradient color creates more space within the piece, while flat colors flatten the piece greatly unless mixed with some gradient colors. I still wanted some control over what the final piece looked like so by limiting the color, there is only 384 options possible for the viewer to get, this way I had some control of what the finished product looked like.

 

Advertisements
Posted in Interactive, Non-timebased | Tagged , , , , | Leave a comment

Gallery Writeup Two

The Artist talk by Annette Heully took place in 215 in SET building on Alfred State Campus. It was on the April 7th, which was a Saturday at 5 pm, than her gallery open up in the Llewellyn Gallery at 6pm. She is the residence artist here at Alfred State at the moment.

Annette Heully was presenting her work that she has done over the years to us, so we could get a understanding of her work when looking at it. She  mainly works around weaving and textiles. Annette explained how she did the weaving and what the meanings behind so of her works. Also she is an artist that likes to use her art as a way to respond to things happening around her or in the political sphere. Like how she made a piece out yarn that was adaptation of picture of the wildfires around her house. She feels as an artist its her job to respond to hard topics.

Near the end she talked about how she makes her living as an artist to give us an idea how hard it can be to be an artist. She talked about how she has worked jobs she does not like to do but she did them to paid bills like making things out of leather. She is does it meat so that is hard for her to do. Also I noticed most of her paid jobs are bulk orders for big companies which is nice since you get constant work to do.

I can apply what was covered in the artist talk to DMA is that she talks about how its important to understand what you trying to make and where you want to take before starting work on it. So make sure you have some sort of plan laid out so you can follow making it easier to do the work. Also dealing with computers mistake or errors can happen sometimes this issues can lead to great things so do not get to mad about it. So I can take those ideas make sure I have a roadmap of what the plan is for design a website so I can have jumping off point and safety line but can go away from it if it works with the piece. Also do not delete mistakes so fast see if it works with the piece before removing it.

 

Posted in Lectures and Workshops, Non-timebased | Tagged , , , | Leave a comment

Site Redesign

The Nav bar, done right since you always see it also extra nav bars are small and condensed. Not over using there primary color to much also having logos and things that give off the feeling of high tech in the background to left the text off the page.  Parallax on the images is good.

Improved

The nav bar could have used javascript to add the quick links on each page to allow for faster navigation

The text show be broken up so there not as much texted in a section.

more modern layout which means curves and simply design

use more pictures to show off the school more

Concept of the brand is high tech school meant to focus on Software Engineering for kids

Communicate about there brand it is safe, high tech, fun, great for you kids.

great them ahead since everything runs on software engineering

Improved

Have more things showing kids having fun and learning

kids working with tech

What audience is this organization targeting? What other organizations are targeting this audience more effectively? Grab screenshots of specific at least 3 sites. How are they more effective? What might you borrow in your redesign?

Parents mainly 35-50

kids a little

Bank of America

Wells Fargo

Id Tech Camps

uses  Block  layout to break up text so its not just all text it has breaks. Plus has curves and squares to give slight shapes to the page. to add depth and lift things off the background

Uses images but have text overlaid on them to give the information to them but having the feeling and emotions from the images still there.

Have javascript for drop down menus.

Borrow

the steak curve design, drop down menus and the image design of text on top

 

 

First Prototype: https://xd.adobe.com/view/019429af-05af-4d84-9661-d9fd41077734

I strongly took the simply modern design of gradients and images overlaid by text to heart and mainly used that in the design. Also used white cubes to lift the text off of the background and it also felt like stick notes. I curved them since everything else on that page as curves to help to keep things uniformed. On the other pages mainly used a gray gradient to gives some depth to the background well keeping it simple so you could easily read the info on the pages. The two pages are a gallery view and an article which the info could be change to fit the needs of the page so could be change to talk about sports and so forth.

 

Revision on Daft

XD: https://xd.adobe.com/view/2e43c31f-707e-4dc9-999c-b7a263fda94d

 

So I change the gradient That I was using in the background for all pages since it was causing issues with readable. so change it to a more desaturated blues and not as dark to make it easier to read. To go along with the gradient I took away the angles from the first page since the it felt like was distracting the viewer and was out of place. Also now it pushes those boxes out even farther. On the mobile version I expand the width of the boxes to the whole width of the page to give more room to the text so it did feel as tightly pack. This move increase readable. Also it made sure all the texted fit within the box. On the bottoms of the pages I added more space between the bottom banner and the final item on the page, this was to make feel less cramp and insure people know it was a bottom banner. On the top banners I rescaled the sign in texted and respaced all the text at the top to allow for all of them to be on one line. Also added the hamburger icon to the mobile sites to make it easier to click on them.

Implementation:

I have the nav bar implemented just not the dropdown menus yet. I have the banner change from no color to a blue so the nav bar sticks out. Also I have gotten the layout for the gallery view done and looking good. Need to make the read more tags in on the gallery view actually work to the article view. The Article View is done as well. I have some responsive design, but still need to directly code for the mobile version.  Finally I have to think about redesigning the announcements   section on the main page so there is less text. Also have it so the images are related to each topic not in between two of them so they fit with whats going there and show how it would layout if the info was change.

 

 

Final : https://austinclayinteractivedesign.000webhostapp.com/redesignsite/index.html

 

Here is the final product. I have the hover sites working this time. I change the main page to have less text as told during the critique. Also fixed up the spacing in the images on the main page as well. The gallery view has been fixed to be the right spacing between them and is looks proper now.  I moved the mission down on the main page to be center on the banner. I finish up making sure all read more tags worked.

I did not do a proper mobile site yet I forgot to do it and need to that still it has a function one but it is pretty bad one. I have change all font size, images size and change up the nav bar to hamburger icon with a drop menu with all the options there.

 

Posted in Interactive, Time-based | Tagged , , , , , , | Leave a comment

The Viking Raids Game

I design and coded an interactive timeline of the viking raids, it has three of the raids more can be added to expanded the usefulness of it.

https://austinclayinteractivedesign.000webhostapp.com/vikingraids/index.html

Posted in Interactive, Time-based | Tagged , , , , | Leave a comment

Javascript Exercises

Toggle: https://austinclayinteractivedesign.000webhostapp.com/toggle/toggle.html

Parallax: https://austinclayinteractivedesign.000webhostapp.com/parallax/parallax.html

Keyevents: ttps://austinclayinteractivedesign.000webhostapp.com/keyevents/keyevents.html

Draw: https://austinclayinteractivedesign.000webhostapp.com/draw/draw.html

Timed: https://austinclayinteractivedesign.000webhostapp.com/timed/timed.html

 

Posted in Interactive, Time-based | Tagged , , | Leave a comment

Gallery Writeup one

 

The Unity Seminar took place on February 28th at 7:00pm, it ran for one hour. It took place in SET, in the room 440. Most of the people there were DMA or some sort of programming major, as well most of the people at the seminar were going to be in the Game Jam.

The seminar cover a program called Unity 3D, which is a free game engine that anyone can use. There has been a growing interest about this engine, and since like any new program there is a learning curve so to help all these new people it was decide to have a seminar for it. The Association for Computing Machinery was the ones to hold it, and the presenter was Stephon Barrett the Secretary of said group. It was a hands on seminar so everyone was using the program and following along with what was happening during it. It was just showing the basic controls of the program.

The presentation was about showing the UI of Unity and what can be done within Unity. Everyone in the room was shown how to make a material within Unity. To do so one must right click within the project section of the Unity UI, and than click on material, which would make the material. After this is it like Arnold and how you have sliders and color pickers for different options. To apply to this material to an object one had to drag the material onto a 3d object that they wanted to have that material.

You can relate this seminar to DMA and web design for a couple of reasons. First off it both keeping your hierarchy workspace organized is very important thing to do, so that one does not get confused with what’s going on. Also one can code within Unity like web design so making sure your code is organized and is done properly with proper semicolons and other things.

Posted in Writing | Tagged , | Leave a comment

Responsive Design

 

  • Company: Mattress
  • Age:18-25
  • Gender: Male/Female
  • Color: #82E1CC

XD:https://xd.adobe.com/view/d0c490bd-29b7-4223-87c9-61d34a0133a4

final: http://austinclayinteractivedesign.000webhostapp.com/companydesign/

Posted in Interactive | Tagged , , , | Leave a comment