Session 1: We will start today with a brief post-mortem discussion regarding the Basic Portfolio Project. Following that, if you have not yet consulted with me about your final project please do so during our scheduled studio time today. Otherwise plan on showing me your project proposals so far for feedback.
Relevant Links:
Moqups
Balsamiq
Lucidcharts
This week’s demos will focus on techniques for creating secondary navigation
Session 2: Project Proposals are due today. We will also discuss the requirements for the Design Mockups component of the Final Web Application project. During the in-class demonstration we will look at adapting our template for the final project and creating some secondary navigation items under the primary navigation bar.
Relevant links:
CSS Dropdowns on W3Schools
Create a CSS3 Dropdown Menu
Another
Assignment 4: Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 10 (3 points)
Description:
Design three mockups of a single page for in-class critiques on session 2 of week 10. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.
Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to Canvas before class on session 2 of week 10
Points Breakdown:
The mockups constitute 3 points of the grade for the final project
Here is the website you can use to do your mocups: https://moqups.com/
Please remember to use print screen button unless you’d like to pay to download your work.
Have fun !
Thanks, Magdalena!
To get a screenshot:
command+shift+3 on the Mac will get you a shot of the whole screen.
command+shift+4 will give you a marquee so you don’t need to crop it.
On Windows is it usually alt+printscreen, then paste into photoshop.
In a short-nine minute video tutorial, Guil Hernandez shows us an easy and a helpful way using CSS selectors to build a drop down navigation menu. If you enjoyed the tutorial and learned a lot, you have the opportunity to start a free 14 day where you will receive more useful tips and tutorials about coding.
http://www.creativebloq.com/ux/3-way-create-website-mockups-11513936
This useful website shares three different ways to create website mock ups. Jerry Cao writes about using bespoke tools, using graphic design software and coding mock ups while adding the pros and cons to each one as well.
http://blog.teamtreehouse.com/create-simple-css-dropdown-menu
In a short-nine minute video tutorial, Guil Hernandez shows us an easy and a helpful way using CSS selectors to build a drop down navigation menu. If you enjoyed the tutorial and learned a lot, you have the opportunity to start a free 14 day where you will receive more useful tips and tutorials about coding.
http://www.cssauthor.com/
This website contains hundreds of free designs that can be downloaded and used for any website or template. It varies from the best fonts for website design to free resources for designers.
http://mashable.com/2012/06/07/mockup-tools/#dXCF7Tn07Sqt
This website shows people how to create a professional website for photography or videos. In order to make a website, web designers use mockup tools to analyze layout, design, and functionality. This website shows you the most applicable applications to use to get the most out of designing a website.
http://blog.teamtreehouse.com/theres-more-than-one-way-to-mockup-a-website
This is a blog written by Nick Pettit, explaining the misconceptions that every web project starts with a Photoshop mockup that ends up with a beautifully crafted HTML and CSS. He says that there is too much variety in modern websites for there to be a one-size-fits-all approach. He also says that Photoshop can help the design process, but it should be only one of the many mockup tools. Wireframe mockup, Photoshop mockup, and HTML and CSS mockup.
http://codecondo.com/free-wireframe-tools/
This website provides 25 free mockup tools. It allows you to see what you are going to create and what layout would work best for a project, before you even begin. It is incredibly helpful because it prevents many potential mistakes from occurring along the way.
https://www.invisionapp.com/
For a more interactive and comprehensive mockup, which I personally prefer, invision is a great tool. You can make the static pages and intricate or simple as you want which is why I really like this as an option.
https://balsamiq.com/products/mockups/
Balsamiq is another free app which puts emphasis on taking simple designs and making them interesting. It includes chart tools, icons, and a variety of other useful images.
https://www.youtube.com/watch?v=RBMMjpJg6Qk
If you’re more interested in using something you already have, this clip demonstrates how to successfully create a website mockup in Photoshop.
http://www.creativebloq.com/web-design/faster-and-cleaner-mockups-101517451/2
This website provides 20 tips for creating mockups. Some of them are more advanced in comparison to the scope of this class, but there are still some good tips found on this website, such as remembering to be organized, especially with your files. It also talks about color and font choices, and emphasizes that the user experience is what matters most so sometimes design concepts should be simpler rather than complex.
https://www.siteinspire.com/websites?categories=
This website offers many examples of layouts, color schemes, and fonts. It also allows you to filter the websites by choosing specific layouts or color schemes, and by what the product actually is. Check this out if you’re stuck and need inspiration!
http://psd.fanextra.com/articles/a-comprehensive-guide-to-mockups-in-web-design/
This website talks about exactly what mockups are, what makes them different from wireframes, and provides tips and guidelines to follow when creating mockups. Some of the things the article says to keep in mind when creating mockups are that they should be organized, focused, and about the client and user experience. Some things to avoid are too many effects, hard to read fonts, not using any colors. There are also some examples of professional websites at the bottom of the page.
https://barnimages.com/free-mockups/
This website gives a list of a few great websites where you can utilize free mockups and demo videos and are able to show you how your mockup would look on a variety of different devices.
http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project
This website provides users with a ton of different color schemes if you need inspiration for your mockup or website!
http://blog.usabilla.com/how-to-design-effective-navigation-menus/
This website provides suggestions for not only creating working navigation bars, but also how to design effective navigation bars. It includes sections regarding position, color, wording, clarity, and consistent styles.
https://material.io/guidelines/resources/layout-templates.html#
This website provides template wireframes based upon Google’s Material Design. This can be useful if someone wants to design an application using Material Design principles.
https://www.butterfly.com.au/blog/design/10-steps-for-better-website-navigation
I think this website is helpful because it has 10 factors to consider when designing your website’s navigation. It shows some things you might not have thought about before such as clicking your logo to get back to the home page.
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
I found this website really helpful in understanding how to create a good wireframe. It goes over what is important and how to effectively create one!
https://designmodo.com/mockups/
I liked this blog post because instead of telling you exactly how to make a mockup, it covers why they are important and the differences between a mockup and a wireframe.
The following is a link to a 2018 article detailing different businesses and their unique use of html and css to create appealing homepages. In light of our upcoming proposals and final projects, I thought it would be nice to have examples and inspirations to aid our own creative directions.
https://www.crazyegg.com/blog/homepage-design/
Published in February, this article explains the process a web-designer might take when choosing a typeface for their website. Following this path might be a good idea if you’re stuck within Times New Roman or Courier.
https://www.websitebuilderexpert.com/designing-websites/pick-best-font-style-for-website/
This 2019 article gives links to 21 sites that provide quality (and optimized) stock photos. Photography seemed to be a key part of almost everyone’s portfolio and this will likely be the situation for the final. I expect that not every student has an arsenal of images to match their research, so these sites could be useful for that.
https://blog.snappa.com/free-stock-photos/
https://www.mockplus.com/blog/post/website-mockup
this is a guide to making a mockup.
https://www.justinmind.com/blog/website-mockup/
this is a more indepth guide that also includes some things to avoid with design
https://www.w3schools.com/howto/howto_css_contact_form.asp
this is a guide to making a contact page for the website since its popular
https://www.canva.com/colors/color-palettes/
Canva is a resource that I often use to find color palettes, which may come in helpful for our final project. You can type in key words such as “dark, moody” or “blue” or “spring” and peruse different options. You can also upload a photo and it will select the four main colors in the photo. When you find a palette or color that you like, you can copy the Hex color code and use it in your CSS.
http://www.webduckdesigns.com/pages/website-resources/website_mockup_tips.php
This article included brings to mind what you should consider when creating a mockup. It lays out all important information to gather before you begin, and walks step-by-step through the process. It includes helpful tips, such as “If you’re creative juices aren’t already firing off ideas, try researching other websites for similar companies.” Overall, this article gave me some peace of mind going into this process, because many of these things I would not have thought of!
https://uxplanet.org/12-practical-tips-for-creating-better-wireframes-be0418777946?gi=22e535ee4517
This article also gives some helpful tips, but this time in regard to wire framing. One thing that I would not have thought of was adding annotations to your wireframes. This is beneficial in jogging your memory and also if you present to others. You want to be able to efficiently convey the meaning behind your design.
When searching for inspiration for the Final Mockups assignment, I explored a few different webpages that provided some great tips.
https://www.smashingmagazine.com/2008/12/50-really-useful-css-tools/
Specifically, I was interested in finding unique ways to edit an image for the sample pages. This page below provided some great insight into things such as how to make the image corners rounded, how to tilt images and more.. https://codeburst.io/5-cool-image-effects-you-can-achieve-with-basic-css-fc3b66324bb6
Another thing I didn’t know you could do is actually adjust the image’s brightness, blurriness and more. This website was great for provided some tools as to how to edit the actual image in CSS.
https://cloudinary.com/blog/working_with_css_images#effects
https://www.graphicdesignresources.net/mockups/520-best-responsive-website-mockup-templates.html
This link includes over 520+ responsive website mockup templates. The website lists them and has them available to download. I think this would help to increase creative ideas!
https://www.framer.com/app-website-mockup-tool/
This link has a free mockup tool that you can sign up for and it allows you to make both website and app mockups. This link is also trusted by companies such as hulu, zoom, and spotify.
https://webflow.com/blog/website-mockup?gclid=EAIaIQobChMInOX0yK7f9wIVXhbUAR1uHAUBEAMYAyAAEgJTlfD_BwE
This blog provides a complete guide to website mockup design tools. I think this blog did a great job emphasizing what a website mockup is and why it is important to make them. It also lets you know what to look for in a website mockup tool and listed a few of their favorites.
https://www.hostinger.com/tutorials/how-to-create-simple-css-dropdown-menu
I think this website is a really good and quick explanation of drop down menus. It provides a simple outline of the html code you will need to incorporate as well as adding the CSS on top of that. In the rest of the post it includes examples of drop down menus and why you would use this design over others for a specific purpose. I think the conclusion was also really interesting in that it explains the benefits of included a drop down menu in your website.
https://www.webdew.com/blog/website-design-mockup
This whole website is very useful for creating a mockup for a website. While giving a brief overview of web design and other design elements that may be useful, it provides a very detailed step by step explanation for creating a mock up. The step by step guide highlights having your information ready for the mock up , and I think that doing this and being organized with your information will be important for this project.
https://enablemarketing.com/makes-website-visually-appealing/#gref
This is a really good website for refreshing everybody’s mind on design elements for a website. I think it is important to have these fresh in your mind when designing your mock up.
https://www.hostinger.com/tutorials/website-color-schemes
This website has a lot of inspiration for color schemes for the design mock up. Color schemes are a very large part of web design and the colors you use can really make or break your page.
https://blog.hubspot.com/website/website-typography
This website has a nice guide for typesetting. I know I personally should have had some different fonts for the portfolio project, so this will be helpful for the coming final project and mockups.
https://www.photoshoptutorials.ws/photoshop-tutorials/how-to-create-a-professional-web-layout-in-photoshop/4/
This website walks you step-by-step through the process of making an (example) mockup in photoshop. I thought it would be helpful for others because I’m not super well versed in how to use photoshop so I figure others won’t be either.
https://www.canva.com/
I know everybody already knows about this website but it is personally my favorite when I am making mockups or trying to sketch out a design of my website. There are a lot of graphics and cool designs you can add to really get an in depth mock up of your future website!
https://www.mockplus.com/blog/post/website-mockup
I found this website when we first made mockups and it became very useful when I was stumped or just needed some help and a more detailed description of what it is.
https://css-generators.com/
This one is less related but it is one I have used a lot to spice up my websites and add some cool textures whether it’s in the background or header they give you free range.
https://blog.hubspot.com/website/website-mockup
This website has a nice guide for beginners on website mockups. As we know, mockups are highly important since they showcase our idea on how the website will look.
https://www.canva.com/create/website-mockups/
Now, Canva counts with a free website mockup generator. I think this is a great resource especially because at the bottom they also explain the purpose and functionality of website mockups.
https://www.sliderrevolution.com/resources/css-dropdown-menu/
This website does a great job at providing multiple examples of CSS dropdown menus. Also, if you scroll to the bottom, they provide a FAQ about CSS dropdown menus and they answer questions regarding accessibility, how to do it, etc.
https://blog.adobe.com/en/publish/2017/08/20/the-10-commandments-of-getting-started-on-a-web-design-project?ef_id=Cj0KCQiA_qG5BhDTARIsAA0UHSK5_Pfdq2YBPCVtP44M9wo35LBjpdb9-R4OYXJegkUWBIhPT7Et75kaAqA1EALw_wcB:G:s&s_kwcid=AL!3085!3!710903109815!!!g!!!21623726828!167280597758&sdid=ZP46F2GS&mv=search&mv2=paidsearch&gad_source=1&gclid=Cj0KCQiA_qG5BhDTARIsAA0UHSK5_Pfdq2YBPCVtP44M9wo35LBjpdb9-R4OYXJegkUWBIhPT7Et75kaAqA1EALw_wcB#access_token=eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEta2V5LWF0LTEuY2VyIiwia2lkIjoiaW1zX25hMS1rZXktYXQtMSIsIml0dCI6ImF0In0.eyJpZCI6IjE3MzA3NjU3ODg1OThfYmM3ZTY3N2ItZDgxYi00YTQ3LTgyNTQtNzI5OWQxNGFlM2RlX3VlMSIsInR5cGUiOiJhY2Nlc3NfdG9rZW4iLCJjbGllbnRfaWQiOiJ0aGVibG9nLWhlbGl4IiwidXNlcl9pZCI6IjgxNUIxRTMwNjVERDFBNjkwQTQ5NUU1MUA0NDNiMWRiMzY0ZjZhYjE1NDk1YzE1LmUiLCJzdGF0ZSI6IiIsImFzIjoiaW1zLW5hMSIsImFhX2lkIjoiRDJFQjFENDM2NkYzNEI2QTBBNDk1QzY2QDZhMzkxZTFkNjUzMmViM2YwYTQ5NWZkNiIsImN0cCI6MCwiZmciOiJZNVRQQVNQTUZQUDVNSFVLRk1RVllIQUFUUSIsInNpZCI6IjE3Mjc5MTA0NzU0MzdfNzYwMjNiNTktYzRmZS00MTJjLWIxYWQtOTUzMWM5NTRiYWM4X3V3MiIsIm1vaSI6ImMxNDFhYzI4IiwicGJhIjoiTWVkU2VjTm9FVixMb3dTZWMiLCJleHBpcmVzX2luIjoiODY0MDAwMDAiLCJjcmVhdGVkX2F0IjoiMTczMDc2NTc4ODU5OCIsInNjb3BlIjoiQWRvYmVJRCxvcGVuaWQsZ25hdiJ9.HtpV7-OQ6qiysj7rOV8cgTQdiHR1naJIDzQg8O_-nIukxrLZP1gDgvYCi_RFTseGJjI8t-bO8DemhC3glEoxAduJt-9kQrSQDPfwZn9ph2uhdLHf12zXliAXkgSlYIj08A732Crxy1HxieTtOHKNmRf6DlYxaYKUzYfRo4E7kr5BAu66TSQiBmL8RhayaHMYYS4XTDA-1en-A5YSjmeetR3wikOlfwK8qfSUsMkdUFNnOeBmG-tgqNwzkulfEgRh4BUpm67uyFHuBP9_TBCeCakPf2DQtSVqHohSFUeJUArZnR0rvIvq2Oz7cRA6ZXG57BysEWsBafrqs-8HqZIzhQ&token_type=bearer&expires_in=86399995
This link is adobe’s tips on how to get yourself started on what you want to think about when creating your mockups.
https://blog.hubspot.com/website/website-mockup
This link helped me put a definition to what a mockup is and also more simple tip for creating one.
https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/#:~:text=One%20of%20the%20simplest%20ways,triatic%2C%20or%20split%2Dcomplementary%20color
This link helps explain color theory and what good color themes should look like.
https://www.webdew.com/blog/website-design-mockup?srsltid=AfmBOoqn9aOdZQlTs4lf0K2Ai4U4fAzvX9oIFJ_UOxK6spvwo5bgcadN
This website is very helpful for a beginner in mockup design. It goes through the basic elements and how to integrate them in a productive way. It also gives a list of mockup tools that someone can use with direct links.
https://www.sliderrevolution.com/resources/css-dropdown-menu/
This website gives great examples of drop down menus that you are free to use. It is very interactive in practice so you can get a feel for which type of drop-down menu you are looking for.
https://speckyboy.com/handing-off-your-website-mockup-to-a-developer/
This website is quite unique, as it gives you tips for how to present your design mockup to a skilled website developer. I think this is relevant because you want your mockup to be easy to comprehend and interpret. It is an even bigger challenge to have someone else interpret your idea for a website, so make sure things are clear and with purpose.
https://www.vondy.com/free-website-mockup-psd–K3PkgRuN?lc=5
– This website I thought was really cool, honestly for any project, but it creates a layout in writing based off your preferences. You can give any information you want included and then it will generate a layout plan for you and what kind of “vibe” or ideas it thinks you should include.
https://codeburst.io/5-cool-image-effects-you-can-achieve-with-basic-css-fc3b66324bb6
– This website discusses 5 basic add ons you can achieve on CSS that can add another level of depth to your website or mockup to create a new visual.
https://graphicdesignresources.net/mockups/520-best-responsive-website-mockup-templates.html
– This website offers 520!! website mockup templates that can showcase a web design someone has made. It is super easy to use, you download the specific template you want and then add your own designs and change to however you please and you are done!
https://blog.hubspot.com/website/website-mockup
This website describes what a website mockup is and leads you through four easy to follow steps on how to create your own a website mockup with paragraphs and images.
This site is a really great resource for beginners as there are images, examples, and recommended tools to get you started in web design.
https://balsamiq.com/
This website enables you to quickly create basic wireframes and mockups through drag and drop functionality. It’s a good way to organize your startup ideas and visualize your layout before adding colors, images, and finishing design details.
https://medium.com/@kamofah/turn-your-mockups-to-web-pages-with-html-and-css-in-8-minutes-e93db152aef0
This website is teaching users to rapidly produce an actual web page from a website’s mockup, using HTML and CSS. It is useful because it provides a concise coding process that makes your design functional and web-ready.