Session 1: Today we will continue demonstrating the techniques required to produce the Basic Portfolio Project. These will include looking at the box-shadow property and creating additional pages links in the site navigation. I will also assign the requirements for Basic Portfolio Project Milestone #3. During studio time I will give you each feedback on Portfolio Milestone #2.
Basic Portfolio Project Milestone #3
Due: Week 7, Session 2 (before class starts: 2 points)
1. Be prepared to show your template for final feedback in group critiques
2. Illustrate working navigation to one or more additional pages
3. Demonstrate how your markup and stylesheet differ from the in-class demos
Session 2: Today we will discuss the requirements for the Typesetting for the Web exercise. This exercise is intended to illustrate the alternatives to web-safe type as well as alternatives to rendering type as images. Placing type as images in web documents used to be the only way that non-web safe fonts could be included in navigation and content headers. Although many web designers still use this technique, it is well known that it limits accessibility and does not contribute to good SEO (search engine optimization).
Technical Exercise 4: Typesetting for the Web
Due: Session 2, Week 7 (4 points)
Description:
Use the CSS3 @font-face rule to apply several open typefaces to a single web document. Create three headings and three paragraphs of place-holder text on the page. Use a minimum three open typefaces or fonts that you have a license to use for the headings and paragraphs. Experiment with the CSS properties line-height, and letter-spacing.
Requirements:
1. Use the CSS3 @font-face rule typeset three headlines and paragraphs
2. Download fonts from an open web resource or fonts that you are licensed to use
3. Use three or more typefaces for the headlines and paragraphs in the exercise
4. Apply several examples of the CSS properties line-height, and letter-spacing
5. Add the files and folders to your environmentand upload to your webspace
Points Breakdown:
2 points will be awarded for applying each typeface
1 point will be awarded for using line-height effectively
1 point will be awarded for using letter-spacing effectively
Relevant Resources:
CSS Text Layout Properties
Open Font Library
Font Squirrel
csstypeset.com : I’m not entirely sure if this includes any fonts that are not web-safe, but it is a really useful source allowing you to play around with your text in different sizes, fonts, colors, and other things and see how it looks then copy the CSS code.
http://www.survah.com/use-non-web-safe-fonts :This one shows you how to use non-web-safe fonts and also how to use one of the links you listed under relevant sources, font squirrel’s (generator), in a step-by-step instruction.
http://www.smashingmagazine.com/2008/04/5-principles-and-ideas-of-setting-type-on-the-web/ :This website tells you how to prioritize your fonts and how to send your message or communicate your brand effectively through the fonts you choose.
1: http://alistapart.com/article/responsive-web-design/
This first article deals with an interesting problem we have addressed in class a few times now–web page viewing and its differences across different devices (cell phone, laptop, etc.). While its relevancy applies to any week, I thought that with our increased focus on the Portfolio Project (and thus on developing our own content) that this article might serve us well now. As a potential solution to improperly viewed content, the article tells us about “media queries”. Essentially, it’s a qualification set into the CSS of a linked stylesheet that enables different stylesheets to applied based on the size of the loading device’s screen. It’s one example of a solution and I thought it was interesting.
2: http://www.w3schools.com/css/css_background.asp
This second article deals with background images and their various applicable properties. While it may be lacking in overall text, it explains quite well the effects of manipulating different aspects of the background image. With DIY exercises and a full listing of attributes affecting the background image, I thought that this article might help us with our designs regarding this component.
3: http://jaydenseric.com/blog/forget-normalize-or-resets-lay-your-own-css-foundation
Probably the most interesting of the articles. Offers another alternative to CSS Normalize or CSS Reset. It’s basically laying your own foundation, but doing this based on a template that the blog writer has devised himself. He claims it’s a pretty standard foundation, and that it should work for just about every project. A lot of this code is new, but–thankfully–the writer provides an explanation on each line of code and what it does.
http://www.geekartist.com/2011/03/31/cross-platform-website-matter-me/
a beginner friendly article discussing options and providing ways to double check how a site might look on other platforms
http://web.mit.edu/jmorzins/www/fonts.html
so simple its hystericle, this website talks about web safe fonts that are more or less universal
http://codechirps.com/how-to-safely-use-non-web-safe-fonts/
short and sweet hack-type solution (word play!)
http://www.buzzfeed.com/hayleycampbell/when-doves-type#.umb238zVQ
Great website shows you many different CSS designs made from different people. The idea of the website is to download the HTML file and make your own CSS stylesheet. It show you the beauty off CSS in many ways.
http://www.csszengarden.com/
How to make your text looks better. The article shows how typeset makes a different for better looking and easier for the reader. Some technic and methods that makes your text looks much better.
http://www.designersinsights.com/designer-resources/learn-to-typeset-like-a-true-print-designer
Some examples for HTML5 navigation bar using CSS. And how to do 2, 3, or more levels of navigation bar. Also how to make a drop down navigation bar.
https://www.webcodegeeks.com/html5/html5-navigation-bar-example/
https://codemyviews.com/blog/website-navigation-trends-10-tips-examples
This website shows many different examples on how your navigation could be laid out on your web page.
http://www.cssfontstack.com
This website shows web safe fonts that you could use on your webpage, but I also thought it was cool how it showed a comparison on how the font looked on a mac vs windows computer.
https://www.smashingmagazine.com/2008/04/5-principles-and-ideas-of-setting-type-on-the-web/
This site talks about the design of the entire webpage and the thought behind it. It first brings up the typography decisions, then information hierarchy, the design flow, the high quality of the site and user interface.
http://learn.shayhowe.com/html-css/working-with-typography/
This is a nice, easy, helpful site that goes over some of the basics on typography for html and css.
https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
This site lists some fun and more unique web fonts to use, and shows you how to embed them.
https://medium.com/@tbredin/a-jolly-web-typesetting-adventure-42948ab0d1dd#.jojxgzras
This site has some interesting ideas on typefaces. Offers some suggestions on how and where to place them using css.
https://thenextweb.com/dd/2015/08/18/the-future-of-typography-in-web-design/#.tnw_4hLmK6AI
This site discusses emerging creative uses of typography in web design. My interest became peaked with typography working together with the background.
https://designmodo.com/web-typography/
This site gives an explanation on typography that isn’t considered by students. It shows the different descriptions of type size, spacing, and style. There are examples of how to import type styles from the web, which from what I understand is what we are learning about Thursday.
https://www.typewolf.com/google-fonts
This site I chose to help the class with some creative inspiration. It lists a ton of the best fonts that Google Fonts provides.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b
This site explains how box-shadow property works and has a nice interactive demo of box-shadow.
https://cssgenerator.org/
An interactive css generator that is very easy to use. It’s awesome!
https://pageweight.imgix.com/
This site gives result of how image size in a webpage affects its speed. It also gives suggestion on how to fix them.
https://1stwebdesigner.com/css3-text-effects-typography/
This is a website that lists many tutorials for different kinds of effects that one can create with web typography and the CSS3 properties. It is relevant to this week’s topic of typesetting and web typography, and provides plenty of interesting and accessible options for use in portfolio websites.
https://www.seo.com/blog/fonts-seo-and-compatibility-a-designers-dilemma/
This website has a brief article that talks about the challenges of designing a website with fonts that might not show up correctly in different browsers, and how that plays into search-engine optimization (SEO). This is relevant because choosing a font that not only looks attractive to the viewer’s eyes but also shows up when people search for content is more difficult than it might seem.
https://www.codementor.io/codementorteam/4-different-html-css-layout-techniques-to-create-a-site-85i9t1x34
This is a blog post about four different ways to create pages with multicolumn layouts. It’s meant for beginners, and is a good way to start learning the basics of organizing the content on your web pages; it’s relevant to this week because we are working with designing the templates and layouts of the pages for our portfolios.
https://www.creativebloq.com/advice/10-great-web-type-resources
This website lists 7 type resources. It features links to online courses in typography an others that help readers become familiar with the different terms that go along with typography.
https://cfpb.github.io/design-manual/brand-guidelines/typography.html
This is a really great site that walks you through picking not only your font but also the size and how clear typographic hierarchy is critical to the effective communication. It also walks you through different color combinations and explains why some are better than others.
https://www.chenhuijing.com/blog/how-i-design-with-css-grid/#%F0%9F%91%BE
This article walks you through designing with CSS grid. It’s a super cool way to layout your portfolio that might make it a little more distinctive from others in the class. The article is clear set by set with what you need to do to make your website into CSS grid.
https://speakerdeck.com/kylefox/typesetting-the-web?slide=23
This article/slideshow shows how your typography choice can evoke mood or feeling. It also shows ways to change your type in HTML/CSS.
https://www.smashingmagazine.com/2008/04/5-principles-and-ideas-of-setting-type-on-the-web/
This articles gives the “5 Principles” of setting type on the web. The article shows how to make your webpage flow well (easy to navigate with use of typesetting).
https://www.cssfontstack.com/
This website has web safe fonts. It also shows how compatible each font is with Windows or Mac users.
https://medium.com/sketch-app-sources/30-free-and-open-source-typefaces-released-recently-best-collections-5b46f9d89f65
This article provides a variety of typefaces that can suit different needs, broken down into categories that help determine what the user wants from their typeface (such as typefaces optimized for headlines versus typefaces optimized for readability at small sizes).
https://www.creativebloq.com/features/10-great-uses-of-typography-in-portfolios
This article showcases several portfolios that utilize distinctive typefaces, complete with interviews with the designers explaining their thought process and design goals. Hearing the designers explain their reasoning behind their choices was extremely helpful to the process of deciding on how to present my portfolio in the best way possible.
https://www.crowdspring.com/blog/font-law-licensing/
This article focuses more on legal questions regarding fonts and typefaces when used in marketing, focusing on trying to educate the reader on questions that may arise when searching for a typeface to use for commercial use. These range from simple clarification on terms such as the difference between fonts and typefaces, to more complicated questions regarding copyright law. It also has a section on design, weighing the different reasons behind choosing a serif or sans-serif typeface.
https://www.newmediacampaigns.com/page/10-ways-to-easily-improve-your-website-using-embed-codes
This website is a great source to find different ways in which you can imbed media on your website.
https://www.awwwards.com/websites/typography/
This website has several examples of creative ways people have used typography on their website.
https://www.canva.com/learn/how-to-marry-text-and-images/
This site gives insight into how you can best use text on photos for your website.
https://www.codeconquest.com
This was a resource that I initially used to get myself up to speed. I had previous knowledge or exposure to coding so this helped me wrap my head around what we were doing, what we could potentially be doing and what I had to look forward to. Now I use this also as a guide for inspiration as we are beginning to make our own creative choices for our site.
https://www.creativebloq.com/features/the-best-monospace-fonts-for-coding
This is a site that I have been using as a source and inspiration for fonts. With the opportunity for having creative decisions over our own page, I want to make it very complimentary so that my page has potential to be used in the future as a sort of resume page.
https://learn.shayhowe.com/html-css/working-with-typography/
I have used this page as an opportunity to learn more about fonts and how to edit them. This resource gives examples of how to edit code to italicize and bold different fonts. I think this will be helpful for me as I create headers and different buttons. Bolding them will gain the viewers’ attention and make them stand out from the rest of the page.
https://unsplash.com/collections/491836/website-backgrounds
With the option to choose a color palate and a website background we are now faced with the difficult decision of choosing one. I have found this website helpful to use as inspiration for a backdrop to my website. With a wide variety it has also provided me with different options that coordinate with the color theme that I have chosen for my site.
https://www.motocms.com/blog/en/how-choose-photo-background-website/
Not only do we have the opportunity to take creative lead on a back ground but I believe it is important to make a well-educated decision on this option. As a strategic communication major, this decision is one that I look forward to making in the future as well. Plus, I am super indecisive, so this site has been helpful for providing me with a method to my madness.
https://www.themuse.com/advice/the-35-best-personal-websites-weve-ever-seen
Because I want this site that we are creating to act as a resume resource in the future I have been researching what makes a successful personal website. This site contains examples of well-organized and aesthetic personal sites that I have also been using as a source for inspiration.
https://www.themuse.com/advice/4-major-reasons-you-need-coding-skills-even-if-you-dont-want-to-be-an-engineer
Before we began classes I was very intimidated by the world of coding and to attempt to code. While I still struggle a ton, I have also learned a lot. I know that what I am learning will be very impactful in my career and helpful in the future. I used this site as motivation as I was intimidated by coding.
http://web.mit.edu/jmorzins/www/fonts.html
This website gives the guideline for what fonts are most commonly used and how to use them.
https://www.cssfontstack.com/
This website provides Web-safe fonts that we can use in CSS. This was helpful because it displayed the fonts as well as how well the font will turn up. It is a complete collection of web safe CSS font stacks.
https://pageweight.imgix.com/
This website helps fix larger images that slow down your websites. It shows the users how it slows it down and why it is important to be aware of the page speed.
https://www.toptal.com/designers/typography/web-typography-infographic#:~:text=Typography%20in%20web%20design%20is,provide%20a%20pleasant%20reading%20experience.
This website gives a guide to the type of typography that is best for designing websites. It gives a over all explanation of how your text should always be readable and should be clear. it also talks about how you should keep in mind that people use different screen, so formatting is important.
https://www.webfx.com/blog/web-design/a-basic-look-at-typography-in-web-design/
this website talks about the basic fonts you could use. It also talks about how certain settings control the way typography shows on your websites. It talks about the different type fonts you could use such as web safe font, as well as how you could replace your fonts. The beauty of mixing fonts.
https://www.gate39media.com/ui-design-spotlight-7-types-of-navigation-menus/
this website talks about the 7 most used navigation menu. So those are standard horizontal menu, the hamburger menu which is the 3 lines on top of each other, mega menu, etc. each looks different and located different places on the website.
Designing for Readability: https://www.toptal.com/designers/typography/web-typography-infographic
This site provides some tips for formatting typography and choosing fonts that create the best reading experience for viewers.
The 10 Most Important HTML Tags You Need to Know for SEO: https://www.greengeeks.com/blog/html-tags-for-seo/
This site gives 10 HTML tags with explanations and examples that can help improve your pages search engine visibility.
@font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Here is a brief overview of the syntax for a @font-face rule. It also provides some other CSS elements that can be applied.
HTML Links : https://www.w3schools.com/html/html_links.asp
This site easily breaks down ways to link your websites, social media, and email with text or an image.
Icons: https://www.iconfinder.com/search/?q=instagram
This site is an excellent resource for icons for your website that can be downloaded in several formats.
https://www.shillingtoneducation.com/blog/what-is-typography/
This site takes you through the basics of understanding typography. It talks about the history of typography, properties of a type, type classification, typography rules, readability, and typography vocabulary.
https://www.mentalfloss.com/article/82867/whats-difference-between-font-and-typeface
This website talks about the difference between a typeface and a font. It says that a typeface is a collective of related fonts (like Times New Roman) and font has to do with the weight, width, and style for a typeface (like Times New Roman Bold). After determining the difference, it then goes into the specifics of both typeface and font.
https://design.google/library/choosing-web-fonts-beginners-guide/
This Google Design website talks about how to choose a font for your website. It takes you through each step in the design process to make sure you pick the font that would best fit your website and serve its purpose. It specifically talks about thinking about the overall project, thinking about what you want it to say, how much text, what size you want the text, who is the audience, the weight of the font, and how many fonts you want to have.
https://www.shillingtoneducation.com/blog/what-is-typography/
This site takes you through the basics of understanding typography. It talks about the history of typography, properties of type, type classification, typography rules, readability and typography vocabulary.
https://design.google/library/choosing-web-fonts-beginners-guide/
This Google Design website talks about how to choose a font for your website. It takes you through each step in the design process to make sure you pick the font that would best fit your website and serve its purpose. It specifically talks about thinking about the overall project, thinking about what you want it to say, how much text, what size you want the text, who is the audience, the weight of the font, and how many fonts you want to have.
https://www.mentalfloss.com/article/82867/whats-difference-between-font-and-typeface
This website talks about the difference between a typeface and a font. It says that a typeface is a collective of related fonts (like Times New Roman) and a font has to do with the weight, width and style for a typeface (like Times New Roman Bold). After determining the difference, it then goes into the specifics of both typeface and font.
As we work on our portfolio projects, I wanted to point out that the W3 schools website has a ton of examples of different techniques you might want to try coding and don’t know how to yet.
Specifically, I was looking to make columns in my portfolio and I found this article and example that was super helpful. https://www.w3schools.com/howto/howto_css_two_columns.asp
This is an article I found going over non-web safe fonts and the different ways you can get/use them in your CSS. https://www.psd2html.com/blog/non-web-fonts.html
This is an article I found explaining a little bit more about wed safe fonts and why we use web safe fonts https://www.webfx.com/blog/web-design/why-we-still-need-web-safe-fonts/
https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
This website gives good tips on how to make sure your typography looks presentable on the web.
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
A guide on which fonts you can use and it helps you decide which font stretch and weight to use.
https://www.velocityconsultancy.com/importance-of-a-typography-website-design/#:~:text=Using%20typography%20fonts%20in%20website,for%20a%20positive%20user%20experience.
This website discusses importance factors of typefaces in web design including alignment, sizing and typefaces that are safe for the web.
https://thefutur.com/content/the-ultimate-guide-to-typography
This article is a really good overview of what typography is, and gives lots of great tips on how to use typography to elevate your website.
https://xd.adobe.com/ideas/principles/web-design/best-modern-fonts-for-websites/
this article provides explanations and recommendations for fonts that are the best for websites and easy reading/skimming.
https://www.makeuseof.com/tag/7-cool-html-effects-that-anyone-can-add-to-their-website-nb/
this article provides a couple of html tags that we can add into our code to make our websites cool! I think some of these would be great additions to our portfolios!
Typography: https://careerfoundry.com/en/blog/ui-design/choosing-website-fonts/
While talking about typography I found it hard to choose a font with the thousands available on the web. This website gives a step-by-step guide on how to choose a font and the things you should be thinking about when deciding such as: accessibility, primary, secondary, and accent fonts.
Cool new elements: https://dev.to/ruppysuppy/7-cool-html-elements-nobody-uses-330c
While we continue to make our templates for our portfolio project I think it is a good idea to add our own flare to our websites. This site gives some easy elements to add to your own portfolio.
Accessibility in colors: https://venngage.com/blog/accessible-colors/#:~:text=Color%20pairings%20with%20a%20contrast,text%2C%20large%20text%20and%20graphics.&text=Color%20combinations%20with%20a%20contrast%20ratio%20of%207%3A1%20for,and%20graphics%20provide%20enhanced%20accessibility.
While also talking about color it is important to remember that some people view colors differently, that is why it is important to have high contrasting colors in your color palette. This article talks about how a 4.5:1 ratio as a good baseline. It also gives reasons to why it’s important to choose accessible colors and how to do so.
https://getdevdone.com/blog/non-web-fonts.html
This first website talks about what non-web fonts and web-safe fonts are. It talks about what makes a font web-safe and gives four effective font replacement methods so that your fonts will render the way you want.
https://www.toptal.com/designers/typography/web-typography-infographic
This website talks about web typography and the challenges that come with it. It gives you advice on how to use the best font for readability on a screen. It also gives advice on formatting for a pleasant reading experience.
https://www.uxpin.com/studio/blog/typography-in-web-design/
This website goes more in-depth on typography, typefaces, and fonts. It gives a lot of great detail on classifications and formats. It also talks about color contrast and readability. All of these sources were really helpful and gave me a better idea of fonts and typography for websites.
https://www.free-css.com/template-categories/portfolio
Free downloadable CSS templates for web portfolios
https://nestify.io/blog/font-size-in-css/
Easy how-to for changing font size, including absolute and relative sizing
https://blog.hubspot.com/website/web-safe-html-css-fonts
The 23 best web-safe fonts to use in HTML or CSS
https://www.javatpoint.com/how-to-add-social-media-icons-in-html
This website gave me great insight on how to add my social media accounts to the “Home” page for my portfolio. The coding and unique codes that I did not know existed.
https://www.agconsult.com/en/usability-blog/contact-info-how-what-and-where/#:~:text=Good%20contact%20information%20makes%20you,sure%20you%20get%20it%20right.
This website explains why it is so important to have a “Contact” tab on your website. It shows that you are accessible and value engagement with audiences. It also explains what contact information you should put on that is valuable vs not valuable.
https://www.hostgator.com/blog/pages-every-website-needs/
This website shows examples of common website and what information or tabs are important to any website. For “products” that they mention, it is important to share the “products” or work that I have done that I may be proud of and want to showcase. It’s also important to share an “About” section, sharing what I care about and prioritize in my life. This portfolio page should showcase me, what I am proud of, and help others truly understand me.
https://www.wix.com/blog/web-typography-rules
This article talks about seven important rules for good web typography. It covers things like choosing the right fonts, spacing between lines, and making sure there’s enough contrast so the text is easy to read and looks nice.
https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
This article gives ten useful tips on web typography, focusing on picking the right fonts, keeping line lengths just right, and using a simple design to make the text easier to read.
https://blog.hubspot.com/website/website-typography
This article covers the basics of typography in web design, including important terms and the best tips.
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
As we’re getting closer to the web typography exercise, I figured I would take a look at more typography. This first article is from a website called developer mozilla where it has articles and guides all about coding. This specific article focuses on the spacing between letters, whether it is bringing them closer together or further apart. This could be for multiple different reasons: to improve readability, for visual aesthetics, or even for a better balance and layout.
These next two articles are from the same website: CSS Tricks
https://css-tricks.com/getting-creative-with-quotes/
With our final project being about a real organization and a real business, depending on what is chosen, quotes might be needed. It’s easy to just insert a quote into a paragraph or a random section but quotes are included for a reason so it’s important for them to stand out. This article gives creative ideas about making quotes not only stand out, but look more stylistic and intentional.
https://css-tricks.com/getting-creative-with-versal-letters/
This final article is more about typography itself and ways to spice up a simple font, even if it’s just a single letter. It ranges from simple shadows, hollowing the letter out, to fun shapes and colors. If it’s an important section of information, it’s crucial to make it stand out, and make the reader’s eye go to it immediately.
https://blog.hubspot.com/website/website-typography#what-is-website-typography
This article discusses the basics of Web Typography and some basic universal guidelines that should be applied to all web pages.
https://www.adobe.com/creativecloud/design/discover/typesetting.html
This article discusses typesetting and its history. It also discusses tools that can make typesetting and typography easier and more efficient.
https://www.hurix.com/blogs/typesetting-trends-and-innovations-that-shape-modern-design/
This article goes into extensive detail about typography and a little bit of how it applies to graphic design and the trends that appear there. It talks about the organization of content, how to properly emphasize things that you want to stand out, how typography can impact how people view your page, and much more.