design

These are screenshots of each section of the Webydo website that I created for my final project. Because they are still photos, you can’t see that the home screen has a video in the background, the circular object is a moving gif, and both squiggly lines on pictures 3 & 4 move. As well, some 3D parallax happens as you scroll, such as the quote on picture 3, the “founders” heading, the icons on the services page, and the “hit us up” all flow in as you scroll. The client logos are also part of planes in which they move around depending where your mouse is. The website is also compatible with tablet and mobile. Overall I’m pretty happy with how it came out and have gotten some positive feedback from my professor. I’ve really enjoyed doing this site and learning about web design in general. My brother who runs the company I made the website for really loves my approach on it and wants me to help with creating websites for them in the future. I’ve already started coding a site for a project he has been working on.

Final Project Follow-up

Webydo is actually pretty confusing at some points. Since it is a website program, it sometimes lags and glitches which isn’t helpful when having to build a website. Theres also been a few things I couldn’t figure out for a while, but after trial and error/web searching, I found them out. I’m pretty independent when it comes to working on projects like these, I’ll rarely ask questions because I could probably figure out a solution just as well as a teacher would- by looking it up.

Anyways, the website is coming along well. I still have my video behind the logo on the first page. I decided to make the video more relevant to the company by adding little “like”, “retweet”, “heart”, and “new follower” buttons scrolling up both sides of the video, as if it were actually gaining them. I think it makes it more understandable that the company does social media management, and will get you more likes, followers, shares, etc.

For the rest of the pages, I’ve taken elements (logos, text, icons) from the company audits, website, etc. and have used them throughout the website. I spent a long time thinking of where to put everything on the “about” page. I also have added in some moving gifs in the background to make the pages more alive.

On the clients page, I decided to use the 3D Parallax option. I found out you can only have a background and 4 other layers. This company has much more than 4 clients, so I had to go into Photoshop and group some company names together and same them as png’s, that way I could have 4 groups with multiple logos on it. I had to make sure the logos for each group weren’t near each other, or the effect wouldn’t work as well. I like how it turned out, but you can’t scroll on the trackpad for that page, and it also enabled horizontal scrolling for that page, even thought there is nothing overflowing on the sides so that it would need horizontal scrolling.

I’ve basically completed my website, just a few tweaks are needed here and there. I totally forgot we have to make the website mobile and tablet accessible, so that is my next step!

Webydo Project

My first real html/web design project is done, so onto the next one.

For this project, we are exploring a website called Webydo. It is basically a service that lets you design a website and it does the coding for you (thank god). I’m especially excited because I have chosen to redesign a website for my brother’s digital media marketing company that I worked for this summer. They control social media for different musicians and record labels, so it combines my love for music with my love for social media with my love for design.

I’ve been looking at the company’s clients’ websites as well as larger digital media marketing companies’ for inspiration. I originally wanted to have a moving gif in the background of a large centered header of the company name. I wanted it to somewhat simulate a music visualizer (think more of an 8-bit windows media player visualization) to represent music, the visualization of music, and the digital process behind it. I tried a bunch of different moving contour line gifs but I think I now want to do a visually pleasing video of musicians. I’m now compiling a short 20 sec video of clips from one of the company’s clients, a band called Savoy, of them performing/the crowd behind them. I think this is a good idea because even though the company isn’t a record company, it still shows that the focus is on music and the fact that their services will allow more time for musicians to solely focus on the music. I’m going to just see how it looks, think about it, and see if it makes sense for this sort of company.

For the rest of the website, I’m thinking a simple one page, long, scrollable layout. I think the one page is more popular and gives it an “infographic” sort of feel.

The cool thing about Webydo is that it allows you to do some cool animations, like 3D parallax design. This means that elements on the page can move when the user scrolls up or down. With layering elements, this can make an awesome illusion of dimension, something not seen very much on a webpage. I will definitely dabble in this effect and I’m really excited to try out different ideas.

These are images of my third web design project for class. This is the first website, however, that we actually are coding in HTML/CSS. I decided to make this an art portfolio page so that it could maybe be useful to me in the future. The site is made so that the portfolio is all on a long homepage. Each section is connected to a line that goes down the page and drops off at its corresponding section. I also am making it so that when hovering over each photo example, the image will be in color instead of black and white.

So far I have done most of the coding, but I’m still needing to figure out how to add a slideshow of more photos once a picture is clicked. For example, if a user were to click the “nature” picture in the “photography” section, I want a full screen slide show to pop up and show more photos in the “nature” section. I’ve also included two separate pages, an “about me” and a “contact” page. I’m pretty impressed with myself because I’ve had to look up the coding all on my own and so far everything has worked alright. The only thing i’m worried about besides the slideshows is the responsiveness of the website, because right now the images only appear in the right place if the browser window is stretched to a certain size.

I love these colors and textures together

(Source: actual-source, via thispopshit)

147 notes Read More

I love the simple shapes paired with the primary colors, very 90′s

(Source: drawdownbooks)

36 notes Read More

Awesome idea for incorporating letters and numbers

(Source: bureauborsche)

21 notes Read More

This is my second web design that I have created for class. I decided to blur the background of the first page so that the text would stand out more, but I’m not so sure how I feel about it now. I used a strip of the same photo to create a similarity between both pages, which I think works well. On the second page I should have used less text, made it a larger font size, and possibly placed it differently on the page. Otherwise, I think this was good practice for me in placement of different web elements and in discovering more about InDesign.

Love the difference in font shapes, sizes, and locations

(Source: graphicinspire, via f-l-m)

425 notes Read More

So cool! Using letters to make up other letters, and send a different message

(Source: drawdownbooks)

54 notes Read More

I love the context and presentation connectivity

(Source: cargocollection, via muchwowgraphics)

17,505 notes Read More

This is the first web design I have ever done. Not only is it my first web design, it was also my first time using the Adobe program InDesign. Many people told me that InDesign was much more complicated than Photoshop, but I thought it was pretty similar and straightforward, however, we were just using the basic tools.

Many people in my class liked this design, but I kind of think it is a bit too dark and busy. I went through a lot of trial-and-error with the color of the sidebar because I wanted to possibly brighten the page up a bit, but nothing bright really seemed to complement the main photo.

I also included the small arrow to the right of the text to show that the navigation bar can be collapsed and opened when needed. I would imagine that when the page is first opened, the nav bar would be collapsed, and the arrow would indicate to open it.

From talking in class, I now know that the font on a webpage should not be any smaller than 16, and the text on this page is well beneath that. If I redid this, I would shorten the text and make the size more appropriate and readable.

Overall, this was definitely some good practice to get to know InDesign and to see where my web design beginner’s level is at. I don’t think I did too terrible of a job for it being my first time ever exploring web design, and I’m really excited to continue my growth on the subject.

The interactivity of this is simple, unique, and goes well with the topic of the text.

(Source: gdbot, via typografika)

55 notes Read More

I LOVE the contour lines

(Source: symmetrysymptom, via typografika)

64 notes Read More

The simple geometric shapes, layout, and colors are really cool.

(Source: garadinervi, via typografika)

241 notes Read More