Website Project Specification

This week in web design, we are starting to design our websites by answering questions about our overall approach as well as develop a basic layout for what we hope to achieve.

Questions

What is the purpose of the website? 

I plan to use this website to mainly my portfolio work from Parsons, as well as sketches and projects I’ve work on in the past during my free time. Although we were given portfolios by the school for our work with WordPress, I don’t really like using the default themes and would like to create a portfolio that sort of flows better and is more suited for my style.

I also want to integrate this with some marketing research I have done in the past while I attended NYU.

Who is the intended audience? 

Potential employers peers, and anyone who might stumble upon the website. I hope to create a fully functioning website that I might be able to transfer the coding later on onto WordPress or some sort of blogging platform.

What tone do you want for the site’s written content?

The portfolio posts might be more formal as a lot of my work does contain a lot of essays. However, I also want the tone to be more lighthearted to reflect more of my personality rather than being so informational. I really want this website to be a place where I can just show the world who I am and I can write freely the things I want with no particular focus

Design

Landing Page

 I used to run a blog called monkeychic.com. I have had this blog since I was in middle school and it basically shows a progression of my interests and what I have learned throughout my life since then. I stopped seriously blogging around high school and used the blog to primarily just post marketing projects I have worked on in school or work I have completed in Parsons. However, some of the pictures and links are broken.

I really want to use this project to do a complete make over of my blog/portfolio and make the entire thing just flow together better while also just primarily focusing on my project work.

My landing page is going to be a tricky thing to design as I don’t have a whole lot of photographs of my work that I am too proud of. Some of my content sometimes is all words and no images. Some of my posts have a lot of images, but none I am too proud of. Some my posts might have a particular image I want to really showcase.

So for the landing page, I am thinking of first creating a carousel to display any posts I really want to feature.

Below I will just have previews of recent posts. My biggest concern for this is that since not every post has a photo, but some will, these previews have to look nice whether or not the post features any image. I may turn these black and white or fade them as well so that the photos don’t have to have a particular style and still work well.

Navigation

The portfolio section will have three categories; projects, parsons, and research. Projects are going to be the main portion of this category. After school is over I still plan to use my site as my main portfolio website and I want to be able to post any project whether they are simple sketches or full blown designs onto here. Parsons will focus on any work I complete during my past and remaining years at Parsons. Lastly, Research will be where I will add all my old marketing projects from courses I had taken at NYU and I will continue adding to this in the future if I continue doing some more research projects.

The portfolio categories will also have their own sub categories because for Parsons I want to be able to discuss which posts belong to which courses. For research, which posts are from when I was in NYU and which are going to be from the future. Projects might have more categories to divide which projects are digital projects, hand done, sketches, and miscellaneous (things I work on that doesn’t fit in a particular category, resources, or inspirations).

My navigation will be displayed on the header, a side bar and may be certain links on the footer.

Secondary Content

Home, About, Social Media and Contact Me (email)

Sidebar

Short About Me and Picture, Contact Email, Subscribe (Email, RSS, Bloglovin), Social media (Instagram preview), Archives (By Month), Recent Posts, Digital NYU Certificates

 Inspiration

http://www.thewonderforest.com/

https://www.zoella.co.uk/

http://blog.boatpeopleboutique.com/

https://laurenconrad.com/

https://laurenconrad.com/blog/2016/03/welcome-to-the-new-laurenconrad-com/

http://thebeautydepartment.com/

http://cargocollective.com/briemery

http://www.seaofshoes.com/

http://www.wix.com/blog/2015/12/15-magnificent-websites-created-by-artists-and-illustrators/

http://rckt.co.uk/

http://www.kristyu.com/#home

Website Tree

Print

Layouts

Landing page

Print

Post Page

Landing Page

About Me

Print

Contact Sheet

Print

Web Design Comparison

This week in web design, students were asked to write an analysis focusing on a well-designed website and a poorly designed website. In order to understand the principles of good web design, we based our analysis off of the article Usability 101: Introduction to Usability by Jakob Nielsen. We then proceeded to compose our own basic website using the write-ups we just made.

Screen Shot 2016-09-04 at 4.32.28 PM

A Less Effective Web Site

I was a bit disappointed when I went through my Financial Management syllabus to look for the textbook I would be using this year. My teacher had provided a link to purchase the textbook from in which the site offers various options to read your book. As printouts, on their website, or as delivered as a hard copy. In my opinion, this site is not the most user-friendly when it comes to reading online. Especially when compared to other websites available for purchasing online books such as Kindle.

To begin with, their Homepage looks like it was pulled straight from the early 2000’s. There are barely any images on the website. If the website wasn’t named Textbookmedia.com, you probably wouldn’t be able to even understand what the page would be even used for. All it offers is a brief description of the company, a search bar at the bottom of the page, and a small image advertising an offer for their study guides.

textbook-media-homepage

 

This site also has a long “How it Works” page with information clumped together and poor choice of font colors. On this page, there is also a random image of a man in black and white that is probably about an inch in width that seems to hold no real purpose.

textbook-media-how-it-works

Moving onto their product listing page there are no images of the books, quick browsing options, or even pricing ranges, so the only way you can view what book you are selecting is by actually going to the individual product pages. Then on the product page itself, there are no reviews of the books and the site doesn’t do much to simplify the books information.

textbookmedia-product-list

textbook-media-product-page

The thing I dislike the most is the websites, ways of actually reading the book. You can’t scroll through the pages, instead, you are forced to click on two arrow buttons that are placed very far apart from each other. You can download PDFs of the book, but that option isn’t very clear as that option only appears when you click on a printer button. Then the table of contents is sort of sloppily placed together and hard to read.

textbook-media-book

Overall, in terms of usability, I don’t think the site is hard to learn or memorize. However, its biggest problems are efficiency, errors, and satisfaction. The website does not simplify a lot of the tasks that need to be done by the user. It looks very dated and the graphics seem to have a very low resolution as well.

A Well-Designed and Effective Web Site

Now when it comes to a shopping website, it is best to keep things as clean and simple as possible in my opinion. Shopping is usually (not always) a reward for some people. They work really hard for their money, and now they enjoy the pleasures of spending their money on something new. Because of this, many shoppers won’t have the patience if a store is too cluttered with information, or there is not enough information. So it is the company’s job to make the shopping experience as enjoyable as possible for the buyers or else they will just end up frustrated and leave the shop empty handed.

There are some eCommerce sites that are phenomenal when it comes to web design. They’ll play around with the graphics and animation of features to make the website look lively and bring their store character, but for today I am just going to focus on a simple shop that I think works well even without all the frills.

Romwe.com is a clothing store that I occasionally like to buy from. It may not offer textbooks like my bad website example, but it’s essentially also a shopping platform that you can buy things off of.

The front page has a nice carousel with different trends and outfits from their shop as well as any deals and promotions they currently offer as well as the coupons and spread throughout the site if you somehow miss the homepage.

romwe-carousel

The thing I love most about their homepage is that they have deals on certain items in their store with the old price and mark-down price as well as a counter for how much longer the deal will last. You can also save items to your wishlist instead of going straight to cart. Also, if you hover over the item you would like there is an option to add to cart without even having to go to the product page. Then on their product list pages, there is a scroll to top button to make the page easier to use for their customers.

romwe-deals
romwe-product-list

On the bottom of their homepage, they also have images gathered from social media when users write a certain hashtag when posting about their pieces.

romwe-social-media

I really like this website because they are able to deliver as much information about a product possible while also keeping the sites design as clean as possible which also makes it easy to navigate around.