Design in the Digital Environment

Well here it is, this is one of my first official projects of my second year.. Design in the Environment. The digital environment has created new challenges and the growth and expansion of the internet, world-wide web and multimedia applications now provides fresh and exciting opportunities for creative visual design communication.

Regardless of the eventual outlet or application, whether it be design for traditional print-based media or for screen-based digital media, contemporary designers need to develop a sound working knowledge, essential skills and understanding of the use and application of digital technologies and tools in the development and production of their design work.

I will require considerable exposure to this environment, so that the technology is understood, opportunities identified and the creative potential and possibilities emerge.

Essentially, the use and application of the digital environment underpins most aspects a design career. It is vital that I develop understanding and competence with industry-standard technologies, programs and peripherals used by contemporary designers in the workplace. This module provides an opportunity to not only gain increased proficiency in terms of work production and development but also to explore in more depth the creative opportunities and possibilities that the digital environment presents.

This module will allow me to gain experience, and the necessary knowledge, understanding and skills in producing creative design solutions with an objective, problem-solving approach and methodology.

In the first year of the course you developed knowledge and skills in the use of print-related software. I will now build on this but focus, in depth, specifically on screen-based, web production tools in order to design & produce a personal interactive web portfolio to be used in your personal promotion.

Research:

How we engage with the web:

What are the different uses/types of websites?

Basic Website Types
1. Personal Websites
2. Photo Sharing Websites
3. Writers / Authors Websites
4. Community Building Websites
5. Mobile Device Websites
6. Blogs
7. Informational Websites
8. Online Business Brochure/Catalog
9. Directory Websites
10. E-commerce Websites

What are the benefits of having a website?

Gain Credibility…

Today, more and more consumers use the internet to search for the products or services they need. Businesses will gain credibility by having a website. Without one, potential customers will go to different business competitors that do. If you already have a website but it is ‘home-made’, having it professionally redesigned will provide your business with a professional image which will inspire even greater confidence.

Expanding Opportunity…

Websites in general are great ways to in providing a place that potential investors can be referred too. It shows what your company is about, what it has achieved and what it can achieve in future.

Saves Money…

Your business will save money in a number of ways from spending less on printing costs (letters, catalogues etc.), to wages, as a website may mean you no longer need that extra pair of hands, due to automated processes. it is a very cost effective way to promote your business.

Saves Time…

Providing information to your customers takes time, whether it’s on the phone, in person, in a brochure, or in emails. With an online catalogue you can provide lots of information about your products and services. Once your website is up and running, it is available to your customers indefinitely, saving you time. And what is time? Time is money.

Always Accessible…

A website is available to both your regular and potential customers 24/7/365 providing them with the convenience of reviewing your products and services when your store or office is closed. With today’s busy lifestyles, this is a great selling point when making a purchase decision.

Fresh…

Smart business owners create a blog page for their company. Having a blog to post fresh content will keep your website attractive and fresh.

Market Expansion…

The Internet has allowed businesses to break through the geographical barriers and become accessible, virtually, from any country in the world by a potential customer that has Internet access.

Dynamic…

A website is a dynamic, easily updateable resource through which you present information to your visitors. Unlike other forms of marketing that are either static, or difficult and expensive to change, a website is easily updated.

Security…

Security of your website is must because there are many pernicious attacks which can make your site disable from your targeted visitors and a reliable and secure web hosting provider can help you to run successful online.

What is SEO and why is it important to businesses?

A SEO or search engine optimisation, is a set of rules that can be followed by website owners to optimise their websites for search engines and thus improve their search engine rankings. It is also a great way to increase the quality of their web sites by making them user-friendly, faster and easier to navigate.

There are two types of SEO. SEO is divided in to two main groups:

On Page SEO – On-page optimisation refers to factors that have an effect on your Web site or Web page listing in natural search results. These factors are controlled by you or by coding on your page. https://justaddcontent.com/search-engine-optimization-seo-small-business-websites/

Off Page SEO – In search engine optimisation, off-page optimization refers to factors that have an effect on your Web site or Web page listing in natural search results. These factors are off-site in that they are not controlled by you or the coding on your page. https://justaddcontent.com/search-engine-optimization-seo-small-business-websites/

Why is a SEO important…

SEO is not only about search engines but good SEO practices improve the user experience and usability of a web site.
User’s trust search engines and having a presence in the top positions for the keywords the user is searching increases the web site’s trust.
Good SEO practices can help to generate more brand loyalty, and bring more traffic to your website each month due to content engagement alone.
As the search engines are growing, it is more likely that SEO will never lose its importance.
It is scalable and cost effective; with small input it can give high returns for your business
75% of people do not scroll beyond page one.
What makes an effective/ineffective website?

What makes a website effective?…

Colours…

A prudent colour palette can go a long way to intensify the user experience. Reciprical colours create balance and conformity. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly. Finally, negative space is very effective at giving your website a modern and breezy look.

Typefaces…

In general, Sans Serif fonts such as Futura, Arial, and Helvetica are easier to read online . The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design up to date.

Images…

A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. If you don’t have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.

Tell visitors what they need to know…

Don’t waffle. Just put the facts in front of me. If you are trustworthy and offer your products or services in a clear and understandable manner then visitors are quite likely to convert. Don’t make visitors have to click on things to find out more.
All your visitors want to do is read the facts, look at the images or buy the products.

Search engine friendly…

Everybody uses Google to find what they are looking for and chances are that the majority of visitors coming to your website will do so through search engines. In order to rank correctly in search engines, a number of techniques should be integrated to the development of your website.

Social Media Integration…

Your website should be integrated with the common social media networks in order to allow users to share your content on other common networks like Facebook, and Twitter etc.

Device Friendly…

Users are no longer using desktop computers as the primary way to browse the Internet. We are now building all new websites that will distribute on multiple devices, desktop computer, tablets (IPad, Galaxy Tab, etc.) and on smart phones. If your website is not device friendly, you can either rebuild it in a responsive layout (this means your website will adjust to different screen widths) or you can build a dedicated mobile site (a separate website optimised specifically for mobile users).

What make a website ineffective?…

Poor Navigation…

Simple and easy navigation can be said to be one of the most essential features of an effective web design. No viewer would be willing to spend more time than necessary on figuring out complex navigation structure. Intricate navigation translates into nothing but website failure.

Unnecessary usage of Image…

Quality over quantity, that is the key to web design, especially when it comes to image usage. Pictures intensify the appeal of the website, however it is the quality of the picture that accomplishes this objective not the quantity. Excessive or unnecessary use of images simply clutters the website and drives away visitors.

Don’t have 5 different fonts in 10 different sizes…

Picture this: Page titles are in Garamond, content for those pages are in Arial, navigation links are in Veranda and the sidebar is in impact. How ugly does that look?

Disproportionate colour usage…

The purpose of adding color to the website is to make the website appealing and inviting, in most cases, the minimal the better. However, there is a very thin line between the colours endorsing the web design and the colours completely overshadowing the content of the website. The excessive use or unfitting color usage is one of the most common mistakes made by web designers.

What are the ways by which we access the web today?

Users access the web using a web browser such as Mozilla Firefox, Microsoft Internet Explorer, Safari, and Google Chrome etc. Other Internet-connected devices, like desktop computers, laptops, mobile phones, iPads, etc can also have web browser software. Any device that is connected to the Internet can be used to browse the web.

What are the strengths and limitations of modern web devices?

Mobile phones come with strengths, but also limitations. These strengths and limitations play out in good mobile user experiences.

Small Screen

In spite of the modern trend towards larger screen phones, what makes mobile phones so convenient and portable is their small size. Compared with desktop and even laptop screens, phone screens accommodate a lot less content. As a result, screen size is a serious limitation for mobile devices. The content displayed above the fold on a 30 inch monitor requires 5 screenfuls on a small 4 inch screen.

Portable = Interruptible

Mobile phones are portable:  Most fit easily in a pocket or wallet and they tend to follow us everywhere. Because we use phones in a variety of contexts and situations, we are more likely to be interrupted when using such devices, an external event in the outside environment may demand our attention and require us to stop whatever we were doing on the small screen. As a result, attention on mobile is often fragmented and sessions on mobile devices are short. In fact, the average mobile session duration is 72 seconds. In comparison, our own studies show that on desktop, the average session is 150 seconds: more than twice as large.

Touchscreen

Touchscreens come with many blessings and sins. Gestures represent a hidden, alternate user interface , that, when built with the right affordances, can make the interaction fluid and efficient and can save screen real estate. But they also suffer from low memorability and discoverability. On the other hand, it’s hard to type proficiently on a tiny virtual keyboard and it’s easy to accidentally touch the wrong target.

Perhaps the biggest problem is related to typing: on a soft keyboard, users need to continuously divide attention between the content that they are typing and the keypad area. Touch typing is impossible in the absence of haptic feedback, plus, keypads themselves are small and keys are crowded.

Variable Connectivity

Even in the era of fast cellular networks and ubiquitous Wi-Fi, coverage is not universal or equally good. Phone users frequently complain about connectivity problems. Every new page load translates into a significant waiting time when the network does not cooperate. If you want users to finish their tasks on your mobile site or in your app, mind the waiting time. Design pages that are light, yet contain as much information as possible, to avoid many back and forth trips from client to server. Minimize the number of steps and, ultimately, the number of page loads.

GPS, Camera, Accelerometer, Voice, and Other Phone Features

Phones come with many limitations, but also with many unique features some of them available only to apps, others also accessible for websites. The camera, microphone, and GPS are conveniently integrated into the device and can be easily used to make input easier and get around some of the difficulties of typing. Photographs can transmit more nuanced information that often cannot be easily captured in text. Notifications enable users to be updated immediately of events that are relevant to them. Touch ID allows users to log in using a fingerprint, without typing passwords. And Apple Pay and Google Wallet enable users to use their phones to pay in real life or online, without entering a credit card.

Elements of a Website

Identify AT LEAST 3 websites and deconstruct any significant pages. Comment on:-

The first website I come across is called Nudge http://studionudge.com/work – below is the main home page

Screen Shot 2015-11-25 at 19.26.28.png

Screen Shot 2015-11-25 at 19.48.08.png

Minimalism is tricky to get right. Beautiful typography, well executed whitespace, a carefully chosen colour palette, and perhaps most importantly  making smart decisions about which design elements to include and leave out are some of the things that are factors in producing a great minimalist design. This particular design uses all these elements very well. The overall layout design is visually stunning, the use of white space, I like how the each image on the work option is evenly spaced out, its a an overall clean design. Again the header of the website is minimal again, its clean and crisp, I like the fact the header disappears when you scroll down. If I had to change one thing it would be me the ‘nudge’ logo ever so slightly bigger, I just think its a little to small when you zoom in and out. The footer consists the email address for the website and a copy-write issue logo, its rather minimal, which is good because its consistent wit the header, and the overall design of the website. Its a very easy website to navigate around, you can find everything very easily with the most being around two clicks. I like one of the interactive features which is when you hover over a image, a square banner appears telling me what the design is, I think this is a nice feature, Its an element that I want use upon my website design. I personally think the website does effectively communicate the business, service, and content its trying to promote, the site consists of a contact page, the page is very easy to get around, also very easy to get in contact with. Overall the design and design features are brilliant, the website gives me a good impression on the company, this is what I want to include in to my website design.

The second website I came across is called Lapka

https://mylapka.com – below are some screenshots…

Screen Shot 2015-12-30 at 21.25.36

Screen Shot 2015-12-30 at 21.25.59Screen Shot 2015-12-30 at 21.25.48

This website is called Lapka, I found it through another website called http://designinstruct.com/visual-inspiration/web-design-inspiration/minimalist-website-designs/ . Ive chosen to deconstruct this one because its not the best inters of information and guidance, but its strong in terms of the layout of the website. I personally think the layout is very attractive, its very, very minimal, maybe a little too minimal for some certain people. I think the minimality layout suits this website well, the images used are in high quality, and fill the whole page. However the main home page towards the top of the website doesn’t feature an image, its features a logo and white background, the white background is displayed very beautifully. The font used throughout is a sans serif, not sure the name of the exact font, but its portrayed well throughout the website. The website features a stick navigation bar, this means when scrolling down the navigation bar stays in the same place. The footer of the website features you usual bog standard, contact and social media details, as well as the copy write sign. The website features an interactive parallax slider, a parallax slider is a trend in web design which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth. I would say it effectively communicates the business its trying to promote, but I’m not quite sure it does, the website is very strange in terms of information, I think its something to do with medication, but its not clear on what the website is, so for me it doesn’t effectively communicate with what it trying to promote. If there was something that I would change about this website it would be adding more ‘clear’ information on what the website offers and does. If I was to apply anything to my website, it would the simplicity, I love minimalistic design, I think it really stands out.

The final website that I deconstructed is called Adhemas

http://www.adhemas.com below are some screen-grabs

Screen Shot 2015-12-31 at 00.50.08

Screen Shot 2015-12-31 at 00.50.35

Screen Shot 2015-12-31 at 00.51.08

Screen Shot 2015-12-31 at 00.51.18

This website is portfolio website for a Graphic Designer called Adhemas Batista. I’ve chosen to analyse this one because of the vibrant colours and sleek layout design. A feature that I particularly like about the website is the way the images are all connected together leaving no gaps or spaces, however I do think it only works well if the colours and type of design similar, you don’t want a red and a bright blue colour next to each other because it won’t look right, in this case the website has felt with this well, as all the designers work has the same style and colour tones throughout. If you haven’t already clicked on the link to the website, another great feature is when hovering over a piece of work, a red interactive barber pole like shape continuously runs on top of the design, this isn feature that I didn’t expect, it was a bit of nice surprise because its something unique, and you don’t see it on many websites. The website features most of the elements you need to become noticed such as social media links and contact details, and also an about section; all these elements feature on the header or towards the top of the page. However there is nothing that features at the bottom of the page, just a white banner. I personally think the website effectively communicates with what its trying to do, which is showcase and grab peoples attention to the work that is displayed, whats important is how yo display your work in the best possible way, in my opinion this website does achieve this. If I had to change one element of the website it would be the footer, I don’t like how the footer desert feature anything, I would add maybe social media links towards the bottom, just so the footer features some sort of information. If I was to apply any features from this website to mine, It definitely would be the layout style, its very modern and sleek which I like, also eye catching, which is what I want to incorporate in to my design. Overall the website is a beautiful design, its probably my favourite out of the three I have analysed because of its features and layout. The images and type are very presented, which makes it all in all a great website.

Self Promotion Online

  • What are the different platforms / methods for promoting yourself online?
  • What is the USP
  • What are the limitations
  • How can they benefit a designer

 

One of the most beautiful things about the World Wide Web is how it has brought the globe together and allowed freelancers and small businesses to compete on the same scale as larger and more established firms.

Access to free technology and cost effective online marketing has meant that anyone no matter how large or small can use the Internet to tap into global markets and become a successful operation. In fact, it has completely shifted the goal posts. The entire business model has been transformed and we’re undergoing the biggest cultural shift since the Industrial Revolution.

If you’re a creative small business or freelancer just starting out and you’re keen to promote yourself you can use the Internet to your advantage. There are lots of ways to promote yourself online and here are just a few of our suggestions.

Website

To get started, you need an online presence. If you’ve got the budget, hire a web developer and graphic designer to create a website for your business. Obviously, if you have these skills yourself, you will have no problem. Try to avoid having just a static website and have something that incorporates a blog. Blogs bring many benefits to any website because they bring fresh and relevant content which is crucial for decent SEO. Wordpress is a fantastic platform to build a website that incorporates a blog. If you haven’t got the budget for design, you could always purchase a theme from somewhere like Themeforest.net or WooThemes.com. It will also save you further money, as it cuts down the time required for a web developer to create your site.

What’s in a name?

Next, decide on a domain name, find something that has both the ‘co.uk’ and ‘.com’. Some people buy every domain possible. We only think you need to purchase these two. For SEO purposes, it might be worth buying a domain that isn’t just a baby. That’s because Google loves older domainsand will see your website as more important if it has an older domain, particularly if it was registered before 2000. You can check the age of domains using this helpful tool. Try to also include one of your keywords within your domain name.

Online Portfolios or Blogs

If you’ve literally got no budget or means to have your own website, then you can start your own online portfolio at any number of websites including CarbonMade, Shown’d or the Behance Network all of which have their benefits and interesting features.You could also start your own free blog at Wordpress.org or Blogger.com. These are great online resources that allow you to change your blog’s design and features. You could always translate these into your own website in future.

Social Media

Social media sites such as Facebook and Twitter can be extremely powerful and cost-effective networking and marketing tools. By using social media effectively, you can meet potential new customers online, showcase your expertise and drive traffic to your own website. Don’t forget to hook up your blog to your social media accounts and engage in two way conversation with your followers or fans. If you haven’t yet discovered Ning, it’s worth considering. You can join online communities to network or even create your own. Then there’s LinkedIn not one of my favourites but it’s still worth adding yourself to as it casts the net a little wider.

Directories

It’s a well-known fact that directories are becoming less and less important in the eyes of Google, so they won’t appear as high in the Search Engine Results Pages in future. However, by getting listed it can benefit you hugely in terms of your own link-building campaign, adding to your SEO strategy. So get yourself listed in as many directories as possible. Just beware of those who tie you in and then expect a payment further down the line. When emailing your details to these directories, it’s crucial you think about what words you’d like to act as anchor text, linking back to your website. Think of your keywords and try to get the directory to hyperlink those. And don’t just use the same old keywords, keep it varied that really is the key.

Skills and Techniques

Marketing and communication design

Marketing and communication design on a website may identify what works for its target market. This can be an age group or particular strand of culture; thus the designer may understand the trends of its audience. Designers may also understand the type of website they are designing, meaning, for example, that business-to-business website design considerations might differ greatly from a consumer targeted website such as a retail or entertainment website.

User experience design and interactive design

User understanding of the content of a website often depends on user understanding of how the website works. This is part of the user experience design. User experience is related to layout, clear instructions and labeling on a website. How well a user understands how they can interact on a site may also depend on the interactive design of the site. If a user perceives the usefulness of the website, they are more likely to continue using it. Users who are skilled and well versed with website use may find a more unique, yet less intuitive or less user friendly website interface useful nonetheless. However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill.

Advanced interactive functions may require plug-ins if not advanced coding language skills. Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn’t come pre-installed with most browsers, there’s a risk that the user will have neither the know how or the patience to install a plug-in just to access the content.

Typography

Web designers may choose to limit the variety of website typefaces to only a few which are of a similar style, instead of using a wide range of typefaces or type styles. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications. Font downloading was later included in the CSS3 fonts module and has since been implemented in Safari, Opera 10 and Mozilla Firefox. This has subsequently increased interest in web typography, as well as the usage of font downloading.Most site layouts incorporate negative space to break the text up into paragraphs and also avoid center-aligned text.

Page layout

Part of the user interface design is affected by the quality of the page layout. For example, a designer may consider whether the site’s page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size. Most pages are also center-aligned for concerns of aesthetics on larger screens.

Motion Graphics

The page layout and user interface may also be affected by the use of motion graphics. The choice of whether or not to use motion graphics may depend on the target market for the website. Motion graphics may be expected or at least better received with an entertainment-oriented website. However, a website target audience with a more serious or formal interest (such as business, community, or government) might find animations unnecessary and distracting if only for entertainment or decoration purposes. This doesn’t mean that more serious content couldn’t be enhanced with animated or video presentations that is relevant to the content. In either case, motion graphic design may make the difference between more effective visuals or distracting visuals.

Website Development

To develop my website I will be using WordPress, this is the most popular and simplest Content Management System used to develop websites and blogs. WordPress provides you with themes that are easy and simple to get started with. They’re also websites such as ThemeForest, which provide really interesting themes that are provided by web developers. Lets get started…

One of the toughest parts about this precept is choosing what specific theme I  want to use for my website It took me about five hours to finally decide what theme I wanted because they’re are that many. My website will contain all the necessary content expected to find in a portfolio such as my work, biography and contact information. I want my website to be minimal and simplistic, which some of my research has been based upon – effective websites that speak simplicity. Here are the themes that I was contemplating with with…

Screen Shot 2016-01-08 at 15.48.57

Screen Shot 2016-01-08 at 15.53.27

Screen Shot 2016-01-08 at 15.51.06Screen Shot 2016-01-08 at 16.17.56

These are the four website themes that I thought about using. I did actually purchase (Charm) one these themes because I  thought I looked very clean ad pure. However when it came to actually designing it, it was a load of rubbish, there hardly anything you cold do with it, so I was a little disappointed in that matter. As you can see all of the themes I contemplated with have similar features such as the use of negative space, and the same type of layout design. Also the home page which features images/work which is what I want on my home page when the site gets opened.

I want my website to feature the similar elements to the Adheres Batista website I researched, I loved the interactive elements and home page style. I did some sketches below of what I want my website to look like in terms of the layout.

IMG_6225  Screen Shot 2015-12-31 at 00.50.35

 

As you can see from my sketches, I want my portfolio items to be connected together with no gaps, I was originally inspired to this from the Adheres Batista website I analysed in my research. Once I knew the sort of style and layout I wanted I carried on surfing theme forest, but there was nothing that suited my specific style. Our weird tutor gave us around 5 themes that he had purchased in the past, I came across once that I liked very much called Koncept http://koncept-demo.krownthemes.com its one that is rather similar to the sketch toddling, In terms of the layout.

Chosen Theme

Screen Shot 2016-01-08 at 17.30.33

Screen Shot 2016-01-08 at 17.30.41

Screen Shot 2016-01-08 at 17.31.08

The theme that I have chosen to pursue my website is the Koncpet, the reason being its a clean minimalistic design, it suits what I was looking for inters of the layout and navigation bar system. Also the theme has a lot of elements and options to play with so its not just a one trick pony like the Charm theme I purchased.

Developing my site 

The first job I had to do to start developing my site was download the theme, I followed a step by step tutorial on how to set up theme https://vimeo.com/109672948

Unfortunately there aren’t many tutorial videos on the Koncept, so I had to learn all of the theme on my own, It took some getting used too, but after a few days I found it rather easy.

The first part I started to focus on was getting my images in to position and also my logo set up on the website. One annoying thing to point out, is getting all the image you want to feature on your website to the right size, I spent hours and hours saving my images as a PNG, but that what you have to do when designing a website. If you look at the image below, you notice of set up two featured images for two different sections.. Gripple and Nova, the image is in colour, but for the only down side about this is if I get a red coloured image, and blue one, there will be a colour clash as the different sections are connected together, so I thought it would be a good idea to make the images black and white, but obviously when you click on it, the images of the work will be in colour.

Screen Shot 2016-01-08 at 18.10.58

Screen Shot 2016-01-08 at 18.19.59

As you can see the images suit better in black and white. I added the rest of my feature images to my layout design…

Screen Shot 2016-01-08 at 18.25.35

Screen Shot 2016-01-08 at 18.25.45

Screen Shot 2016-01-08 at 18.26.02

The overall layout design looks pretty neat and slick. The white boxes are the interactive navigators, when you hover over a featured image the white box will appear telling you the title and what type of work it is e.g Branding etc. You can change the colour of the interactive box too, but the theme will only allow two colours white or black, which is pretty annoying if you don’t want either.

Screen Shot 2016-01-08 at 18.43.19

My next task was to focus on getting implementing the logo on to my website, this was very easy to do, all I had to do was click the customise button towards the top of the page. The customise section which is screenshoted below, is great for updating the typography and colour of the website etc. The down side with the colour is you can only change the colour of the navigation bars, and hyperlinked cos and text, the main colour is black. This was a bit of a downer for me because colour of my stationery is teal, so I had to make my logo on the website black, because it would look very out of place if otherwise, however I did set a tale colour for my secondary colour, which features on the interactive icons etc. Above is a screenshot of what my logo looks like when placed in to my website. I am personally very happy with how looks, very minimal, and very clean.

Screen Shot 2016-01-08 at 18.33.21

Screen Shot 2016-01-08 at 18.35.39

Once I had sorted the header and logo of my website, I started to focus on the footer. The footer of my website will feature social media links and the copywriter symbol, applying the social media links was a very easy job, I had to apply a small short code to the widgets section…

Screen Shot 2016-01-08 at 18.51.04

Once I applied the short codes, I had to link them to my social media sites, this applied the social media and copywrie logos to the footer of the website… picture below…

Screen Shot 2016-01-08 at 18.56.22

The next section was to apply the design elements navigation bar, this was very easy to do, all I had to do was go in the portfolio section and apply a ‘new’ category. each category will be linked up to a piece of work, e.g Nova = identity design etc.

Screen Shot 2016-01-08 at 18.57.54

The next step was to apply my work to each one of my portfolio sections. The first thing I had to do was save all my images as a png so its suitable for my website. I had quite a lot of work for each section, so I thought it would be a good idea to apply a revolution slider, I found a tutorial to help me learn the roped of the revolution slider. This video helped me a lot, because i went on to do a slider almost every portfolio section.. https://www.youtube.com/watch?v=p7rBZmYgfUU After watching the video, creating a revolution slider became very easy, it basically does it for you. There were many options for layouts arrows and bullets etc. I chose a standard slider, with uranus yes uranus arrows and bullets because these were the once that suited best with my theme. Here the link to the slider i created on my website. Just another good pointer that I found positive, was the fact you could copy the short code and place it in a text box, makes it 100 times easier. http://graphicsjakek.co.uk.gridhosted.co.uk/portfolio/nova-identity/

I applied the same elements to every other slider in my portfolio section.

Screen Shot 2016-01-08 at 19.07.17

Screen Shot 2016-01-08 at 19.07.28

Screen Shot 2016-01-08 at 19.07.35

Screen Shot 2016-01-08 at 19.08.40

I then set bout placing my text and header on my Nova section, this again was very easy to do, all I had to was create a column in my page builder section, then apply a section title which is where my header go, and a text box which obviously where the text will go. I used a 1/4 + 3/4 section layout, because its the one that suited best, in terms of appearance. Below is the finished article, I think it looks a little different and unique to other websites, because 99% of the time the header and text are usually placed down the middle, I wanted t spread across the whole page, but in a minimal fashion.

Screen Shot 2016-01-08 at 19.21.13

Towards the bottom of the page I added the rest of my remaining images for the nova section directly underneath the text. I applied my images in the a similar layout as the home page, all joined together I think this shows a nice consistency between the different sections. Images below..

Screen Shot 2016-01-08 at 19.27.28

I applied the same layout to my other portfolio sections, bar two which are the freelance work that I produced, I opted for a slightly different layout design because there isn’t really many images that I had, only a logo and a business card. Images below..

Screen Shot 2016-01-08 at 19.27.51

Screen Shot 2016-01-08 at 19.29.23

About page 

Once I had completed all of my portfolio sections I started to produce my About page, this page will just include information about myself. I will also include a picture as well. All I had to do for this was go in to my pages section and apply a text box and a section title, as well as a single image. image below…

Screen Shot 2016-01-08 at 19.32.59

Contact page

The final section I designed was the contact page, which again was easy to design, the map which is already featured below was already in place, the only area I had to edit was the text and section title design. All I had to do was add the address, name, and email to this section. Below is a image of of what I produced below…

Screen Shot 2016-01-09 at 04.07.40

Screen Shot 2016-01-09 at 04.07.46

Problems and draw backs

Layout colour Interpretation –

Using the Koncept theme did have its draw backs, especially when it came to the colour of the layout design, in fact the overall layout design. I was a little disappointed with the background colour, which is a very light grey colour. My revolution sliders and my images all have feature a white background, which is a shame because if you look closely the added connect is set in white as the background is set in a light grey colour, so in other words there a slight colour clash.

Image sizes – 

The image sizes on this theme are sort of false in my opinion. On the original Koncept theme the images and slider run off the logo and navigation bar in the top right hand corner. Unfortunately when I submit an image or revolution slider, the image doesn’t exceed the maximum width, it only sizes to a certain point, which is a little annoying as it works for the main Koncept theme options.

Evaluation – 

I am very pleased with my Website design because I did everything I said I wanted to do, I linked my website up to my research, comparing my design to a each website I researched. I love the overall simplicity of the website design.

In terms of how my website looks, I think it’s great and I have reached my expectations. I find my website easy and simple to navigate through. It’s clean, professional and straightforward. It contains all the necessary contents that a client would expect and the layout is clean, and consistent.

I personally think my website is very creative, despite the set backs. I feel its still needs a little bit of work, especially the about page! The overall portfolio section looks brilliant and really professional, however I still need to edit certain elects a little further.

Layout
Although I had problems with the fluid layout, I did manage to resolve it and control my website and content width. I was able to set it at the width I desired, leaving a great amount of white space. My grid system is modular and consistent throughout my website, including gap space between content.

When I first heard that we were going to design our own website, I nearly died of a heart attack, I was thinking there is no way Im going to be able to learn that. How wrong was I! Web design is something that I have become particularly fond of, I am extremely pleased with my overall website design, its very strong and is fit for purpose.

Here is the link to my completed website…  View my site

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s