KIROKAZE
TVSTRANGERTHINGS
gracie abrams
Andulka
we're not kids anymore.
taylor price
$LAYYYTER
Misplaced Lens Cap
I'd rather be in outer space 🛸
@theartofmadeline
Sweet Seals For You, Always
Noah Kahan
Xuebing Du
Today's Document
Sade Olutola
Aqua Utopia｜海の底で記憶を紡ぐ
ellievsbear
seen from Malaysia
seen from Mexico
seen from United States
seen from Bangladesh
seen from Mexico
seen from United Kingdom
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
seen from France
@addisonbaylon
Grid Layout Exercise
Getting to know bootstrap more, we had to recreate this "block" layout using basic CSS and HTML.
I matched the background colors for "block" in illustrator using the pen tool and then recreates this same layout using Boostrap.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Images and Media
Building upon what I learned, I had to create web-ready images of the design assets for the website. I needed to create at least one SVG image and one JPEG, using the correct format for the correct image type. Then I needed to link at least 3 images into my site's HTML pages. I didn’t use an image for the background of my website because I didn’t think I need one for the final product.
Typography and Color
For this week all we had to do was add the typeface we desired and add color to our websites, and I’m one step ahead. Cleaned up the code a bit so the aesthetics of the type and images would come from the <style> in the <head> section instead of it being hard-coded in the body.
The images are now clickable and will go to its respective page. The logo in my header also defaults to the landing page when clicked (I still have to center these images lol).
Added a gallery/slideshow mechanism to both the Gallery and Ongoing Works pages. Took a while to go through which functions I needed to make it work correctly (I still have to format the pictures correctly so it actually fits in the page, though honestly I just wanted to make sure the gallery works first).
Basic HTML
For this week we had to create a basic HTML page for each of the pages of my portfolio. It's been a good while since I've even touched HTML and CSS, and even then I only did it for that one semester in QCC. Below is the HTML page for the landing page for the portfolio.
Now we have the Design Philosophy and the About Me pages. For some reason the footer decided to actually grow feet and go into the "article" area of the page.
Lastly we have both the Gallery and the Ongoing Works (previously known as W.I.P.).
Site Style Guide and Wireframes
Midterm is here and we had to pretty much finalize the overall designs of our websites, which include the secondary and tertiary page designs based on the selected homepage design.
First comes the style guide for the website, which includes any logos, media, icons, etc.
And now for the Site Wireframes. In the previous assignment I put placeholder colors for the scheme, but now I’ve narrowed it down to what you see below. As for the 960 grid, I tried to center it the best I can to utilize it to it’s full potential. I also included the approx. dimensions of each section like the navigation column and the header.
Homepage was a mix of the last two homepage wireframes I did in the last assignment.
Of course for the design philosophy and the about me, I made sure to leave plenty of space for the text to breathe as well as made sure it was the center of attention along with the images that are paired with them.
I always meant for the Gallery and WIP page to look identical, after all they are the two sides of the same coin.
Some of the challenges I faced doing this was
1) Finding the right font for the website that I liked.
2) Finding the right color scheme for the website that I liked.
And it took me about a good week of experimentation to get it right, or at least get it to where I want.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Homepage Wireframes
Now time to make 3 different versions of the home page, because you never know what you're going to like unless you explore. Each of these has been inspired by different websites.
This is based on general student portfolios I've found
This one is basically another version of it.
This last one is pretty much a mix of both.
Logo
For this assignment, we had to create a logo for our website. I've been through 3 pages of my sketchbook and brought it down to a couple of strong contenders. In the end, this was the final result.
Previous iterations had a box surrounding the logo but this'll do for now.
Site Map and High-level Sketches
Now I have to create a sitemap for the website.
Sketched out wireframes for any unique pages on my website (i.e. for a portfolio website do the homepage, gallery page, project detail page, about page, and contact us page). After sketching everything out, I needed to create a high-level version of my wireframes using Illustrator. These wireframes builds upon one of the grid layouts that I explored in the previous assignment.
The first picture below is the Home Page
Then comes the page for Design Philosophy
The About Me page comes next along with the Contact Me section
and the last two are the Gallery and W.I.P. pages, both are also pretty much the exact same.
3 Grid Layout
For this assignment we had to create 3 different grid layouts that we can potentially use for the website I'll make. I used grayscale to distinguish the grids.
These grids have been inspired and take after the following websites respectively -
1) http://www.baubauhaus.com/ 2) https://www.facebook.com/ 3) https://www.julesallen.photography/
Project Design Document
This assignment relates to the last. This time we now have to decide on a website I’d would like to build for this course (many other students chose a portfolio, to which I’ll be doing the same). Then create a project design document.
My website will be a portfolio that I can use during my time at Queens College and hopefully use as a professional (I’ll probably have a separate section for student work only). Having a black or dark background would be best, as I believe it’d be better for the viewing experience.
The intended audience for my website are the Queens College Art Department faculty and, in the future, potential clients.
Primary purpose of my site is to store and showcase all the works I’ve done so far and will do in the future.
Goal of my site is to (hopefully) standout amongst my peers by having a site that captivates the client. By having it stand out, I can have more of a chance to land an interview for a job that might later on be my career. By having free access of my works (that are hopefully good) to the potential client, they’re free to browse and pretty much window shop, seeing how their product or job will turn out.
For the market analysis portion of this assignment the user will be -
QC Art Department Faculty
Gender ??
Age ??
Looking for portfolios that meet a certain criteria.
Has been looking at portfolios all day and wants something that pops out from the rest.
For my competitors, I’ve chosen -
Jules Allen (https://www.julesallen.photography/)
Sam Agsaoay (https://www.behance.net/SamAgsaoay/projects)
Active Theory (https://activetheory.net/home)
I’ve picked my old film photography professor Jules Allen (great guy) and this is the visual audit for their website.
This helped me narrow down on what I need to have in my own portfolio.
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Market Analysis
For this particular assignment we had to choose from a list of organizations as our client, and in this case I chose R/GA
R/GA is digital agency and innovation consultancy headquartered in New York, with global offices that include Buenos Aires, Los Angeles, Portland, London, Berlin, São Paulo, Singapore, Shanghai, Sydney, and Tokyo.
With the Market Analysis there were questions we had to ask ourselves.
What is your market?
Who is your user? Create a user archetype
Who are your competitors? Put together a list of (at least 3) competitors
The market of R/GA are startup companies as well as well established ones that are looking to add more to their brand such as marketing and development. With this I created a user archetype -
Rama Kinsley CEO of a Custom Computer Company
Male
Age 38
Lives in Manhattan
Interested in revamping his website and creating an app for IOS and Android
Wants to use Social media to boost his business
Needs to gain more sponsors from major tech companies like AMD and Intel
Who are your competitors? For each one I chose for their uniqueness, how none of these websites looked absolutely nothing alike, and how they drew me in for the sole purpose of having variety.
2x4 (https://2x4.org/)
Momentum Design Lab (https://momentumdesignlab.com/)
noformat (https://noformat.com/)
Now onto the Market Analysis for each website -
^This first one is from 2x4
^This second one is from Momentum Design Lab
^The last one here is from noformat
Each website has its' own distinct grid, way of showcasing their existing work, and the types of media it has on their home page. This assignment helped me understand how websites are made to draw people in as well as structuring the website in a way consumers can find what they need as little more. *Accidentally did 3 Audits when only 1 was needed :’)
Hi guys!
This page is going to be related to the work that I do as a student in my Design 173 (Web Design) class in QC! I’m going to journal everything here, including my progress and my assignments. Any feedback is appreciated, so thanks in advance!