LA: Mobile Friendly Website

LA – Applying for Jobs

LA: building a website

I failed this assignment. I just couldn’t do it. I couldn’t come up with a good enough idea to motivate me to create a website. I spent days trying to come up with something to do and in lack of any better ideas I decided to create a website for a fictional bar. I made the wireframe and brief and then I just got stuck. Dreamweaver wasn’t working (not caching properly, needing a restart to show the changes) and eventually I just gave up. I’ll come back to this assignment after I’ve done the website for the Graphic Design History project.

Brief:

The client is a bar-owner that hosts events and has a venue that you can rent.

Their requirements are to have a website that showcase the bar, what is special with it (what type of special drinks and food you can get there) and showcase what you can rent.

The websites goal is to attract new customers and provide information about the bar. Where it is located, prices and who to contact if you want to rent it for an event.

This goal will be achieved by building a simple website that showcase the bar, the staff and the drinks and also show some photos from previous events. It’s also there to showcase what music you can play at the jukebox.

The bar is very rugged and looks like a “biker bar” so the style should be simple but with a letterpress type of design.

Here’s where I got before I ragequit the website. I think this was the 4th attempt. I just really wanted to get it over with so I tried several shortcuts and they all just made things worse.

http://bizziplace.com/yellowjacks/yellowjackinn.html

Learning activity: creating a brief

What is the product:

Online gaming experience and entertainment on a server as well as a software framework working between client based plugins and existing game and commerce software.

The client builds, manages and optimizes a FiveM server. This is a gaming client based on the game GTA V but with customized servers created through code wherein people roleplay (or RP for short) online. He’s also creating a framework that other servers can use that is better optimized than the current framework 70% of the servers are using. The framework build is somewhat separate from the server and its brand, but one of my marketing suggestions was to market the framework through the servers (pandemoniumrp) website. That way when developers are looking for the framework they will also get to the website and so build more traffic.

Requirements:

The website should be simple, functional and informative. It should shows examples of how to use the framework design. It should provide tutorials on how to use the product in the longterm.

It should also make it simple for new players to both learn about roleplay and how to access FiveM. I’ll explain more further on.

The goal of the website:

To grow the pandemoniumRP community and populate the server more by rebuilding the website and make space for the framework to gain traffic for both aspects.

How is this goal going to be achieved?

The current website is slightly difficult to navigate. By simplifying the website and putting relevant information on it.

Installing FiveM can be quite difficult and most of the biggest FiveM servers have quite complex websites to scare off a certain type of people. Keywords for PandemoniumRP are “easy, simple, functionality, minimal, modern” and dark, but that’s more focused on design. One way to simplify the FiveM experience is to gather everything you need to install it in one page. This will also help gain traffic to the server as when people are searching for “how to install FiveM”, instead of reading 3 different reddit posts of guides they can find it all on PandemoinumRPs website. That way it may also gain more in-game users as of how simple they make it to access. These are also some of my marketing ideas.

Design style:

Will follow the keywords.

Marketing suggestions:

As mentioned above, my suggestions were based on the experience I have in both streaming FiveM for years and doing my own research. The most commonly asked question is “how do I install FiveM” and as mentioned you need to look on a lot of different places to find. I’ve also tried to navigate a lot of FiveM servers websites which have been very difficult. I asked the client “what do you want your brand to be associated with? What is the first experience you want people to have when they meet with PandemoniumRP” he answered “easy”. That’s when I thought of all the things I have struggled with and reasons I have left certain servers. I suggested tutorials for how to do things in game and also adding a FAQ on the website as a footer or sidebar. Having this information on the website will also give admins less work in answering questions and more time to make the in-game experience better. Another idea I had was to add highlights, read more in the architecture.

Website architecture:

Home – will have information on how to install FiveM, Rules, a link to Discord and how to access the server. This information will be displayed with images and child pages to help with searchability and use keywords. If the budget allows it the website will also have a Highlight video monthly from the best moments of the streamers on the server. That way you can bring in clients from other platforms like YouTube and Twitter.

Menus and sub-pages will be in the lines of: Extended mode Framework (to showcase the software framework), RP tips and tricks (for those needing help and inspiration with their roleplay character and how to add depth to it), Highlights (where the monthly highlights will be stored so you can watch the old ones when they’re removed from the homepage), Tutorials (similar to FAQ but more in depth on commands you can use and features new players may need to know).

Analysing the Use of Design Fundamentals

Sadly I couldn’t find the illustration in a larger size as the provided links did not work. I really wish I could look at this large cause it’s such an amazing piece. I love how the depth and 3D aspects have been implemented in this. The way the desk melts into the background, the lining to illustrate the floorboards. The only thing I’m struggling to see in this image is what I think is supposed to be a window, and the black wall almost looks like a starry sky aswell. Because of the low res photo though I can’t really explore it.

I don’t really know what style this would fit into, other than cartoon. First thing I thought of when I saw this was “Pettson & Findus” which I don’t know the English name for.

I guess it’s the cat and the “homey” house that reminds me of this old cartoon.

I don’t really understand the 3rd question. I have re-read the quote over and over but I can’t connect to the question.

If I would recreate this image I would do something about the window. I feel it would look more interesting without it. IF it is in fact a starry sky behind it would be cool to not have the window there.

My favorite color combination is pink, purple, blue, green and turqoise with main colors pink and turqoise. If I would recreate this I would definitely use those colors instead. What I would change linewise would be to move the counter that’s under the window out. It looks a little odd when it looks like it’s a part of “space”, even though looking at how the desk is melting out from the wall I think that’s intended to create an assymetric feeling.

Woith the composition I would like to portray a homey feeling. Like, life after you’ve gotten your pension. Everything is chill and the outside is vast as space. You can do anything.

Applying Philosophy to Design 1

Analyse Frank Shepard Fairey’s poster

What is your opinion on the use of style and its efficacy. Also critique the use of pastiche and typography. 

The style brings me back to the posters that emerged after WW2.

It especially reminds me of the Che Guevara poster (left). The way the gaze look and the contrasting colors.

“his stylized visage has become an ubiquitous countercultural symbol of rebellion and global insignia in popular culture.”

Wikipedia

If we put the posters next to eachother the similarities become even easier to see.

The campaign for Obama could definately be seen as “countercultural” as he would be the first african american president and much as Che Guevara spread hope in the liberation of Latin America, Obama served as a symbol of change and Hope for those who have not always had representation.

I love the colors. They fit very well together and I love how the poster is “split in two”. I like the simple sans-serif font but I don’t like the “pin” above the E. Since it has the same style as the Type, it looks like it’s a part of the E. I would either have integrated it in the O or removed it completely. I don’t feel it serves a purpose and it distracts from the whole poster. It almost looks as the poster was originally made to end underneath it, and then someone wanted to add HOPE as a last minute detail and the poster was extended. Without the little extra O that feeling wouldn’t be there for me anymore.

Research on Late Modernism: Swiss Style

Discuss the charachteristics, typefaces and the philosphy behind.

The Swiss Style follow the principles of clean, readability and objectivity. It’s also said that the grid was born here. Not the grid in itself but the way it’s now used in design.

“Typography begins with a mathematical structure”. Why not follow the same harmonious “easy-to-read” structure for design? These ideas shaped the Swiss Style, and it was dominated by grids, assymetric layouts and the sans serif type fontface. Photography was also more prominent than illustrations.

One of (or more like: the one) the most prominent typefaces from the Swiss Style is “Akzidenz-Grotesk”, or as it was often called and sold as “Standard” or “Basic Commercial”. It’s these kinds of sans-serif fonts that started the movement.

The teachers of Swiss Style argued that “design should focus on content, not decorative extras. These are some of the fundamentals that define the movement. It’s meant to let information heavy design to be “read and studied” rather than admired and seen.

Another of the most influential fonts from the Swiss Style, and probably the one people know the best is Helvetica. It was created in 1957 by Max Mieldinger and Eduard Hoffman. I doubt that the designers could imagine that their font would inspire creators to this day. One example is the main character “Helvetica” in the book “All the invisible things”.

You can’t talk about Swiss Style typefaces without mentioning “Univers”. It was the first font-family, allowing for several variations of a font without changing the type. It was created by Adrian Frutiger, one of the most influential typeface designers of the 20th century.

As you can see on these images, a lot of Swiss Style plays with the font opacity, color and placement to create a simple yet interesting design. The message is clear as was discussed earlier. You can also see the grid and geometrical design.

Influencers and designers.

Ernst Keller, or as he’s also known “The Father of Swiss Design” worked as a teacher at “Kunstgewerbeschule” in Switzerland. It was his teachings of wanting design to be focused on content and love for grids that influenced the Swiss Style.

Armin Hoffman was a co-founder of “Schule für Gestaltung” (Basel School of Design) which was established in 1947. He was a student of Ernst Keller and just like his teacher he preffered typography over illustrations. His work was focused around graphic form, but like all other Swiss Style designers it was still simple and objective.

Josef Müller-Brockman was another one of Keller’s students. His work was heavily focused around grids and the “Standard” typeface. He took over Keller’s teaching position at Kunstgewerbeschule and his teachings helped spread the Swiss Style across the world. He managed to do so by establishing the “Neue Grafik” (New Graphic Design) journal. It was a magazine he co-edited with three others.

When I look at the designs these people created you can see the similar way of using typography. Words go over eachother but the use of opacity is what set the designers apart. The colors are often in monochrome aided by a strong constrasting color (which often seems to be red).

You can also really see KEller’s design language within his students (and those influenced by him) pieces. His art look like the modern days sketch, which the students present as the final expression.

Swiss Style Schools

The two schools “Zurich School of Arts and Krafts” and the Basel School of Design were run by Keller’s former students Josef Müller-Brockman and Armin Hoffman. The two schools similarities could be seen through the inspiration from their shared teacher.

Both schools helped to contribute with the use of grids, photography combined with typography and the use of assymetric layouts.

My personal thoughts on this after having looked at Müller-Brockman’s style and Hoffman’s is that the former, and the Zurich school of Arts and Krafts mainly contributed with grids and the latter and his school contributed more with photography. Of course all of this was combined with typograpghy and the sans-serif font and they both expressed themselves with grids and photography, but I think this is how the different schools mainly contributed to the Swiss Style.

The Relationship between Image and Text

What Marian Bantjes statement “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.” has in common with the Swiss Style is that of Ernst Keller’s words “Design should focus on the content, not decorative extras”. While this was clearly visible in the Swiss Style, it’s not as visible at first glance in Marian Bantjes work. Hers is that of creativity and art and one could argue “decorative extras” but really if you actually look at it, the “decorative extras” are the content that need be portrayed.

Looking at these two pieces they are very different, but at the same time they’re not. It’s clear that the left (Bantjes) is not as simplistic as the right (Müller-Brockman) but you can still see the grid in both of them and the way the information is portrayed is very similar.

Here’s another piece from Marian Bantjes and the style is very far from Swiss Style, however I still feel that the ideology is there. The words, i.e the content, is the art. The “decorative extras” are a part of the words and make out the whole piece. In that sense I feel that she did her own adaptation to the Swiss Style teachings and made it her own, just as the students of Ernst Keller adapted his pieces and made them their own.

These pieces are very different from moth of Marian Bantjes work, but as stated before, the way she makes the message and content the art is what they have in common.

The use of Computer Combined with Different Media

For school we were assigned to watch a video about Marian Bantjes and her work as an artist and graphic deisgner. There were many things about this video that I connected with. The thing that stuck to me most was that she wanted to create her own style and not create for someone else. Now people come to her because of her style and they expect her to “do her own thing”.

That’s what I want out of creating. I want to be able to develop my own unique brand that people can recognize. I come from a very creative family, and my brother has managed to do a lot of the things that Marjan talked about. He started out as a musician when he was in highschool and got noticed for his unique production skills. As he grew up his music developed and the sound became different from where he started out, but even if you listen to his first music, the ones he made at school, can you hear his distinct sound. His music changed how Swedish hip hop developed and albeit he’s not well-known to the common person, he’s very well known in the music industry and has a very nieche audience. He’s stopped creating music but keeps selling collectors items like vinyls and even casettes.

Listening to Marian Bantjes and how people talk about reminded me of my family and how they have inspired me. My father creates designs by hand that looks computer generated. He combines math and creativity to create geometrical art inspired by MC Escher.

My father doesn’t create digitally at all, he creates everything with his hands. Because of a birth deficiency he doesn’t have full range of motions with one of his arms, which is even more inspiring. My father only paints for himself. It’s his form of meditation and it keeps him grounded. I think that if he combined his art with a computer he could make even more interesting designs and he could also better share his work and reach a larger audience. I think it’s important that we use several mediums and not only one so that we can grow as artists.

Another thing I found interesting about what Marjan spoke of was how if she doesn’t sketch she can’t create as well as if she skips the sketching progress. This is where I think Graphic Design will change in the future. The people growing up now have different mindsets that the pioneers of Graphic Design. The attention spans are shorter and it’s easier to access information. I have a drawing tablet and I prefer to sketch directly into my computer. I’m still using my hands but it’s just something I’m getting used to. In my two years of studies I haven’t seen anything that indicates this way of sketching is ok. I think that the important thing to teach is that we need to properly prepare and plan our work, but the way we reach the final product is different for different people.

In many ways do I feel that the “old” mindset of -doing things manually first- suffocates creativity for a new generation who are used to different things. A lot of young artists draw on their tablets and phones with their fingers. It should be made clear that sketching with your finger on an IPAD is as good as sketching with a pen. There are also some pieces of art that are doodles. Some people doodle directly into a computer program and I think that we need to make more space for a generation that is more digital.

Marjan Bantjes wouldn’t have realised what she enjoyed to do if she wasn’t let to do it her way. Her way was manual and by mixing elements. We need to let a younger generation find out how They like to create by not forcing them into old ways. For some people creating straight into a program will be as fulfilling as carving into wood is for Bantjes.