Week 35 — Project Exam (week 3)

Last Friday the Convig 19 affected California and “Shelter in Place” was put in place. This makes my scheduling even harder. I have three kids — ages 2, 5 and 8 — at home now all the time. Addition to that they need to do their homeworks, have their PE, naps, reading etc. and be fed 5 times a day. I’m still convinced I will make it through!!

 

DAY 11

WEBSITE: I’m planning a bit ahead so that all the needed information would be available and building the website would go smoothly when we get there. The clients website is hosted by GoDaddy but we have been trying to figure out the access to the website. Somehow with the giving passwords I’m not able to get in GoDaddy. The responsibility of updating the website will be forwarded as well, so we need to figure out this.

NEWSLETTER: The Newsletter has been done with the MailChimp. It seems that everyone has been using their own account to send the Newsletters. All the passwords are connected to the gmail address that is under another person which makes updating all more complicated.

Plus it’s the first day of homeschooling our kiddos. Thanks to Corona virus, school lock down and shelter in place. I have a lot of help 🙂 Scheduling rules the world here now and naptimes are more important than ever!!

During the weekend I also realized that I had made a mistake with the business cards. With this combination, I didn’t have the name of the organization anywhere. As much as I liked the frontside of the card, I decided to keep the back detail (it gave much needed blue while placed with the other  stationary) and try to look new options for the frontside of the business card.

DAY 12

So I had to do few changes to the frontside of the business cards.
Here’s the new result.

This slideshow requires JavaScript.

I started to created the template for the Newsletter. I searched inspiration and spend time getting to know MailChimp. To be honest if I need to implement the Newsletter to the MailChimp I will need much more time to do it. That’s a question that I asked the client. My original consumption was that I just do the design but there’s no point to do the design if it’s not implemented right away to the use.

The old format for the MailChimp has worked ok according to the client. It just has been a mix of different colours each time and lacking a bit of rules. With the Brand Manual I try to create them so that creating the Newsletter according the brand visual look.

DAY 13

NEWSLETTER:
Today I worked with the Newsletter. I sketched with hand first to the paper and then took it to InDesign and continued sketching in there. You can see the final result here.

DAY 14

BRAND MANUAL:
Then I went forward to design the Brand Manual. I had everything on the paper already. I had collected all the typography, colours and elements and now it was just time to write it down. I hope this will help the client to be consistence in the future with the look of the brand. Here’s the BrandManual.

DAY 15

I did a bit cleaning for the Brand Manual and wanted to take a day to go back to the folder. I know that the budget is limited but I still wanted create the folder so that the wings on the side can be clued. The original design was made in InDesign but when the bleed area has to be added manually, I went back and took it to Illustrator. I created the folder from scratch, added the wings and the bleed area.

This slideshow requires JavaScript.

Next week I’ll start to design the website. Quite excited about it already!

Have a wonderful weekend.

P

 

 

 

 

 

Posted in Uncategorized | Leave a comment

Week 34 — Project Exam (week 2)

DAY 6

I continued the logo process. I fine tuned the wax paper sketches and scanned them to Illustrator. I turned the hand drawn sketches to digital ones.

Finlandia Foundation San Francisco Bay Area logo options digitally sketched can be found Here.

I picked the ones that I thought could be the best ones to show to the client and send them to comment.

DAY 7. 

While waiting the options being viewed and the customer to get back with their comments and decision, I started with the Brand Manual. I explored and tested different typography, colors and elements according to the moodboard and based on customers answers.

DAY 8-10.

LOGO

In the end the logo was send to all the board members to have a vote. There was four options that were pre picked for the vote (two of those were similar, others very different). Two options raise above the other ones and there was one which got one vote more than the other. With one vote difference this one was selected to be the Finlandia Foundation SF Bay Area Chapter’s logo.

Logo versions to the board

I fine tuned it a bit, checking that it scales nicely, all the lines were straight, outlined all the fonts and made different versions to use in different products. I checked that the printable versions were saved with trim marks in CMYK and web versions were saved in RGB. I tested which options would look best in the stacked version. The “SF Bay Area” on the left, right or in the middle. It looked a bit too heavy on the left side if put to the left. On the right it didn’t read correctly from the left so after testing in stationary I decided that the middle would serve the purpose and the logo could be used on the right or left side and it would be ok in it.

Logo_FINAL_web

 

STATIONARY

Creating the stationary. Here’s the business cards.

This slideshow requires JavaScript.

And here’s the envelope, letterhead and folder.

This slideshow requires JavaScript.

Posted in Uncategorized | Leave a comment

Week 33 — Project Exam (week 1)

For the next seven weeks I’m working with a client Finlandia Foundation SF Bay Area Chapter. I signed up to design a logo, business card, letterform, Brand Manual and a website for them.

Business/Concept: Finlandia Foundation San Francisco and Bay Area Chapter is an organization that promotes Finnish culture and traditions for anyone interested in Finland or Finnish-American heritage. It’s one of the 50 Chapters working in USA under the umbrella organization, Finlandia Foundation National based in Pasadena, California. It’s among the biggest and most active Chapters in the USA with Finlandia Foundation New York Metropolitan. Finlandia Foundation San Francisco and Bay Area Chapter was founded originally in 1956 as the Palo Alto-Stanford Chapter and was closely associated to the Stanford University and it’s faculty at the time. Afterwards it has expanded to reach the hole Bay Area in California and the name was changed. The organization sets together several cultural programs during each year. Some of the events are yearly Christmas fair, First of May celebration and Finnish heritage Sharks hockey game. Among those there’s cultural lecturers, book authors visits and etc.

Profile and concept: The Chapter works with volunteering effort and is run by Broad of Directors that are selected each time for two years. While the organization offers activities to anyone who’s interested in Finnish culture, it doesn’t at apart or give advices of relocation, housing, moving or visa issues. It’s clearly separated from the Consulate and the bureaucratic issues.

While being one of the biggest and really active Chapter in USA, it was time to update the design concept. Facebook and the newsletter are the biggest channels to contact people and the website is seeking new people to join, showing how active the Chapter is and getting donations for the Chapter.

WEEK 1

CUSTOMER RESEARCH and INTERVIEW: Target group, competitors, similar foundations, background information / checking details with the customer.
LOGO research, idea development
LOGO Idea development and sketching
LOGO Finalizing the options to show the customer
LOGO Finalizing the logo

DAY 1. 

The first day went by reaching information about the client, other Chapters and other Organizations. It seemed that quite a few of the websites are not that well done. They might offer information but are poorly designed. Although I also found couple that I really liked and would like to do something similar. The customer is looking for a modern and clean look.

I was also looking for overall inspiration and feeling for the project. I was looking what works and what doesn’t work in the other logos, websites and ways of present the information.

After that I formed the project and it’s boards to TRELLO and invited my clients to join the group.

Screen Shot 2020-02-24 at 1.00.44 PM

Here’s some of the founding. I was inspired by nature of Finland, birch trees, Golden Gate bridge, well organized clean websites. There’s also pics that I need to not necessary follow but take into consideration.

 

DAY 2. 

I started concentration to design the logo. I searched more inspiration. The client wanted to have modern and clean look, that would combine Finland / Finnish culture, art and tech to Bay Area and maybe Golden Gate and red color.

Moodboard

Moodboard

Inspiration board

Inspiration

After the search I started to sketch. I had my sketchbook with my everywhere and I searched inspiration from web, brochures, when moving from my phone, outside from the nature, posters etc. When ever I saw something interesting, I tried if it would work for my logo.

 

DAY 3.

I changed a bit the order of the schedule and planned the sitemap for the website already. In the brief we had already discussed what the client wanted to include to the website. After exploring other websites, I gathered the information together and made two suggestions. This gave us more time to comment this and more time to start write the texts for the website (when knowing what we needed).

Website_sitemap_Page_2

 

DAY 4.

I continued sketching the logo to my notebook.

This slideshow requires JavaScript.

DAY 5.

I traced Golden Gate bridges from the photos and the handsketched logos I thought that would work for the Finlandia Foundation San Francisco Bay Area. I used wax paper, light board and black fine markers.

Posted in Uncategorized | Leave a comment

Week 32 — Websites and Mobile Devices

Building a Mobile-Friendly Website

  • Write a detailed brief. (You may use a real client or a fictional one)
  • Use the information from the brief to build a wireframe for the website
  • Choose a WordPress theme for the website
  • Customise the WordPress theme to fulfil the specific needs of the client
  • Make sure that the site works on both desktop and mobile devices (it does not have to work perfectly, but I want to see that you have considered it)
Upload your brief, wireframe and website to your WordPress blog.
I needed to update my portfolio and has been doing it among the Mandatory assignments and weekly activities. So I decided to continue with it and take it as a part of this activity.

Brief

  • What is your service/product?

I’m a graphic designer who is looking for new design projects to work with. I design logos, posters and flyers, brochures, business cards, profile manuals, illustrations, invitations, photographs, websites, motion graphic etc.

  • What are your requirements?

I want my site to be professional and simple. It is important for me that the site is visually appealing and designed well, to convince potential clients that I have an eye for design. The same goes for the coding; since I mention web design as something I can do, the site also needs to be responsive and the code well structured. I want the focus to be on the portfolio and my work. I want the site to reflect me and my personal style as a graphic designer.

  • What is the website’s goal?

The goal for the website is to get new clients, and convince them to work with me on their next project. It should show potential clients what I have already done, and give them an idea of what I could do for them in the future.

  • How are you going to achieve this goal?

I will achieve this goal by making a portfolio that has great focus on my work. This includes choosing my best work, and showcasing these in the best possible manner. To achieve this it is also important that the site is user friendly and easy to navigate.

  • Build the website architecture

Week32_website_portfolio

  • What is the design style that will be required?

The site should be simple, clean and timeless. I want the site to have some sort of a Nordic feel to it, maybe with a blue or tourquise colour. The portfolio part should be simple and the thumbnails should have a similar feeling.

  • What are your suggestions for marketing the site?

Using social media platforms such as Facebook and Instagram, where I have my own pages/profiles. Promoting the site on these platforms is important as more people will find it that way. I will also update other blogs, and eventually set up my own business card where I can add the url. This also goes for my e-mail signature, where it makes sense to include the url.

  • What is your business strategy

Working as a graphic designer can be hard. It is definitely a competitive field, and making clients choose you can be a challenge. The website will help me great in this, as long as the brief above is followed. The website will make it easier for me to promote my work, and I can easily direct potential clients to this site to give them an idea of what I can do.

  • Domain Registration and hosting

I already have an account through one.com.  I will be using this hosting company. As I may update this now and then as I get more projects, a WordPress site is beneficial as it’s easy and quick to update from anywhere.

The site url is: https://www.pauliinaviinikanoja.com/

For the parent theme I chose Pure from gt3themes. I liked it’s portfolio feature. It was close enough but I still needed to make the necessary changes to the look. I created a child theme and changed the fonts, modified the header and footer using child themes CSS and PHP sheets.

Here’s how the Pure looks.

Screen Shot 2020-02-09 at 9.26.31 AM

And here’s an example of my portfolio website. I still need to work with my logo. I haven’t get put much time to sketch it further.

Screen-Shot-2020-02-09-at-3.31.27-PM

Posted in Uncategorized | Leave a comment

Week 31 — Websites and Business Strategies Part 2

The second learning activity was to surf the web and find 5 examples of websites that have been coded and designed for performance.

As we learned in the lessons the speed is a fundamental part of the user experience on the web.The site should be simple and efficient.

Here’s my examples:

1) Yle News text version: This news site has been working everywhere — even in China. It’s fast and offers the relevant news but you don’t need anything else.

https://yle.fi/tekstitv/txt/P100_01.html

2) Ampparit news: the second example is a news site as well. A bit more styled but still simple, loads fast, offers the relevant and is mobile friendly.

https://www.ampparit.com/

3) Apple —  I do like a lot their elegant and simple website, similar to their products.

www.apple.com

4) Netflix  — fast loading and well organized site even though the products contains images and videos as the website should as well.

www.netflix.com

5) Amazon — I have to put this one here to the fifth. The site I’m using almost daily. It loads usually nicely even though it has millions of products and millions users. It’s not in the list I was going though In Hupspot’s site but I still choose it instead of Marks and Spencer or HBO.

www.amazon.com

Posted in Uncategorized | Leave a comment

Week 31 — Websites and Business Strategies Part 2

This week we dived deeper into the websites and business strategies.

There was a lot to do. After reading and watching the LinkdIn vedeo who to build a website in Dreamweaver using Bootstrap, the first learning activity was:

Building a Website From Start to Finish 
1 ) Write a detailed brief for your website
2) Create a wireframe according to the brief
3) Draw some sketches to plan your design
4) Build a working websites according to these specs

It’s important for me to see that you can follow through on the entire process – from the brief to the completed website. Please explain why you make certain decisions. How do these decisions fit in with the business strategy?
Upload your brief, wireframe, sketches and link to your website to your WordPress blog. There’s quite a lot to do for this assignment, so it’s advisable to keep your website simple.

Here’s my execution. 

  1. Write a detailed brief for your website.

I wanted to continue the idea to create a website for a graphic designer like me to show her/me  projects, be able to share it and get customers interested. I written most of it down already in the last learning activity but here’s detailed brief for the website.

It has to be functional, fast downloading even though it will have a lot of images and a video. The look has to be clean, modern and well balanced. The colors has to be in harmony and the fonts interesting but still having good readability. The projects has to have a gallery page and then be able to click forward to more specific detailed information about the project, including more photos or a link to a pdf or website.

The site must include a company logo, link to a blog and contact information. 

2) Create a wireframe according to the brief

Screen Shot 2020-01-12 at 9.45.50 PM

Screen Shot 2020-01-12 at 10.40.48 PM

3) Draw some sketches to plan your design

Here’ the mock up made in the Photoshop.

Screen Shot 2020-01-21 at 2.05.54 PM
4) Build a working websites according to these specs.

And here’s the link to the final website.

Posted in Uncategorized | Leave a comment

Websites and Business Strategies Part 1 —(week 30)

After this week we are able to:

  • Explain what a business strategy is
  • Understand why business strategies are important
  • Realize that the business strategy affects the domain name and hosting solutions
  • Understand the importance of reaching the target audience
  • See the link between budgets and time management
  • Understand that the back-end can affect the budget
  • Come up with a web design strategy

 

The material included the Noroff lessons and after that we watched two LinkdIn videos.

The first one was giving advices and went thought the process of planning, thinking, designing and building a website. What needs to be taking into consideration without going too deep and details of the front or back end design.
Web Design Fundamentals by James Williamson (3h 38m)
The other one was more about building a business Strategy:
Online Marketing Foundations by Brad Batesole (4h 43m)

 

The learning activity for this week was:
Coming Up With a Strategy

Set up a meeting with a business owner and ask him/her what he/she would want from a website. Also ask him/her what the business strategy is and how the website would fit into it. Then write a detailed document about this.

I would like you to use the information from this document and create a website architecture.

Now let’s focus on the web design strategy. Your document should justify all the major decisions you make – from the domain registration, hosting, design and target audience through to what you decide in terms of programming.

Business strategy

I have been thinking awhile if I should register my own company after finishing these studies. I haven’t had too much time to think about it so in this activity I decided to take advantage of the  assignment and think it through while I also will be needing the website for it. This is also still very sketchy and experimenting different programs and styles of working at the same time.  

While our last name is Viinikanoja, it can be translated if you use the syllables right as a vine chicken. The name for the company could be Winechicken design. It’s memorable, awakes attention and has a relationship to our last name. The business strategy is to sell high quality, well thought graphic designs where the customer is heard and can be a part of the decision process.

The target group is small and mid size companies from different areas. 

The focus is also to offer packages including variety of different products. You could combine logo, website and brand manual or logo and motion designs. The packages are labeled and priced. That’s how the customers could pick what package suits for them and rest could be done by hourly cost. 

While the company is a start up, the cost for the marketing should be low and the website should be kept low cost as well.

How the website would fit into it?

The website should represent me as a designer. It should have the information about the packages the customer is able to choose and buy. It should also include pictures and stories about previous work to convince the customer that they will get what is promised and to show a bit what the style has been previously. The website should also include the contact page, introduction about me and other designers into future if and when I have employed ones. It could also have a link to a blog where our designer could post articles and keep the conversation active. Of course the website should have social media links to share the website and articles.      

The overlook should be clear, modern and easy to experience. The navigation should be obvious and well thought. The pictures should be similar in their mood and well organized and named thinking of SEO. The colors should be smooth, not too bright but still inspiring and appealing. 

Domain

The domain for the website would obviously be winechicken.com if it’s available. A quick search at least shows that it should be. The business is not pointed to one certain location or customers from certain area. Otherwise I could have thought to use .fi, .no or the country code. If not too expensive, I would also take the most popular domain names .org and .net just that no one else would use them and could drown my customers. 

Hosting

Myself I have been fairly satisfied one.com hosting service. We had our trouble in the beginning and had to contact them about my plan but ever since I haven’t clicked any coming newsletters and extra promotions, I have avoided extra charged as well. I don’t have experience from other hosting services, so I could check those still just to compare what the other ones have to offer and in what price.

As said in the hostgator.it side, there’s two types of websites — static or basic websites and dynamic websites. In this case, I would go with dynamic website while the previous cases and customer projects are updated quite frequently. I would use Content Management System (CMS) like WordPress to be able to execute this. 

In the Smashing Magazine 2, Sketching, Wireframing & Prototyping

Written by Janko Jovanovic, it’s commented that Skipping the wireframing process can have drastic consequences. By jumping straight into Photoshop and providing stakeholders with ready-to-implement mock-ups, you are making them focus on visual and aesthetic details instead of structure and functionality.”

Here’s the site plan for the website.

Front-page: Creative picture or picture of the products, intro what we do and what’s the company about.
Product-page: The example packages with text and pictures,
Case-page: Previous cases represented with pictures and text. Can be clicked and opened for further information.
Intro-page: What the company is about and introduction who I am.
Contact-page: Name, Address, phone number, email address and send a message form.
Header on the side: Company logo, navigation bar, social media logos.

Screen Shot 2020-01-12 at 9.45.50 PM

The Style guide

For the style guide I tried the the guide from the Styletil.es webpage. I liked the idea to collect the design elements first and then create the website from there. Most of the elements are then already think through and checked how they work together. This is a great way to test for example three different styles before rushing into the website design.

Style_Tile_Template_WineChicken

The wireframe

I made the wireframes with wireframe.cc that was mentioned in the videos we watched during the week. I wasn’t too impressed and wanted to switch to Photoshop quite few times. It was just too simple and hard to move the elements and to create them actually as well.

Here’s the front page wireframe in it’s simplicity. The visual image will take the most space and tell the story itself and the menu bar on the left side will have the links to the pages, social media logos and the company logo on the top.

Posted in Uncategorized | Leave a comment

MA 01 – Magazine Design

About the project
A foreign publishing house plans to publish a new magazine and has contacted you to do the project. They know what the magazine will be about and they can provide you with finished articles. They just do not have any visual idea or strategy for the magazine itself. Your job is to come up with a concise strategy and visual concept that forms the basis of the magazine as well as the layout.
  • Customer brief
    Our magazine consists of world issue content. It outlines the biggest problems of our time and offers possible solutions. It also outlines a way forward with in-depth research and analysis, tools for citizen participation and stories about real people working for a better world. Today’s world is not ideal – climate change, financial collapse, poverty and war leave many people feeling overwhelmed and hopeless. Our magazine hopes to empower people with the vision and the tools to create a healthy planet with vibrant communities.
We hope to do this by:
  • Reframing issues and having a vision for the future
  • Giving a voice to the people who are in the hope for change
  • Offering resources that people can use or pass on
Our plan is to reach 150 000+ readers every quarter. The magazine will be for sale in many bookstores, natural food stores and newsstands across the US and Canada. These locations include small independent shops and co-ops as well as larger chain stores.
Advertising: Most magazines make their money from advertising, but that’s where we are different. We don’t want advertisers to influence the content of our magazine, which means we are ad-free. We rely on tax deductible donations from our readers as well as foundation grants. Donations also fund our teachers, journalists, grassroots organisations, faith groups and policy makers. They will leverage the ideas in the magazine to inspire shifts at every level of society.

You need to produce the following

• Brief visual strategy and concept (You can create a style board to show this.)
• Name and logo
• A grid and layout for the entire magazine
• Front page / back page
• Table of contents / colophon
• Article pages (select 6 of 8 the articles in the attachment)
• Title, byline, introduction, subheadings, body text, captions, pagination
• Photography and illustration
• Physically dummy paper

Here’s my Magazine Design

I gave the magazine a name ReThink.

Here’s the link to the pdf of the ReThink Magazine.

Here’s the report.

This slideshow requires JavaScript.

 

Posted in Uncategorized | Leave a comment

Week 29 — Screen Based Design 2 – Module 1 Overview

Learning activity 1 – Creating a Brief

I want you to take on a client. I then need you to have a meeting with your client and create a very detailed brief. This brief should contain all the information that will be needed to achieve the client’s requirements.
Your brief should cover these sections:
  • What is the client’s service/product?
  • What are their requirements?
  • What is the website’s goal?
  • How are you going to achieve this goal?
  • Build the website architecture (so we can see what sections will be needed)
  • What is the design style that will be required?
  • What are your suggestions for marketing the site?
The brief should be good enough to hand over to any design/programming team and get a great result.

 

Creating the Brief

I chose to interview a friend of mine who’s making earrings and jewelry.

Company

▪ What products/services you have?
I sell hand made earrings and other jewelries

▪ How do you achieve your goals?
Make a lot sales.

▪ What are the keywords that represents your business?
Unique, Finnish design, hand made.

Website

▪ How’s your target group?
People, that like unique hand made statement jewelries

▪ Who are your competitors?
Cheap China look a like factory made..

▪ How do you differ from them?
I make myself every piece of them.

▪ What are your goals with the website?
To get name well- known jewelries artist.

▪ How are you going to achieve these goals?
Make jewelries.

▪ What are your other requirements for the website?
Easy to use and find what people are looking for. Beautiful design. Design that is in same line with jewelries.

▪ What experience should your customers be left with after visiting your website, what style do you want?
That it was easy to use and harmony.

▪ What content should your website have? You can also describe or draw website architecture so that I can see what sections will be needed:
Pictures, background of every design, prizes, my history, contact information, shipping.

▪ What colors would you like to see on the website, what definitely not?
Bright orange is big no. Harmony colors, that are not jump in a focal points in the website. Colors and background themes, that gives uplift to the subjects that I try to sell.

What are your suggestions for marketing this website?

 

Learning activity 2

Providing Your Own Hosting Service

This learning activity is to acquire your own hosting service. This hosting service will be needed throughout the rest of your studies, and this Learning Activity is therefore mandatory.
Posted in Uncategorized | Leave a comment

Week 28 (part 4) – Applying Philosophy to Design 2

Learning activity

The study of theory on a subject is important, but for a designer the study should not end with the analysis and discussion thereof. It only really becomes useful when we can use it successfully in our work and daily lives. What does the theory teach you and how can you apply this?
Refer back to your use and application of design fundamentals and watch the course:
Drawing Vector Graphics by Von Glitschka

In the previous lesson we touched on creating thumbnails, when watching this lesson’s video, pay careful attention to the section on preliminary or rough sketching out of ideas.
Design a book cover for a thriller book called “The Fall of Imagination” by Sam Wan. This book does not exist and is open to your interpretation as to the subject matter.
  • It must be designed by clearly drawing inspiration from a previous design style.
  • The size of the cover must be A5 and it should include a front, spine and back.
  • The cover must contain a simple vector illustration that forms the basis of the design.
  • The cover must contain the title and the name of the author.
Publish your design as a PDF document.
My version for the book cover
Although I felt that the time was running out again after watching all the videos and learning new little tricks about making posters and Illustrations, I made three different version for my book cover. In all of them the style arises from Swiss Style. The typography is sans serif Helvetica. The text is kept simple and can be read easily. The colors are from that era, bright clean red, blue, black and white. All of them has simple elements, the last one has a brain made in Illustration.

This slideshow requires JavaScript.

Posted in Uncategorized | Leave a comment