Visit LEDU token page

How to design Smart City website using PS + Invision

How to design Smart City website using PS + Invision

  • English
  • Design
  • Web App DesignWeb App Design
  • (1426)
  • Project length: 5h 18m

How to design Smart City website using PS and prototype it in InVision. Smart City Website is basically used for search places nearby areas like Restaurant(Food Points, Hotels), Bar, Beach , Best Places for weekend Tour, Shopping Point, Sports Point. Just Search Where you want to visit, this will Guide you as tourist Guider Map. Start With Header And End With Footer in the middle section it is containing Content Part (All details about Smart city Feature) like A. Slider with the title, Small description and search bar to search areas B. Features of My City ( City Guidance, Map Marker, information reviews Etc ) C. Best Place in the city to visit Like Restaurant(Food Points), Bar, Beech, Best Places for weekend Tour, Shopping Point, Sports Point D. Footer Area With 4 divided section for: About City, Services, Programs And Contact Us It would be used to search and visit more interactive places or for trip plans The viewer would watch this video for learning the purpose, they can easily learn how to use Photoshop and their tools

Overview

Introduction

This tutorial will cover:

Smart City Website is basically used for search places nearby areas like Restaurant(Food Points, Hotels), Bar, Beach , Best Places for weekend Tour, Shopping Point, Sports Point. Just Search Where you want to visit, this will Guide you as tourist Guider Map.

Start With Header And End With Footer in the middle section it is containing Content Part (All details about Smart city Feature) like

A. Slider with the title, Small description and search bar to search areas B. Features of My City ( City Guidance, Map Marker, information reviews Etc ) C. Best Place in the city to visit Like Restaurant(Food Points), Bar, Beech, Best Places for weekend Tour, Shopping Point, Sports Point D. Footer Area With 4 divided section for: About City, Services, Programs And Contact Us

It would be used to search and visit more interactive places or for trip plans The viewer would watch this video for learning the purpose, they can easily learn how to use Photoshop and their tools

Introduction

  1. How to Create Header, Footer
  2. Landing Page(Home Page)
  3. Our Services Page
  4. Our Plans
  5. About Us
  6. Contact Us

What are the requirements?

Adobe Photoshop CS6

What is the target audience?

  • Learners who want to enhance their knowledge
  • This course will help the users who are doing their projects
  • They Can Learn How to use the tools of Photoshop

Project Outline

Session 1: How to Create Header part and Slider Section

  • Header (Top Header, Welcome Text, Location, Social Links, Signup, Login) Descriptions:-In this tutorial you will learn how to create header for Smart City Website. It contains all menu items that link with other pages in website. Banner section contains a slideshow of images. We can add here taglines and content for website. Search option is used to search various Event, Services in city.
  • Logo, Navigation Menu (Active Menu Colour, Inactive menu colour) Descriptions:-Logo represents brand of your website. Website colour and theme is based upon Logo colour. Active menu represent page open in website.

Session 2: How to Create Different Sections of Homepage and footer

  • Places in City like Bar , Beech , films
  • Weekly Places
  • Footer(Footer part Respresents the Bottom Content area of Website ). Descriptions:-In this section there must be social media, Quick links and some information about city or website. Followings are sections we used in footer. 1. Information about Smart City About in brief 2. Services which will be available at the time 3. Programs: where is program scheduled? 4. Contact Us

Session 3: How to Create about us page.

Descriptions:-In this tutorial you will learn, How to create About Us Page? You can add history of website and some information about it political and government.

  • Why Our City, Consumer Products City, Financial Services.
  • What People says about Basically Testimonials (What they are saying about Smart City Website).
  • Welcome Section: By welcome section, we are inviting people to visit in our city

Session 4: How to Create Our Places page

Descriptions:-In this tutorial you will learn about best place of city. All attraction points of city. You can add gallery of places, Map and history of places in descriptions.

  • We can Search places by using Search bar where you want to visit Like Spa Centre, Breeze all day Bar, Happy Night Bar.

Session 5: How to Create Contact Us page

Descriptions:-If someone want to leave its feedback and want to know more about your city they can contact using this page. We are adding here map marker to know about location and address of city.

  • On contact us page we are using map image Sections for Office address, Phone Number, Email Address

Session 6: How to Create Event and Gallery page

Descriptions:- In this tutorial you will learn about how to create section for latest Events for Festivals Celebration, celebrities Shows, Competitions Etc. User can click on event and find data and time of event, location and they can register for events as well. Gallery :- Filter All Gallery Images By Places , videos and Events

Session 7: Prototyping in InVision

Descriptions:-In this tutorial you will learn about, How to create prototype for website. User can open this invision App link and navigate through all screens of website e.g. Menu, tabs click etc. They can open any page using menu. This provides complete flow of website step by step.

Reviews

Average rating

5(1426 Reviews)