Building a Website From Start to Finish

  • Write a detailed brief for your website
  • Create a wireframe according to the brief
  • Draw some sketches to plan your design
  • 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, wire frame, 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.


In this Learning Activity I will make yet an other fusion, this time I will incorporate my final Portfolio and take you though the process. We will be coding from scratch!

My brief

  • Home page, my works, individual pages for each project, extra page for showcasing smaller projects, about me page and a contact form.
  • Looks should be minimal but have a sense of personality, that will compliment the main attractions.
  • Easy to navigate through, both on mobile and pc.
  • Have small hover animated details.

When learning and working with code I highly recommend using Firefox as your browser! It is super helpful especially w(en you use the Fn12 function, there you can read the entire code and inspect each element. I learn so much more when I study good websites and learn their structure, many elements and cool effects tends to go missing if you try coming up with everything on your own. Borrow some elements you find cool and look at their structure, you can also edit the CSS live and much faster than dreamweaver ever will. I looked at several portfolios and took elements I liked and edited further to fit my look.

My websiteannelisestolt.no/Portfolio/

Applying for Jobs

Publish a résumé and covering email as if you were applying to work at a real company.Ideally you would also provide a portfolio website, but this will be completed over the next couple of weeks, so don’t worry about that now.


In these two years of graphic design, we learn quite a lot on marketing, this has reinvented how I plan to strategise when applying for a job in the future. I look back on previous resumes and my strategy for standing out could only be detected in the writing it self, but if you only look a the paper it self, it’s just a paper and boring text really. My dream resume and covering email would be something of the resemblance of an info graphic , that would be so cool and eye catching! During the last time I searched for a lot of job I found myself in this wormhole of overthinking the whole “how to catch the reader” and how this is an impossible task because “they don’t know me in person, I don’t want them to judge me by my looks but by my competence at doing and learning”. I can only describe this as a paradox, and when I sat in it, it truly was discouraging and seamed like a hopeless situation.

However, now I have more tricks up my sleeve and think I would be able to think more creatively around this applying business.


The application list

  • How you cam about the job and why it interest you.
  • Your immediate strengths that would benefit them and make the situation easier for them.
  • Give examples, scenarios or point out skills that isn’t the usual “hardworking, organised or creative” – tell them how.
  • Pull forth relevant work experience and skill set.
  • When you’ll be available and how they can the a hand of you.
  • Keep it short and precise, they go through loads of papers, make yours worth the time.
  • Find ways to stand out, make the info easy to get around.

An application for a job in design business.

Hello hello,

I saw your post on IG looking for new members for the team and I would love to join you!

I just recently finished two years of Noroff’s course on Graphic Design, I did full time online study and worked as cook at IKEA part time on the side. I have worked a total of 5 years in the resultant/cafe business and have always had a passion for design and a love for crafting, and I want to make a shift in my carrier.

I have great experience from my past jobs in customers communication and the task to find or customise their orders to fit their needs, this is definitely something I value very highly and always work on. I’ve had great feedback from teachers on my research and is a subject I find interesting.

In my current toolbox my strongest skills are illustration, animation and logo making, I also enjoy web design and branding very much. I strongly believe in having more feet to stand on and love learning new skills to improve my self.

I consider my self a great team player, but also can take responsibility and work independently just as well. My legacy in previous workplaces in that I’m very flexible and can show up on short notice, and I still value that, but I would also greatly appreciate having a home office to some extend as I work very efficiently this way as well.

I hope I’ve given some insight on myself and I certainly hope to have awaken some curiosity. I would love to meet up and talk further about how we could be a even better team. You can reach me at somename@mail.com or at +478284774, can wait to meet up!


This is somewhat how I would express myself, and ideally adding some graphic elements and stylised it to have even more personality.

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)

In this learning activity I will cooperate my on going semester exam. During the planning I had not decided what would be best if I was making a site for a client. Here are some of my thoughts and how I decided based on my assumptions:

Website from scratch

Pros

  • Coding from scratch shows knowledge.
  • Seems more impressive.
  • More creative freedom

Cons

  • How easy is it for the client to use when they what to add content?
  • The coding makes my head explode when I am under pressure, as of November 2020.
  • It doesn’t seem practical or easy to use for the majority of clients.

Website build in WordPress

Pros

  • Easy for the client to fill with content after development.
  • Building is easier.
  • Powerfull tool, it is widely used.
  • Loads of help online.
  • Start from scratch or work more efficiently and customize a existing theme.

Cons

  • So claim WordPress is outdated.
  • Update plug-ins, needs to be look after.
  • My assumption that the making is less impressive.

My conclusion: We’ll do WordPress!

I still consider this a challenge since I haven’ t really done any complete WordPress sites yet. Because of my negative views on building with WordPress versus building from scratch.


Client description

My client is the Knit-Knacks, it is a student organisation, their focus is to connect students through the interest in knitting. Knit-Knacks’ core is to be an alternative for students to meet other students and connect, an alternative to doing out for drinks. They want a site where members and those who are curious about them, can feel welcomed and can easily navigate around. The site should be inspiring and relaxing.

Applying Philosophy to Design 2

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 GlitschkaIn 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.

I did this wage Swiss inspired book cover quickly in Procreate. I made it minimal and some what abstract to leave the rest up to the audience to fill in.

Coming Up With a Strategy (6 hours)

  • 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.

The business – a marketplace for crafters to sell/resell materials they no longer need or have the use for. The website is their main platform as a start, if there is a high demand in the future they may be launching stores or some place where people could drop off and get a small percentage for it.

The main mission is to make the transaction as easy as possible. A downside to many existing sites is the transaction between the buyer and seller, from the proposals to money transaction. The main compounds of this website is a well organized and specific categorized search bar and a seamless transaction that is similar to a regular online shop.

Web Site Strategy

The web site should be hosted by a provider that can handle traffic and a lot of content being put up. The design should be simple, intuitive and easy to use and make you want to use it. It should be easy to publish a and it should be easy to buy.

Analysing the Use of Design Fundamentals

Choose any one of the illustrations from the lesson «Design Drawing» and answer the following questions (when submitting your feedback – also provide the illustration you chose):

  • What fundamentals are used successfully? Describe in detail what you think is the most successful aspect of the illustration (remember to focus on the fundamentals).
  • What style from the past is being used in a new way in this illustration? If no previous style is clearly apparent, does it use some form of pastiche? Why do you think this specific style or pastiche was used? Describe in detail whether you think it was used successfully or not.
  • Read again what Mondrian said about the expression of beauty or self. Which do you think played the dominant role in the execution of this illustration? Explain your thoughts.
  • If you had to create this illustration, before starting the actual execution, what would your initial thoughts be on:
  • Colour (what would your approach to colour be?)
  • Line (what would you like to portray with the use of line?)
  • Composition (what would you wish to instil in the viewer by the use of composition alone?)

For some reason the links and illustrations provided in the lesson was out of service and outdated, so I chose this illustration from one of my favourite illustrators, Burnt Toast!

This illustration is a social commentary on todays reality living along side with social media and how we tend to prevent ourselves online versus how we may actually feel. The style of social commentary has been around ever since we have had the ability and resources to draw. The aesthetic style it selves I don’t feel is directly drawn from a previous era, but if I was to pick one I would draw lines from street art or even early animation cartoons. I really like the jolly and colourful style of Burnt Toast in contrast with the sometimes twisted or different topics presented.

If I was to make it I would honestly love to just have the existing style because I think it’s so cool, but that wouldn’t be much to write about. So I would put the person in darker more melancholy colors and keep the mask bright. I think it would add a nice touch to add some texture, as for line work I would overall have a more textured line, basically just add to the emotional side of it all.

Focusing on Pioneering Desingers

Within the broader milieu of Neo-modernism, we focus on Marian Bantjes, who set design trends with her unique application of typography, loose illustration and well-balanced compositions.

  • Objective observation
    During the interview, Marian mentions, «When I worked at Digitopolis, I was working almost entirely on the computer, basically the computer and with photography. And now I am using a wide variety of materials, sometimes still involved with a computer and sometimes just with the materials themselves. But having a space like this allows me to obviously store them all, and to work on these various surfaces in different media.»
    What is your opinion on the use of the computer combined with different media? Write one page (350 words) on your opinion of the importance of media and design and what your take is on the use of computer technology.

I think which media or medias you choose to work with its obviously personal, depend on efficiency, work related and a part of your creative journey. Mixed media gives unique effects and opportunities, that may be impossible, time consuming or very difficult to achieve. The type of media has said a lot about the time a design has been made historically. Now there are so many ways of media and it truly a great time to do design, and the fact that we can store our designs digitally and blend them if we want is truly magical. I rarely used digital media when I was young until I had a assignment in arts and craft in 9th or 10th grade in the early 2010’s. Before that I used Paint, but I didn’t bother putting much time in that. I got pleasantly good at photo manipulation with Gimp, but that was it. I think digital media it’s incredibly handy as a designer on the go, it is so convenient. A thought is that digital will never give the same literal feel as manual media, but the technology is developing so fast and right now it look great. Economical and resource wise when using computer technology the pressure is much lower compared to let’s say doing a oil painting. In some way it can encourage you to experiment more and take more risk, because if the risk didn’t work you can remove it. As for myself, I love to experiment with different medias. And depending on what you are used to it is so rewarding to create both in digital and traditional media.

Leonardo Da Vinci, Mona Lisa. True version
One of my favorite (believed) mixed media art, even if it is not mixed, it is a great piece! By Fat Cat Art
  • Pushing technology and changing philosophy 
    While describing her development of style, Marian states, “I am not an expert on illuminated manuscripts by any stretch of the imagination, but there are a couple of purposes of it. But one of those purposes is definitely to invoke wonder in this way that was very interesting to me and was feeding directly into my ideas about that symbiotic relationship between graphics and text.»
    How do you think this links to the philosophy of the Swiss International School? How is it different? Has technology given us an advantage in expressing the symbiotic relationship between image and text? What about Marian’s work? Is this reflected in her work? Do a write-up (350 words) on the relationship between image and text, as seen in Marian’s work and relate this back to the Swiss International School. Substantiate your answers with relevant facts. You may use a visual example of both Marian’s work and that of the Swiss International School to facilitate your analysis.

First off, lets establish the Swiss Design principles «Communication through objective simplicity was a guiding principle of Swiss Design. The goal was clarity, order, and a universally understood visual language. Swiss designs were clean and free from ornamentation. They attempted to remove all that was unnecessary and emphasize only the necessary. It’s a style of design that favors minimalism.» – read the rest here.

I think the Swiss Design philosophy directs towards being informative and free from ornamentation or text first, text and image in Marian’s case I think is set as equals or text second. Text can be used to direct an artwork in a literally way, and guide the viewer’s perception of the artwork’s meaning. I see it as somewhat writing the title on the actual canvas.

I don’t think technology has given us any advantages in expressing in both text and image other than making it easier. I think this is really relevant in this day and age of social media and memes, for good and bad reasons. And maybe its more important than ever, as it is so easy to take a picture to two completely different directions just with text.

Back to Marian’s work, lets take this heart as an example. It’s a heart and within the doodles are text of words related to love. The biggest and immediate difference to Swiss Design for me would be the legibility, each word is not super obvious and it needs to be be studied to find the words. While something true to the Swiss Design you would see the words and message right away. With this particular heart you can get the feel right away but you will have to look for the details.

bantjes_2008_saks-heart

Designing for Performance

Surf the web and find 5 examples of websites that have been coded and designed for performance. 

My interesting finds

Nelu Cebotari’s portfolio – he’s a graphic designer who specializes in UI/UX design. This site is vibrant, short but concentrated. A great example of a portfolio.

HeCo Design Agency – A mesmerizing site! Great on both laptop and mobile. It is so interesting to see how design agencies and designers show them selves online.

Longshot Features – Super unique and intersting way of showing one’s work.

Monokai – Truly gorgeous trip site where they take you through Japan.

Gnoosic – The site that helps you find new music and artists, such an cool concept!

Creating a Brief – Learning Activity

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.

The Brief

I’ll be doing a brief based on my expectations for a website I recently subscribed to. I think it newly launched, it seems like they’re still figuring out things and I applaud them for what they have done so far.

The client is a online archive of old knit patterns of Norwegian design and lofted designs in particular. In the introduction they promise a great search system, making it easy to find the designs you’re looking for. They offer a one year member fee for full access to the site and unlimited downloads, they also offer tutorial videos and courses so you can knit effortlessly. It main goal is to preserve the kofte tradition and make them available for everyone who’s interested.

Intentional easy layout, target group can vary as there are knitters in all age groups, but their technological skill may vary. Clear buttons for direction, favourite/saving system. Option to download and the pattern written at the site, a written pattern could be read by the computer and would allow people with reduced eyesight to follow along with the pattern. More pictures with each pattern would also be great, and a submit option to share your version of the kofte. A great search engine and filters to narrow down the results. The style will be clean, not too minimal but not overflown with distractions. The background and text will contrast like black and white, but a little softer. And a few muted colours for buttons that needs to stand out.

The websites goal is to preserve and make sure the kofte tradition live on, and to give people access to the many patterns that otherwise would lay around and not be used or found. We’ll achieve this through good design and targeted marketing. A common ground for most knitters with internet connection it that they most likely to share their complete work. I would place my bets on marketing through IG and Facebook as most of the target group are well established there, there are a lot of Facebook interest groups that would spread this like wildfire. There is also an option to market in yarn shops, museums and magazines if they really want to get into every corner of the target group.

Website architecture

Research on Late Modernism

Consider what we have discussed regarding Late Modernism in the USA and The Swiss International Style. Do additional research on the Swiss International Style – it may be a good idea to study some of the known designers of this style and period. As a guide, visit designishistory.com, which gives a brief outline of specific designers and styles – take note that here the Swiss International Style is listed under 1940, which is not incorrect as the style was developed in the late 40s, but flourished in the 50s. Also use additional reference sources of your own and do a write-up of the following:

  • Research on the Swiss International Style
    After you have done research on the style, give a description of your own. How would you define the style? Do a write-up of about 350 words and discuss the characteristics of the style, the typefaces that were prominent and the philosophy behind it.
  • Influences on Swiss International Style
    Do a write-up of about 350 words on what you think the main influences were on the Swiss International Style. In other words, what motivated designers to create and follow this style? It may be useful to study specific designers, such as Josef Müller-Brockmann and Armin Hofmann, pay attention to what they themselves (or other designers amongst their peers) have said about the philosophy of the style.
  • Analysis of the Swiss International Style
    Read up on the different schools within the Swiss International Style: The Zurich School of Arts and Krafts and The Basel School of Design and do a write-up of the similarities between them and the differences in their approaches. This write-up should be your own conclusions, based on examples of work and stated facts and should be approximately 350 words long.

A summary: Swiss international style

The Swiss international style began its development in the 1940’s during World War II in Switzerland. Switzerland’s neutrality during the war gave them an opportunity to keep developing and innovate, while other countries were invaded, being sparse with their resources or having a collective other state of mind than the usual. Swiss International Style drew great influence from Russian Constructivism, Futurism and the Bauhaus, and made them even more modern and timeless. These styles are minimalistic and “clean”, they use geometric shapes, photography, mathematical grids and usually fewer colours in one composition. It’s crisp, blocky and minimalistic, it’s modern.

Core rule of Swiss International Style is «content first» in contrast to previous styles and movements against the industrialisation of design and art, such as Arts and Craft, Art Nouvou and Art Deco. Swiss International Style is sort of a celebration of mass production, industrial and anonymity. Styles against the industrial revolution put the artists’ subjectivity first, while the modern Swiss Style put content first.

Maybe the greatest breakthrough from Swiss international style has to be the Helvetica font, designed in 1957 and means “Swiss” in Latin. The font hit the market in 1960 and is one of the most versatile and used fonts around the globe. 

Two schools holds as the front runners for Swiss International Style, the kunstgewerbeschule in Zurich and the Allgemeine Gewerbeschule in Basel. Ernst Keller became a professor in Zurich and developed a graphic design course with the focus on teaching the philosophy of the style that dictated «the solution to the design problem should emerge from its content”. While in Basel they taught graphic design technique based on grid-work that began in the 19th century became inspiration for modifying the foundational course of their way of teaching the Swiss International Style.