Session 1: Today we will discuss the requirements for the Project Proposal component of the Final Web Application. The remaining time will be spent on individual consultations for finalizing your Basic Portfolio Project or Final Web Application concept approvals.
Assignment 4: Final Web Application (Component 1 – Project Proposal)
Due: Session 2, Week 9 (3 points)
Description:
Write a project proposal that includes a title page, project summary, feature list, wireframes, and bid. Include a minimum of five wireframes. Breakdown the bid into estimated hours for content, design, markup, styles, and interaction. Use Google Docs, Word, or Illustrator to create the proposal. Export the proposal as a PDF file and submit before class starts on session 2 of week 9.
Requirements:
1. Start the proposal with a title page (include your name, project name, my name, class title, etc.)
2. Secondly write a project summary that describes the scope of the project in two to five paragraphs
3. Thirdly insert a list of project features and a brief description of each feature
4. Next include a minimum of five wireframes each on a separate page with brief descriptions
5. Finally write a project “bid” detailing the estimated hours and cost of the project
6. Upload a PDF of the document to Canvas by session 2 of week 9
Points Breakdown:
The proposal constitutes 3 points of the grade for the final project
Session 2: Basic Portfolio Project Presentations.
http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/
This webpage explained the importance of wire framing before creating your website. It also discussed that avoiding visual designs right off the bat is an advantage in case your clients get upset over your use of styles in the mock-up and miss looking at the actual layout. The most important part of this website was the list of nine tools you could use to digitally create your wireframes.
http://s.casual.pm.s3.amazonaws.com/toolkit/UniversityProposal.pdf
This next webpage is not exactly a webpage but I thought it explained how to write a good project proposal. It also talked about the different parts of a proposal, what not to do, what to do, and gave examples of every part needed for a proposal.
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
This website is just what it says it is, a beginners guide to wire framing. It signifies why wire framing is important, it takes you through all of the steps, and gives you great visuals to follow and/or get inspiration from. It also takes you through different places where you can make wire frames.
https://blog.bidsketch.com/selling-web-design/how-to-write-a-web-design-proposal/
This a a great blog post on how to write project proposals for web projects. It is very detailed on what to do and not to do in the writing of a proposal and how to make it as sharp and effective as possible. It also gives you other resources to view if you need more help. Good for this project or future jobs.
http://www.creativebloq.com/web-design/jargon-wireframes-mockups-prototypes-51514898
This website explains the difference between wire framing, mock-ups, and prototypes.
It also explains what they all can do, why they’re useful, and best practices.
This is a helpful infographic that outlines the web design process from the initial idea to the website’s launch. It provides a great step-by-step outline of the entire process, and it will be useful to keep in mind as we begin planning and completing the final project. Since it focuses on designing for a company, this infographic will be especially useful for people working with external organizations to design their final project.
https://designmodo.com/web-design-project/
This article talks about wireframing. It emphasizes the idea that wireframes are rough drafts. They are meant to be outlines of projects. They shouldn’t be too polished. The article gives 10 tips for making a wireframe serve its purpose. The wireframe is just a tool to help the designer create an effective website.
http://www.dtelepathy.com/blog/design/learning-to-wireframe-10-best-practices
This article delves into different wireframing methods. It discusses everything from paper and pencil to special wireframing platforms. It also talks about important things to consider when arranging content. Listing what the website needs to include, paying attention to visual hierarchy, and playing with content arrangement are all useful things to do on paper before you begin the actual project.
http://blog.teamtreehouse.com/how-to-design-a-useful-wireframe
https://webdesign.tutsplus.com/articles/12-tips-for-becoming-a-successful-web-designer–webdesign-1189
This article provides tips for finding success in web design. I liked the fact that it put an emphasis on the importance of effective communication and a creative mind. In a creative field, it’s important to stay up-to-date on emerging technology and techniques. This is just a nice article for a bit of encouragement.
http://justcreative.com/2014/09/01/how-to-write-a-winning-web-design-proposal/
This blog post details how to write a good web design proposal. It provides a short and simple introduction and a clean, step-by-step approach.
https://www.mightybytes.com/blog/wireframing_techniques_for_a_peacefull_development_process/
This article reiterates the importance of wireframing, claiming it can “make or break the outcome of a project.” Unlike my previous link, this article emphasizes all the reasons you should use wireframing and lists all the parties that can benefit from it. I found the visuals to be particularly helpful in guiding the reader through the article. It also recommends web applications that can help with the wireframing process.
https://www.orbitmedia.com/blog/7-reasons-to-wireframe/
This blog describes a simple understanding on what wire framing is. It gives multiple reasons on why it is important in web design and how it can actually benefit someone and save them time on projects.
http://rbbideas.com/insights/wireframes-101-beginners-guide/
Rbbideas website basically says what it does. It gives a beginner a basic guide about what wire framing is . Unlike the other website link above I like this website as it explains a little more on what it is, how it is used and where it might be placed. Not only does it give good description it has great visuals and basic steps someone can follow if they are interested in learning more about it.
https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
Here is another guide on wireframing. The website explains why “wireframing” is important to a web design process, It has simple step by step instructions to follow and great graphics that are included to explain the process of starting a web design. I like this website specifically as it gives you information on different tools you can use to make your own wireframe design. Some examples of websites to begin a wireframe project, that it talks about are Omnigraffle, Balsamiq and Flairbuilder.
https://www.beewits.com/web-design-proposal/
This is a useful blog post (aside from a few grammatical errors) breaking down how to create a useful web proposal and some ideas on how to stand out from the crowd when you do. It includes tips on a mobile proposal, creating an effective timeline, and provides templates for successful web proposals.
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
This is a very in depth, step-by-step guide to creating wireframes for beginners. It talks about what they are and why they are used, gives picture examples of different kinds of wireframes, and goes into detail about user elements like user confidence, clarity, and keeping the noise out.
https://webaccess.berkeley.edu/resources/tips/web-accessibility
This article gives 10 ways to make your website more accessible and user-friendly. Some of them are a little bit more advanced then what we need to be worried about, but they provide a ton of good ideas that I hadn’t considered before. They bring attention to common problems that users may encounter in the design of your website.
https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
This is a great article for beginners to learn how to use wire framing. There are images that aid in the explanation of wire framing that helped me to grasp the concept. I also enjoyed the step by step instructions that the article provides.
https://www.bidsketch.com/blog/selling-web-design/how-to-write-a-web-design-proposal/
This article is beneficial for creating our Project Proposal for class. The article describes key tips to writing the “Perfect Web Design Proposal.”
http://www.bridging-the-gap.com/wireframe-mock-up-prorotype-difference/
This article is beneficial to understanding the terminology and meaning of wire frames, markups, and prototypes. I had no previous knowledge on any of these terms so this article helped me to grasp the similarities and differences between these essential concepts.
https://medium.com/mockplus/10-dos-and-don-ts-of-wireframing-8a6d0b3429d8
This is a good article because it leads you through the process of getting a good wire frame set up for your website.
https://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
I liked this article because it talks about the many steps it takes to build a cohesive website. It also directs you through the creative process that happens before getting into coding.
https://blog.smile.io/improve-your-customer-experience-with-web-design
I really liked this article because it talks about how the “customer” or user will experience your website. This is something to think about when designing a website that you want to drive traffic to.
https://www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/
This article is an overview of wire framing and prototyping, and the differences between these. It covers the advantages they both have. The article is sponsored by Adobe, so it mentions that Photoshop is a useful tool in creating wireframes and mockups.
https://www.codeinwp.com/blog/web-design-proposal-template/
This article gives a template for writing a successful web design proposal. It gives tips for including all the necessary information in one place, and for how the template can be personalized for different projects. This could be useful to glance at when we are working on our final project proposals.
https://creativemarket.com/blog/50-mindblowing-portfolio-sites-to-inspire-yours
This last article includes 50 great examples of home pages of various personal portfolio websites. They are likely more advanced than we’ll be able to do in this class, but nevertheless they were interesting to see and get some inspiration from.
https://uxmastery.com/wireframing-for-beginners/
This website is beneficial for beginners wanting to learn how to wire frame. It gives good examples with images to show how to do it.
https://onextrapixel.com/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/
This websites main focus was on why wire framing is an important first step for website creating. It also gives the difference between a wire frame and a visual design, so that you know exactly what to create. There are also helpful apps they suggest when making a eire frame.
https://www.pixelsurplus.com/blog/5-steps-to-create-the-perfect-web-design-proposal
This blog post gives good advice when it comes to creating a web design proposal. It gives step by step information on what you need to do.
https://www.justinmind.com/blog/website-wireframe-design-guide/
This article provides basic information on what wire framing is, when to use it, and the differences between high-fidelity and low-fidelity. This site helps explain how wireframes help designers create their layout and understand how different wireframes can look different.
https://www.mockplus.com/blog/post/what-is-a-wireframe
This article also helps explain what a wireframe is and how it is beneficial when showing potential designs to a client rather than an abstract design. It also provides examples of wireframes and where to find others.
https://www.codeinwp.com/blog/web-design-proposal-template/
This website helps explain what a project proposal is and why they are useful for web designers. It also explains in detail what should be included in a proposal, and then goes through each section of a proposal explaining what it should consist of.
https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b
This website talks about the differences between wireframe, mockup, and prototypes.
https://uxmastery.com/wireframing-for-beginners/
This article is for beginners in wireframing! They go in depth on what a wireframe is and steps of how to create yours!
https://www.codeinwp.com/blog/web-design-proposal-template/
This webpage is for creating a web design project proposal. It is probably more real world than what we are doing, but it was very cool!
https://medium.com/@protoio/why-wireframes-are-important-in-the-design-process-de4e773e611
This website discusses the importance of wireframes during the design process, defining a wireframe, what to include in a wireframe and reasons to use a wireframe.
https://thedigitalprojectmanager.com/wireframe-tools/
This website discusses the 10 best wireframe tools to make wireframes, compares wireframe tools, compares wireframe apps, and the best wireframe tools overviews.
https://www.projectmanager.com/academy/how-to-make-a-project-proposal
This website discusses how to accurately create a project proposal, questions to consider during creation, project proposal elements, Kanban boards and developing smart goals.
https://www.experienceux.co.uk/faqs/what-is-wireframing/
This article covers the very basics of wire framing. It talks about how it helps you create a visualization of structure for your website. It also emphasizes that it is important to create wire frames so you can create a better, more efficient user experience. Although wire framing has advantages, it also warns readers that when presenting the frames, clients might get confused and have a hard time understanding the content. So you need to make sure to fully explain the layout.
https://theblog.adobe.com/everything-you-need-to-know-about-wireframes-and-prototypes/
I thought I would include this article from Adobe incase anyone has Adobe cloud and is interested in creating wire frames in these programs. The article gives directions on how you can sketch them out by hand or how to go about designing them with Adobe. If you would like to do it with the software, they suggest using Photoshop or Illustrator. It also talks about one of their products, Adobe XD which is what developers use to create frames.
https://www.usability.gov/how-to-and-tools/methods/wireframing.html
I think article is important for people to read because it specifically tells you what not to do and what to avoid. It also talks about the basics of what you will need to include. At the end, it even talks about low and high fidelity wire frames. Basically low fidelity is less detailed and more about the detail, while high fidelity includes great detail on the design concepts.
https://www.websitebuilderexpert.com/building-websites/how-much-should-a-website-cost/
Although we aren’t actually charging people for websites, I thought this link would be helpful for us to understand what a career in this looks like, money wise. Its kind of an advertisement for Wix which is annoying but it is still a good article to get the general idea.
https://www.mediaupdate.co.za/marketing/148156/eight-ways-that-wireframing-improves-a-websites-ux
This article stresses the importance of wireframing and why we do it.
https://www.invisionapp.com/inside-design/web-design-proposal/
This articles goes over the steps of being professional when making a web design proposal and interact with clients. I think this is a good skill for all of us to know.
https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611
This article describes the importance of wireframing. It talks about what wireframes are, what not to include in them, and the five main reasons to use them.
https://uxplanet.org/12-practical-tips-for-creating-better-wireframes-be0418777946
This article gives 12 helpful tips for creating a good wireframe.
https://www.invisionapp.com/inside-design/web-design-proposal/
This article goes in to detail about seven sections that should be included in a website design project proposal. It also includes examples and bonus tips at the end.
One website I found helpful was https://www.bidsketch.com/proposals/web-design-proposal-template/ . This article helps identify the key aspects of of a proposal including wire frames, cover letter and why you are recommending what you are.
Here is another great site on major things to include https://elementor.com/blog/website-proposal/ . It covers all elements as well as good questions to ask when talking to the client. This section I found particularly helpful, as there were many thing I would have forgotten to ask.
Lastly this website explains more in depth about wire frames. https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/ . This includes what they are, their purpose, what’s included and the different types of frames.
https://blog.hubspot.com/website/website-wireframe
This article describes in good detail the rationale behind the use of wireframes in website prototyping and design, as well as a multitude of examples of the forms various wireframe projects may take, from hand-drawn sketches to professionally produced mock-ups and templates.
https://speckyboy.com/free-wireframe-layout-kit/
This page provides a myriad of useful resources for considering and creating wireframes for websites, including a huge collection of downloadable templates for Illustrator and Photoshop among other applications.
https://thedecisionlab.com/biases/planning-fallacy
Though perhaps only tangentially related, another topic of discussion this week was the importance of budgeting time and giving accurate estimates to ourselves and to clients. This website covers the “planning fallacy,” which describes our tendencies to underestimate the time it will take us to complete a task, as well as a number of ways to avoid it.
https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
This first article goes over the basics of wireframe design. It even goes over a broswer extension called Wirify, which lets users see the basic wireframe of any website that they choose to use it on, which may be helpful when thinking about the final project proposal.
https://www.webfx.com/blog/web-design/website-wireframing/
This article goes over how to make a wireframe and tells you the best way to do it either by hand or by using software specifically designed for it, which they have detailed many examples in the article.
https://www.flux-academy.com/blog/20-wireframe-examples-for-web-design
This article gives 20 real life examples of wireframe design.
https://www.smashingmagazine.com/2020/04/wireframe-design-success/
This first article goes over what wireframing is, why we use it, what to avoid, and some best practices. It also gives examples of what they mean by each best practice. It also gives a few design tools to help get you started.
https://www.springboard.com/blog/design/how-to-create-a-wireframe/
This website gives a step by step guide on how to make a wireframe. I really liked the graphics they used and the large amount of wireframe examples they gave.
https://alvarotrigo.com/blog/wireframe-examples/
In this link there are a plethora of wireframe examples to look at which I think could help with creating ideas for our own projects.
One link I found helpful for the wireframe layout is
https://youtu.be/0kSzoBvYpXU?si=HxW0RjY5U3Zj8wOn
Which is a quick 10-minute video that takes you through the steps on html for organizing the layout of your page and shows the code used in the demo of this video.
A website I found to be helpful is
https://speckyboy.com/free-wireframe-layout-kit/
Which offers a variety of templates that help you visualize the way in which you want
your website to be organized.
Probably my favorite source of the three would be https://bradfrost.com/blog/post/html-wireframes/ which is a personal walk-through by the author of the site, Brad Frost, and provides examples on how he used rules (<div= etc) although he refers to them as "placeholders." He also talks about how wireframing in code provides the chance to take our initial sketches, like the ones we had drawn up for class, and iterate on them until they become the final product!
https://uxplanet.org/12-practical-tips-for-creating-better-wireframes-be0418777946
This website is a compilation of 12 practical tips for creating a better wireframe. I thought this was useful because it gave up to date mockups using the outline of a newer iphone, as well as it had a very simple interface as far as doing the actual wire frame work. It seemed to have order the steps in order of priority which I also thought was useful.
https://www.masterclass.com/articles/wireframing-guide
This website was probably the least useful regarding tips to improve your wireframe. Not because the content was bad, but it only included three broad tips without showing any images. For some this may be useful as your imagination may run, but for visual learners like me I prefer to see some sort of examples.
https://uizard.io/wireframing/?utm_source=google&utm_medium=cpc&utm_campaign=T1%20Prototyping%20%5BENG1%5D&utm_content=Wireframing&utm_term=ai%20wireframing%20tool&utm_id=12815287085&gad_source=1&gclid=CjwKCAiAhJWsBhAaEiwAmrNyq3hZIyqZVTVuhisQR85aHWSEgS7znIEr9WySncgTYsYNVS2jJapoVhoCrFcQAvD_BwE
This website was useful for wireframing as it utilizes AI. Although you should put your own twist on your wireframe, AI is very good for inspiring ideas and can help you take you to your next step in a efficient manner. Ironically enough, I was most impressed with the user interface on this site as opposed to the others.
https://www.flux-academy.com/blog/20-wireframe-examples-for-web-design
Talks about the importance of wireframing, what it is, and how to do it. Provides information about the diverse ways you can do wireframing, as well as linking other tools, websites and videos about it. Website also provides diverse examples of wireframes. Done on paper or digitally.
https://dribbble.com
This is sort of like pinterest, but for web design. You can post your digital art, people can commission you– it’s very cool. If you guys are looking to get a job as a freelance designer this could be great to have an account on! It has a bunch of different types of digital work to check out and you can sign up with your gmail super fast.
https://sketch.london/
Inspirational creatively coded website. I love this one, click around a bit– I am definitely not that strong of a coder yet, but it’s cool to see what is possible. This website is for a super awesome restaurant in London, so if you are ever in the UK definitely get a reservation as well!
Another inspiration would be the apple website. It’s clean, simple, and just easy to look at. Their hover features are cool but simple too.
https://www.cssdesignawards.com/
https://lp.kenpachi.design/melo-emo/
Also self explanatory for inspo… the CSS awards. The second link is one that I saw that was nominated.
https://www.interaction-design.org/literature/topics/wireframing
This website provides tips and information related to how to make an effective and easy-to-use wireframe. It demonstrates the relationship between wireframe making and a user’s experience, along with how ux design is important. There are also different ways mentioned to approach the design of a wireframe.
https://www.gliffy.com/blog/-the-comprehensive-guide-to-wireframes
This website describes what a wireframe is, what it is used for, and what it could look like. There are examples listed in this link of what a wireframe could look like, and how that wireframe would serve its purpose. Similar to the other website, it provides useful tips about how to approach beginning your initial design of your wireframe.
https://www.wix.com/blog/wireframe-examples
This website provides different visually assembled wireframes that not only serve their own purposes, but it also shows the many ways a wireframe can be designed. It also breaks down each of the examples of what they each contain, so this would serve as a great way to get a better understanding of what a designer may or may not want to implement in their own future wireframes.
https://usability.yale.edu/usability-best-practices/page-layout-and-wireframing
This usability and web accessibility article done by Yale gives a basic understanding of why wireframing is important for the user. It offers a practical layout that won’t be confusing, rather smooth and easy to use.
https://www.godaddy.com/resources/skills/write-web-design-proposal
This step-by-step article by GoDaddy gives some insight into how to set up a effective website project proposal. It highlights and breaksdown the introduction, problem statement, proposed solution, project outline, timeline and schedule, pricing, terms and conditions, etc.; and why all these parts of the proposal are important to impressing your client.
https://www.adobe.com/acrobat/business/hub/what-to-include-in-a-bid-proposal.html
This article by Adobe explains in more detail what a bid proposal is and how to properly write one. It’s important for it to look nice so you stand out from competitors, but also it needs to be practical and professional.
https://uxplanet.org/wireframe-mockup-prototype-what-is-what-8cf2966e5a8b
This article provides a beginner’s understanding of wireframes, mockups, and prototypes, explaining each one and how they differ from each other.
https://www.figma.com/resource-library/what-is-wireframing/
This article provides more specific information about wireframes, such as the elements they consist of and steps one can take in wireframe design.
https://support.microsoft.com/en-us/office/use-wireframe-templates-to-design-websites-and-mobile-apps-2d54dc55-f5c4-49a2-85da-d649eb7fc281
This article provides visual examples of various wireframes and a short tutorial on how to use wireframe templates with Microsoft Visio.
https://www.interaction-design.org/literature/topics/wireframe?srsltid=AfmBOopYnkOUpNUhAtUOD6-MSMX94kr8bE4tCtSZAhahveEFLhn3MpIB
This article details what wire framing is and why it is important in design. This is like a one stop shop for all things wire framing.
https://www.flux-academy.com/blog/beginners-guide-to-wireframing-for-website-design
This article sets out the basics of wireframing and sets it up in a way that is easy to understand.
https://www.orbitmedia.com/blog/7-reasons-to-wireframe/#:~:text=Wireframes%20allow%20for%20clarification%20of%20website%20features&text=Wireframing%20specific%20project%20features%20on,useful%20they%20might%20actually%20be
This article sets out why wire framing is important in web design with 7 simple reasons.